@graphcommerce/graphql-mesh 9.0.4-canary.6 → 9.0.4-canary.9

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 9.0.4-canary.9
+
+## 9.0.4-canary.8
+
+### Patch Changes
+
+- [#2480](https://github.com/graphcommerce-org/graphcommerce/pull/2480) [`4075474`](https://github.com/graphcommerce-org/graphcommerce/commit/40754746e3d3a05193525ebf94247ed85b6f111d) - GraphQL Mesh will now be in read-only mode by default, so only a single instance is created globally. This means it doesn't get recreated on each page compilation and fast refresh. Creating the instance is an expensive operation and can take multiple seconds and during development (and this can happen multiple times during a single change). Now only a single instance is created during development. To make sure changes are picked up during development set the config value `graphqlMeshEditMode: true` in your graphcommerce.config.js or set the env variable `GC_GRAPHQL_MESH_EDIT_MODE=1`. This is the same as the old behavior and this _will_ make the frontend considerably slower. ([@paales](https://github.com/paales))
+
+## 9.0.4-canary.7
+
 ## 9.0.4-canary.6
 
 ## 9.0.4-canary.5

package/Config.graphqls

@@ -0,0 +1,7 @@
+extend input GraphCommerceConfig {
+  """
+  The GraphQL Mesh will be loaded once and any modifications to resolvers will be ignored. When developing
+  new resolvers this should be set to true.
+  """
+  graphqlMeshEditMode: Boolean = false
+}

package/api/createEnvelop.ts

@@ -1,13 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
-import { createBuiltMeshHTTPHandler } from '../.mesh'
-
-const handler = createBuiltMeshHTTPHandler()
+import { createBuiltMeshHTTPHandler } from './globalThisMesh'
 
 // eslint-disable-next-line @typescript-eslint/require-await
 export const createServer = async (endpoint: string) => {
   if (endpoint !== '/api/graphql')
     throw Error('Moving the GraphQL Endpoint is not supported at the moment')
-  return (req: NextApiRequest, res: NextApiResponse) => {
+
+  const handler = createBuiltMeshHTTPHandler()
+  return async (req: NextApiRequest, res: NextApiResponse) => {
     res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
     const requestedHeaders = req.headers['access-control-request-headers']
     if (requestedHeaders) {
@@ -20,6 +20,6 @@ export const createServer = async (endpoint: string) => {
       return
     }
 
-    handler(req, res)
+    await handler(req, res)
   }
 }

package/api/globalThisMesh.ts

@@ -0,0 +1,55 @@
+import type { MeshInstance } from '@graphql-mesh/runtime'
+import type {
+  ServerAdapter,
+  ServerAdapterBaseObject,
+  ServerAdapterRequestHandler,
+} from '@whatwg-node/server'
+import { createBuiltMeshHTTPHandlerBase, getBuiltMeshBase } from '../.mesh'
+
+type MeshHTTPHandler<TServerContext = Record<string, unknown>> = ServerAdapter<
+  TServerContext,
+  ServerAdapterBaseObject<TServerContext, ServerAdapterRequestHandler<TServerContext>>
+>
+
+declare global {
+  // eslint-disable-next-line vars-on-top, no-var
+  var buildMesh: Promise<MeshInstance> | undefined
+
+  // eslint-disable-next-line vars-on-top, no-var
+  var builtMeshHandler: MeshHTTPHandler | undefined
+}
+
+const shouldGlobalThisMeshBeCreated =
+  process.env.NODE_ENV === 'development' && import.meta.graphCommerce.graphqlMeshEditMode !== true
+
+/**
+ * We are creating a global instance of the mesh so it doesn't get recreated on every change.
+ * Creating the instance is a very long operation and with sufficiently complex schema's it can take
+ * multiple seconds. During development it can happen multiple times during a single change.
+ *
+ * During development this creates a big advantage as we do not recreate the mesh on every reload.
+ * This makes development a lot faster.
+ *
+ * The disadvantage of this is that the mesh and any resolvers custom resolver will not be refreshed
+ * whenever code changes are made, to enable this set the config value `graphqlMeshEditMode: true`
+ * in your graphcommerce.config.js or set the env variable `GC_GRAPHQL_MESH_EDIT_MODE=1`.
+ */
+export function getBuiltMesh() {
+  if (shouldGlobalThisMeshBeCreated) {
+    globalThis.buildMesh ??= getBuiltMeshBase()
+    return globalThis.buildMesh
+  }
+  return getBuiltMeshBase()
+}
+
+/**
+ * Same as globalThisGetBuiltMesh but for the mesh handler. As the handler uses additional logic so
+ * we can't re-use globalThisGetBuiltMesh.
+ */
+export function createBuiltMeshHTTPHandler(): MeshHTTPHandler {
+  if (shouldGlobalThisMeshBeCreated) {
+    globalThis.builtMeshHandler ??= createBuiltMeshHTTPHandlerBase() as MeshHTTPHandler
+    return globalThis.builtMeshHandler
+  }
+  return createBuiltMeshHTTPHandlerBase() as MeshHTTPHandler
+}

package/index.ts

@@ -1,4 +1,7 @@
+/* eslint-disable import/export */
 export * from './api/createEnvelop'
 export * from './api/apolloLink'
 export * from './.mesh'
+// @ts-expect-error getBuiltMesh and createBuiltMeshHTTPHandler are re-exported here and override the export from .mesh
+export * from './api/globalThisMesh'
 export * from './utils/traverseSelectionSet'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql-mesh",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.4-canary.6",
+  "version": "9.0.4-canary.9",
   "main": "index.ts",
   "dependencies": {
     "@whatwg-node/fetch": "^0.10.1",
@@ -14,9 +14,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "*",
-    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.6",
-    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.6",
-    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.6",
+    "@graphcommerce/eslint-config-pwa": "^9.0.4-canary.9",
+    "@graphcommerce/prettier-config-pwa": "^9.0.4-canary.9",
+    "@graphcommerce/typescript-config-pwa": "^9.0.4-canary.9",
     "@graphql-mesh/runtime": "*",
     "@graphql-mesh/types": "*"
   },

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
   "exclude": ["**/node_modules", "**/.*/"],
   "include": ["**/*.ts", "**/*.tsx"],
-  "extends": "@graphcommerce/typescript-config-pwa/node.json"
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
 }