Mesh - new website

.gitignore

@@ -14,6 +14,5 @@ package-lock.json
 .mesh
 /.idea/
 .next/
-/website/api-sidebar.json
-/website/docs/api
+/website/src/pages/docs/api/
 /.husky/_/

.prettierignore

@@ -1,5 +1,6 @@
 /.changeset/*.md
-/website/docs/generated-markdown/
+/website/src/generated-markdown/
+/website/src/pages/docs/api/
 .next/
 dist/
 .mesh/

examples/graphql-file-upload-example/frontend/package.json

@@ -9,8 +9,8 @@
     "@apollo/client": "3.6.9",
     "apollo-upload-client": "17.0.0",
     "graphql": "16.5.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "2.1.4"
   },

examples/nextjs-apollo-example/package.json

@@ -18,11 +18,11 @@
     "apollo-server-micro": "2.25.4",
     "graphql": "16.5.0",
     "next": "12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.47",
+    "@types/react": "18.0.15",
     "typescript": "4.7.4"
   }
 }

examples/nextjs-sdk-example/package.json

@@ -19,11 +19,11 @@
     "apollo-server-micro": "2.25.4",
     "graphql": "16.5.0",
     "next": "12.2.3",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "17.0.47",
+    "@types/react": "18.0.15",
     "typescript": "4.7.4"
   }
 }

examples/openapi-react-weatherbit/package.json

@@ -4,13 +4,13 @@
   "private": true,
   "dependencies": {
     "graphql": "16.5.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@graphql-mesh/cli": "0.75.3",
-    "@types/react": "17.0.47",
-    "@types/react-dom": "17.0.17",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
     "@vitejs/plugin-react": "2.0.0",
     "typescript": "4.7.4",
     "vite": "3.0.3"

package.json

@@ -7,7 +7,7 @@
     "postinstall": "patch-package && husky install",
     "prebuild:website": "yarn build && yarn build:api-docs",
     "build:website": "cd website && yarn build",
-    "generate-config-schema": "graphql-to-config-schema --schema ./**/yaml-config.graphql --json ./packages/types/src/config-schema.json --typings ./packages/types/src/config.ts --markdown ./website/docs/generated-markdown/ && prettier --write ./packages/types/src && ts-node --compiler-options='{\"module\":\"commonjs\"}' scripts/escape-generated-markdown",
+    "generate-config-schema": "graphql-to-config-schema --schema ./**/yaml-config.graphql --json ./packages/types/src/config-schema.json --typings ./packages/types/src/config.ts --markdown ./website/src/generated-markdown && prettier --write ./packages/types/src",
     "prebuild": "yarn generate-config-schema",
     "transpile-ts": "tsc --project tsconfig.build.json",
     "build": "yarn transpile-ts && bob build",
@@ -54,9 +54,9 @@
     "patch-package": "6.4.7",
     "prettier": "2.7.1",
     "ts-jest": "28.0.7",
