@graphcommerce/graphql 6.0.2-canary.8 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # Change Log
 
+## 6.1.0
+
+### Minor Changes
+
+- [#1869](https://github.com/graphcommerce-org/graphcommerce/pull/1869) [`82111fa35`](https://github.com/graphcommerce-org/graphcommerce/commit/82111fa351b68a76ff053ebb7e0261ee507a826d) - Faster page rendering on all pages that use Apollo Client: Revert to classical useEffect strategy for Apollo cache persist restore and remove custom hydration strategies from the cart/customer.
+
+  This comes with a caviat: When using `<Suspense>` to defer rendering you might run into hydration errors. In the case where the Suspense boundaries are used to improve performance, you are required to remove those. We have a follow-up [PR](https://github.com/graphcommerce-org/graphcommerce/pull/1878) in the works that allows getting the hydration performance improvement, but not have the hydration errors. ([@paales](https://github.com/paales))
+
+### Patch Changes
+
+- [#1883](https://github.com/graphcommerce-org/graphcommerce/pull/1883) [`ede93ae7f`](https://github.com/graphcommerce-org/graphcommerce/commit/ede93ae7f1d9239d1e827cce574085a1c264890b) - When running in dev mode, the CLI will now have clickable references to the backend queries made by the Mesh. ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.22
+
+## 6.0.2-canary.21
+
+## 6.0.2-canary.20
+
+## 6.0.2-canary.19
+
+## 6.0.2-canary.18
+
+## 6.0.2-canary.17
+
+## 6.0.2-canary.16
+
+## 6.0.2-canary.15
+
+## 6.0.2-canary.14
+
+## 6.0.2-canary.13
+
+### Patch Changes
+
+- [#1869](https://github.com/graphcommerce-org/graphcommerce/pull/1869) [`82111fa35`](https://github.com/graphcommerce-org/graphcommerce/commit/82111fa351b68a76ff053ebb7e0261ee507a826d) - Revert to classical useEffect strategy for Apollo cache persist restore and remove custom hydration strategies from the cart. ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.12
+
+## 6.0.2-canary.11
+
+## 6.0.2-canary.10
+
+### Patch Changes
+
+- [#1883](https://github.com/graphcommerce-org/graphcommerce/pull/1883) [`ede93ae7f`](https://github.com/graphcommerce-org/graphcommerce/commit/ede93ae7f1d9239d1e827cce574085a1c264890b) - Added clickable links to measurePerformanceLink ([@paales](https://github.com/paales))
+
+## 6.0.2-canary.9
+
 ## 6.0.2-canary.8
 
 ## 6.0.2-canary.7

package/components/GraphQLProvider.tsx

@@ -8,7 +8,7 @@ import {
   HttpLink,
 } from '@apollo/client'
 import type { AppProps } from 'next/app'
-import { useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createCacheReviver } from '../createCacheReviver'
 import { errorLink } from '../errorLink'
 import fragments from '../generated/fragments.json'
@@ -46,30 +46,40 @@ export function GraphQLProvider(props: GraphQLProviderProps) {
   const { children, policies = [], migrations = [], links = [], pageProps } = props
   const state = (pageProps as { apolloState?: NormalizedCacheObject }).apolloState
 
+  const stateRef = useRef(state)
+
+  const linksRef = useRef(links)
+  const policiesRef = useRef(policies)
+
+  const createCache = useCallback(
+    () =>
+      new InMemoryCache({
+        possibleTypes: fragments.possibleTypes,
+        typePolicies: mergeTypePolicies(policiesRef.current),
+      }),
+    [],
+  )
+
   const [client] = useState(() => {
     const link = ApolloLink.from([
       ...(typeof window === 'undefined' ? [errorLink, measurePerformanceLink] : []),
-      ...links,
+      ...linksRef.current,
       // The actual Http connection to the Mesh backend.
       new HttpLink({ uri: '/api/graphql', credentials: 'same-origin' }),
     ])
 
-    const createCache = () =>
-      new InMemoryCache({
-        possibleTypes: fragments.possibleTypes,
-        typePolicies: mergeTypePolicies(policies),
-      })
+    const cache = createCache()
+    if (stateRef.current) cache.restore(stateRef.current)
 
-    const apolloClient = new ApolloClient({
-      link,
-      cache: createCache(),
-      name: 'web',
-      ssrMode: typeof window === 'undefined',
-    })
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    createCacheReviver(apolloClient, createCache, policies, migrations, state)
-    return apolloClient
+    const ssrMode = typeof window === 'undefined'
+    return new ApolloClient({ link, cache, name: 'web', ssrMode })
   })
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    createCacheReviver(client, createCache, policies, migrations, state)
+  }, [client, createCache, migrations, policies, state])
+
   globalApolloClient.current = client
 
   return <ApolloProvider client={globalApolloClient.current}>{children}</ApolloProvider>

package/lib/hyperlinker.ts

@@ -0,0 +1,84 @@
+'use strict'
+
+/*
+A hyperlink is opened upon encountering an OSC 8 escape sequence with the target URI. The syntax is
+OSC 8 ; params ; URI BEL|ST
+Following this, all subsequent cells that are painted are hyperlinks to this target. A hyperlink is closed with the same escape sequence, omitting the parameters and the URI but keeping the separators:
+OSC 8 ; ; BEL|ST
+const ST = '\u001B\\';
+ */
+const OSC = '\u001B]'
+const BEL = '\u0007'
+const SEP = ';'
+
+const hyperlinker = (text: string, uri: string) =>
+  [OSC, '8', SEP, SEP, uri, BEL, text, OSC, '8', SEP, SEP, BEL].join('')
+
+function parseVersion(versionString: string): { major: number; minor: number; patch: number } {
+  if (/^\d{3,4}$/.test(versionString)) {
+    // Env var doesn't always use dots. example: 4601 => 46.1.0
+    const m = /(\d{1,2})(\d{2})/.exec(versionString) || []
+    return {
+      major: 0,
+      minor: parseInt(m[1], 10),
+      patch: parseInt(m[2], 10),
+    }
+  }
+
+  const versions = (versionString || '').split('.').map((n) => parseInt(n, 10))
+  return {
+    major: versions[0],
+    minor: versions[1],
+    patch: versions[2],
+  }
+}
+
+function supportsHyperlink(): boolean {
+  const {
+    CI,
+    FORCE_HYPERLINK,
+    NETLIFY,
+    TEAMCITY_VERSION,
+    TERM_PROGRAM,
+    TERM_PROGRAM_VERSION,
+    VTE_VERSION,
+    VERCEL,
+  } = process.env
+
+  if (FORCE_HYPERLINK) {
+    return !(FORCE_HYPERLINK.length > 0 && parseInt(FORCE_HYPERLINK, 10) === 0)
+  }
+
+  if (NETLIFY) return true
+  if (process.stdout.isTTY || process.stderr.isTTY) return false
+  if (process.platform === 'win32') return false
+  if (CI) return false
+  if (VERCEL) return false
+  if (TEAMCITY_VERSION) return false
+
+  if (TERM_PROGRAM) {
+    const version = parseVersion(TERM_PROGRAM_VERSION || '')
+
+    switch (TERM_PROGRAM) {
+      case 'iTerm.app':
+        if (version.major === 3) return version.minor >= 1
+        return version.major > 3
+      case 'WezTerm':
+        return version.major >= 20200620
+      case 'vscode':
+        return version.major > 1 || (version.major === 1 && version.minor >= 72)
+    }
+  }
+
+  if (VTE_VERSION) {
+    // 0.50.0 was supposed to support hyperlinks, but throws a segfault
+    if (VTE_VERSION === '0.50.0') return false
+    const version = parseVersion(VTE_VERSION)
+    return version.major > 0 || version.minor >= 50
+  }
+
+  return false
+}
+
+export const cliHyperlink = (text: string, uri: string) =>
+  supportsHyperlink() ? hyperlinker(text, uri) : text

package/measurePerformanceLink.ts

@@ -1,34 +1,26 @@
 /* eslint-disable no-console */
 import { ApolloLink } from '@apollo/client'
+import type { MeshFetchHTTPInformation } from '@graphql-mesh/plugin-http-details-extensions'
+import { print } from 'graphql'
+import { cliHyperlink } from './lib/hyperlinker'
 
 const running = new Map<
   string,
-  { start: Date; end?: Date; internalStart?: Date; operationName: string }
->()
-
-interface TracingFormat {
-  version: 1
-  startTime: string
-  endTime: string
-  duration: number
-  execution: {
-    resolvers: {
-      path: (string | number)[]
-      parentType: string
-      fieldName: string
-      returnType: string
-      startOffset: number
-      duration: number
-    }[]
+  {
+    start: Date
+    end?: Date
+    internalStart?: Date
+    operationName: [string, string]
+    additional?: [string, string]
   }
-}
+>()
 
 const renderLine = (line: {
   serverStart: number
   requestStart: number
   requestEnd: number
   colDivider: number
-  additional: string[]
+  additional: (string | [string, string])[]
 }) => {
   const duration = line.requestEnd - line.requestStart
   const serverDuration = duration - line.serverStart
@@ -88,19 +80,20 @@ export const flushMeasurePerf = () => {
         value.operationName,
         // `${duration - (duration - serverStart)}ms`,
         `${duration - serverStart}ms`,
+        value.additional ?? '',
       ],
       colDivider,
     })
   })
 
   const items = [
-    ['Operation', 'Mesh', 'Timeline'],
+    ['Operation', 'Mesh', ' Source', 'Timeline'],
     ...lines,
     renderLine({
       serverStart: 0,
       requestStart: 0,
       requestEnd: end,
-      additional: [`Total time`, `${end}ms`],
+      additional: [`Total time`, `${end}ms`, ''],
       colDivider,
     }),
   ]
@@ -109,16 +102,22 @@ export const flushMeasurePerf = () => {
   const colWidths: number[] = Array(items[0].length).fill(0)
   items.forEach((item) => {
     item.forEach((t, index) => {
-      colWidths[index] = Math.max(colWidths[index], t.length)
+      colWidths[index] = Math.max(colWidths[index], Array.isArray(t) ? t[0].length : t.length)
     })
   })
 
   // padd the items to the max length
   items.forEach((item) => {
     item.forEach((_, index) => {
-      item[index] = `${item[index].padEnd(colWidths[index], ' ')}${
-        index !== item.length - 1 ? `` : ''
-      }`
+      const [str, link] = (
+        Array.isArray(item[index]) ? item[index] : [item[index], item[index]]
+      ) as [string, string]
+
+      const val = (Array.isArray(item[index]) ? item[index][1] : item[index]) as string
+
+      const padLength = colWidths[index] + (val.length - str.length)
+
+      item[index] = `${val.padEnd(padLength, ' ')}${index !== item.length - 1 ? `` : ''}`
     })
   })
 
@@ -147,19 +146,51 @@ export const measurePerformanceLink = new ApolloLink((operation, forward) => {
       Object.keys(operation.variables).length > 0 ? `(${JSON.stringify(operation.variables)})` : ''
     const operationString = `${operation.operationName}${vars}`
 
-    running.set(operationString, { start: new Date(), operationName: operation.operationName })
+    running.set(operationString, {
+      start: new Date(),
+      operationName: [operation.operationName, operation.operationName],
+    })
     markTimeout()
 
-    // console.info(`GraphQL start ${operationString}`)
     return forward(operation).map((data) => {
-      const tracing = data.extensions?.tracing as TracingFormat | undefined
+      const httpDetails: MeshFetchHTTPInformation[] | undefined = data.extensions?.httpDetails
+
+      let additional = [``, ``] as [string, string]
+      if (httpDetails) {
+        httpDetails.forEach((d) => {
+          const requestUrl = new URL(d.request.url)
+          requestUrl.searchParams.delete('extensions')
+          const title = `${d.sourceName} ${d.responseTime}ms`
+          additional = [
+            `${additional[0]} ${title}`,
+            `${additional[1]} ${cliHyperlink(title, requestUrl.toString().replace(/\+/g, '%20'))}`,
+          ]
+        })
+      }
 
       // Called after server responds
+      const query = [
+        `# Variables: ${JSON.stringify(operation.variables)}`,
+        `# Headers: ${JSON.stringify(operation.getContext().headers)}`,
+        print(operation.query),
+      ].join('\n')
+
+      const meshUrl = new URL(`${import.meta.graphCommerce.canonicalBaseUrl}/api/graphql`)
+      meshUrl.searchParams.set('query', query)
+
       running.set(operationString, {
-        internalStart: tracing ? new Date(tracing.startTime) : undefined,
         start: operation.getContext().measurePerformanceLinkStart as Date,
         end: new Date(),
-        operationName: operation.operationName,
+        operationName: [operation.operationName, operation.operationName],
+        additional,
+        // [
+        //   operation.operationName,
+        //   cliHyperlink(operation.operationName, meshUrl.toString()),
+        // ],
+        // additional: [
+        //   `🔗 ${additional[0]}`,
+        //   `${cliHyperlink('🔗', meshUrl.toString())} ${additional[1]}`,
+        // ],
       })
 
       markTimeout()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.2-canary.8",
+  "version": "6.1.0",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.10",
-    "@graphcommerce/graphql-codegen-near-operation-file": "6.0.2-canary.8",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "6.0.2-canary.8",
+    "@graphcommerce/graphql-codegen-near-operation-file": "6.1.0",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "6.1.0",
     "@graphql-codegen/add": "4.0.1",
     "@graphql-codegen/fragment-matcher": "4.0.1",
     "@graphql-codegen/introspection": "3.0.1",
@@ -29,9 +29,9 @@
     "graphql": "16.6.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.8",
-    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.8",
-    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.8"
+    "@graphcommerce/eslint-config-pwa": "6.1.0",
+    "@graphcommerce/prettier-config-pwa": "6.1.0",
+    "@graphcommerce/typescript-config-pwa": "6.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",