-    "typedoc": "0.22.13",
-    "typedoc-plugin-markdown": "3.11.14",
-    "typedoc-plugin-rename-defaults": "0.4.0",
+    "typedoc": "0.23.1",
+    "typedoc-plugin-markdown": "3.13.3",
+    "typedoc-plugin-rename-defaults": "0.6.4",
     "typescript": "4.7.4"
   },
   "husky": {
@@ -68,12 +68,13 @@
     "packages/**/src/**/*.{ts,tsx}": [
       "eslint --fix"
     ],
-    "**/*.{ts,tsx,graphql,yml,json,md,mdx,js}": [
+    "**/*.{ts,tsx,graphql,yml,json,md,js}": [
       "prettier --write"
     ]
   },
   "workspaces": {
     "packages": [
+      "./website",
       "./packages/*",
       "./packages/cache/*",
       "./packages/handlers/*",
@@ -83,7 +84,6 @@
       "./examples/*",
       "./examples/federation-example/*",
       "./examples/graphql-file-upload-example/frontend",
-      "./website",
       "./packages/loaders/*"
     ]
   },

packages/cache/file/CHANGELOG.md

@@ -58,7 +58,7 @@
 
   Now you can basically use Cloudflare Workers' KV Caching system within Mesh;
 
-  ```yml
+  ```yaml
   cache:
     cfKv:
       namespace: MESH

packages/cache/redis/CHANGELOG.md

@@ -58,7 +58,7 @@
 
   Now you can basically use Cloudflare Workers' KV Caching system within Mesh;
 
-  ```yml
+  ```yaml
   cache:
     cfKv:
       namespace: MESH

packages/cli/src/commands/serve/yaml-config.graphql

@@ -50,7 +50,7 @@ type ServeConfig @md {
   endpoint: String
   """
   Path to the browser that will be used by `mesh serve` to open a playground window in development mode
-  This feature can be disable by passing `false`
+  This feature can be disabled by passing `false`
   """
   browser: Browser
   """

packages/config/CHANGELOG.md

@@ -151,9 +151,9 @@
       sourceName: Author
       sourceTypeName: Query
       sourceFieldName: authorById
-      requiredSelectionSet: "{ id }"
+      requiredSelectionSet: '{ id }'
       sourceArgs:
-        id: "{root.id}"
+        id: '{root.id}'
   ```
 
   After:

packages/handlers/graphql/CHANGELOG.md

@@ -53,9 +53,9 @@
 - 66f5d0189: **New `credentials` configuration option**
 
   Previously it wasn't possible to configure `credentials` of outgoing `Request` object passed to `fetch`. And the default behavior was `same-origin`.
-  Now it is possible to configure it and you can also remove it completely for the environments (e.g. CF Workers) to avoid errors like `'credentials' hasn't been implemented yet` etc.
+  Now it is possible to configure it, and you can also remove it completely for the environments (e.g. CF Workers) to avoid errors like `'credentials' hasn't been implemented yet` etc.
 
-  ```yml
+  ```yaml
   graphql:
     endpoint: ...
     credentials: disable

packages/handlers/graphql/yaml-config.graphql

@@ -82,7 +82,7 @@ type GraphQLHandlerHTTPConfiguration @md {
   webSocketImpl: String
   """
   Path to the introspection
-  You can seperately give schema introspection
+  You can separately give schema introspection
   """
   introspection: String
   """

packages/handlers/json-schema/yaml-config.graphql

@@ -150,22 +150,23 @@ type JsonSchemaHTTPOperation implements JsonSchemaBaseOperation {
   """
   responseSchema: Any
   """
-  Did you use Sample? Provide the respone sample path.
+  Did you use Sample? Provide the response sample path.
   """
   responseSample: Any
   """
   Inset any name for the type of the response body.
   """
   responseTypeName: String
-
   """
   You can define your response schemas by status codes;
+  ```yaml
   responseByStatusCode:
     200:
       responseSchema: ./someschema.json#/somepath
     404:
       responseSample: ./error-sample.json
       responseTypeName: MyError
+  ```
   """
   responseByStatusCode: Any
 

packages/handlers/soap/yaml-config.graphql

@@ -34,7 +34,7 @@ type SoapHandler @md {
   The fields of the object will be the operations of the port.
   Most soap-endpoints only define one port; so including it in the schema will just be inconvenient.
   But if there are multiple ports with operations of the same name, you should set this option to true.
-  Otherwise only one of the identical-named operations will be callable.
+  Otherwise, only one of the identical-named operations will be callable.
   default: false
   """
   includePorts: Boolean
@@ -43,7 +43,7 @@ type SoapHandler @md {
   The fields of the object will be the ports of the service (or the operation, dependent on 'includePorts').
   Most soap-endpoints only define one service; so including it in the schema will just be inconvenient.
   But if there are multiple services with operations of the same name, you should set this option to true.
-  Otherwise only one of the identical-named operations will be callable.
+  Otherwise, only one of the identical-named operations will be callable.
   default: false
   """
   includeServices: Boolean

packages/loaders/README.md

@@ -6,16 +6,16 @@ You can consume this `GraphQLSchema` inside any tools in GraphQL Ecosystem such
 
 ### GraphQL Config
 
-GraphQL Config is a way of specifying your GraphQL Project in a standard way so the most of tools around GraphQL Ecosystem can recognize your project such as VSCode GraphQL Extension, GraphQL ESLint and GraphQL Code Generator
+GraphQL Config is a way of specifying your GraphQL Project in a standard way so the most of the tools around GraphQL Ecosystem can recognize your project such as VSCode GraphQL Extension, GraphQL ESLint and GraphQL Code Generator
 
-```yml
+```yaml
 schema: ./packages/server/modules/**/*.graphql # Backend
 documents: ./packages/client/pages/**/*.graphql # Frontend
 ```
 
 Omnigraph acts like as a custom loader with GraphQL Config
 
-```yml
+```yaml
 schema:
   MyOmnigraph:
     loader: '@omnigraph/openapi' # This provides GraphQLSchema to GraphQL Config
@@ -30,7 +30,7 @@ Let's say we want to create a type-safe SDK from the generated schema using Grap
 
 Like any other GraphQL project. We can use `extensions.codegen`
 
-```yml
+```yaml
 schema:
   MyOmnigraph:
     loader: '@omnigraph/openapi' # This provides GraphQLSchema to GraphQL Config
@@ -112,7 +112,7 @@ export default function loadSchemaFromBundle() {
 
 And use our new loader in GraphQL Config by replacing `loader`
 
-```yml
+```yaml
 schema:
   MyOmnigraph:
     loader: ./load-schema-from-bundle.js # This provides GraphQLSchema to GraphQL Config

packages/loaders/json-schema/CHANGELOG.md

@@ -183,7 +183,7 @@
 
 - b69746d2c: feat(json-schema): new exposeResponseMetadata flag to expose the details of the HTTP responses received from the upstream
 
-  ```yml
+  ```yaml
   responseSchema: ...
   exposeResponseMetadata: true
   ```

packages/loaders/json-schema/README.md

@@ -2,7 +2,7 @@
 
 This package generates GraphQL Schema from JSON Schema and sample JSON request and responses. You can define your root field endpoints like below in your GraphQL Config for example;
 
-```yml
+```yaml
 schema:
   myOmnigraph:
     loader: '@omnigraph/json-schema'

packages/loaders/raml/README.md

@@ -2,11 +2,11 @@
 
 This package generates `GraphQLSchema` instance from **RAML API Document** (`.raml`) file located at a URL or FileSystem by resolving the JSON Schema dependencies. It uses `@omnigraph/json-schema` by generating the necessary configuration.
 
-```yml
+```yaml
 schema:
   myOmnigraph:
-    loader: "@omnigraph/raml"
+    loader: '@omnigraph/raml'
     ramlFilePath: https://www.my-api.com/api.raml
     operationHeaders:
-    	Authorization: Bearer {context.apiToken}
+      Authorization: Bearer {context.apiToken}
 ```

packages/plugins/response-cache/CHANGELOG.md

@@ -58,7 +58,7 @@
 
   Now you can basically use Cloudflare Workers' KV Caching system within Mesh;
 
-  ```yml
+  ```yaml
   cache:
     cfKv:
       namespace: MESH

packages/plugins/response-cache/yaml-config.graphql

@@ -34,14 +34,14 @@ type ResponseCacheConfig {
   Return a unique value for each session.
   Creates a global session by default.
   Example;
-  ```yml
+  ```yaml
   sessionId: "{context.headers.userId}"
   ```
   """
   sessionId: String
   """
   Specify whether the cache should be used based on the context.
-  ```yml
+  ```yaml
   if: "context.headers.userId != null"
   ```
   """
@@ -50,7 +50,7 @@ type ResponseCacheConfig {
   Customize the behavior how the response cache key is computed from the documentString, variableValues, contextValue and sessionId.
   If the given string is interpolated as empty, default behavior is used.
   Example;
-  ```yml
+  ```yaml
   # Cache by specific value
   cacheKey: "{variableValues.userId}"
 
@@ -71,7 +71,7 @@ type ResponseCacheConfig {
 
   """
   Checks if the result should be cached.
-  ```yml
+  ```yaml
   shouldCacheResult: "result.errors.length > 0"
   ```
   """

packages/transforms/cache/yaml-config.graphql

@@ -12,16 +12,18 @@ type CacheTransformConfig @md {
   field: String!
   """
   Cache key to use to store your resolvers responses.
-  The default is: {typeName}-{fieldName}-{argsHash}-{fieldNamesHash}
+  The default is: `{typeName}-{fieldName}-{argsHash}-{fieldNamesHash}`
+
   Available variables:
-  - {args.argName} - use resolver argument
-  - {typeName} - use name of the type
-  - {fieldName} - use name of the field
-  - {argsHash} - a hash based on the 'args' object
-  - {fieldNamesHash} - a hash based on the field names selected by the client
-  - {info} - the GraphQLResolveInfo of the resolver
+    - `{args.argName}` - use resolver argument
+    - `{typeName}` - use name of the type
+    - `{fieldName}` - use name of the field
+    - `{argsHash}` - a hash based on the 'args' object
+    - `{fieldNamesHash}` - a hash based on the field names selected by the client
+    - `{info}` - the GraphQLResolveInfo of the resolver
+
   Available interpolations:
-  - {format|date} - returns the current date with a specific format
+    - `{format|date}` - returns the current date with a specific format
   """
   cacheKey: String
   """

packages/transforms/federation/yaml-config.graphql

@@ -26,8 +26,7 @@ type ResolveReferenceObject {
   """
   queryFieldName: String!
   """
-  If the root field name has multiple args,
-  you need to define which argument should receive the key
+  If the root field name has multiple args, you need to define which argument should receive the key
   """
   keyArg: String
 }

packages/transforms/mock/yaml-config.graphql

@@ -41,8 +41,8 @@ type MockingFieldConfig {
   Faker.js expression or function
   Read more (https://github.com/marak/Faker.js/#fakerfake)
   Example:
-  faker: name.firstName
-  faker: "{{ name.firstName }} {{ name.lastName }}"
+  faker: `name.firstName`
+  faker: `{{ name.firstName }} {{ name.lastName }}`
   """
   faker: String
   """

packages/transforms/rate-limit/yaml-config.graphql

@@ -23,7 +23,7 @@ type RateLimitTransformConfig @md {
   """
   ttl: Int!
   """
-  The identifier expression that determines the identity of the request (e.g. "{context.req.socket.remoteAddress}")
+  The identifier expression that determines the identity of the request (e.g. `{context.req.socket.remoteAddress}`)
   """
   identifier: String!
 }