@graphcommerce/graphql 9.0.0-canary.100 → 9.0.0-canary.101

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 9.0.0-canary.101
+
+### Patch Changes
+
+- [#2380](https://github.com/graphcommerce-org/graphcommerce/pull/2380) [`2457ca2`](https://github.com/graphcommerce-org/graphcommerce/commit/2457ca25a737a1fdc8b1d0e1b4b6ddb69c5f420e) - measurePerformanceLink now reports queries made in the subgraph and is only included during development and not in production. ([@paales](https://github.com/paales))
+
 ## 9.0.0-canary.100
 
 ## 9.0.0-canary.99

package/apollo.ts

@@ -4,5 +4,6 @@ export * from '@apollo/client'
 export * from '@apollo/client/link/schema'
 export * from '@apollo/client/link/context'
 export * from '@apollo/client/link/error'
+export * from '@apollo/client/utilities'
 
 export { getOperationName } from '@apollo/client/utilities'

package/components/GraphQLProvider/measurePerformanceLink.ts

@@ -1,7 +1,8 @@
 /* eslint-disable no-console */
 import { ApolloLink } from '@apollo/client'
-import type { MeshFetchHTTPInformation } from '@graphql-mesh/plugin-http-details-extensions'
 import { print } from '@apollo/client/utilities'
+import type { MeshFetchHTTPInformation } from '@graphql-mesh/plugin-http-details-extensions'
+import { responsePathAsArray, stripIgnoredCharacters } from 'graphql'
 import { cliHyperlink } from '../../lib/hyperlinker'
 
 const running = new Map<
@@ -12,6 +13,7 @@ const running = new Map<
     internalStart?: Date
     operationName: [string, string]
     additional?: [string, string]
+    idx?: number
   }
 >()
 
@@ -87,7 +89,7 @@ export const flushMeasurePerf = () => {
   })
 
   const items = [
-    ['Operation', 'Mesh', ' Source', 'Timeline'],
+    ['Operation', 'Mesh', '', 'Timeline'],
     ...lines,
     renderLine({
       serverStart: 0,
@@ -109,22 +111,20 @@ export const flushMeasurePerf = () => {
   // padd the items to the max length
   items.forEach((item) => {
     item.forEach((_, index) => {
-      const [str] = (Array.isArray(item[index]) ? item[index] : [item[index], item[index]]) as [
-        string,
-        string,
-      ]
+      const [str] = Array.isArray(item[index]) ? item[index] : [item[index], item[index]]
 
-      const val = (Array.isArray(item[index]) ? item[index][1] : item[index]) as 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 ? `` : ''}`
     })
   })
-
-  // render the items to a string
-  const output = [[''], ...items].map((item) => item.join(' ')).join('\n')
-  console.log(output)
+  ;[[''], ...items]
+    .map((item) => item.join(' '))
+    .forEach((item) => {
+      console.log(item)
+    })
 
   running.clear()
 }
@@ -157,43 +157,72 @@ export const measurePerformanceLink = new ApolloLink((operation, forward) => {
       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),
+        stripIgnoredCharacters(print(operation.query)),
       ].join('\n')
 
-      const meshUrl = new URL(`${import.meta.graphCommerce.canonicalBaseUrl}/api/graphql`)
+      const meshUrl = new URL(
+        process.env.NODE_ENV === 'production'
+          ? `${import.meta.graphCommerce.canonicalBaseUrl}/api/graphql`
+          : 'http://localhost:3000/api/graphql',
+      )
+
       meshUrl.searchParams.set('query', query)
 
+      running.delete(operationString)
       running.set(operationString, {
         start: operation.getContext().measurePerformanceLinkStart as Date,
         end: new Date(),
-        operationName: [operation.operationName, operation.operationName],
+        operationName: [
+          operation.operationName,
+          operation.operationName,
+          // cliHyperlink(operation.operationName, meshUrl.toString()),
+        ],
         additional,
-        // [
-        //   operation.operationName,
-        //   cliHyperlink(operation.operationName, meshUrl.toString()),
-        // ],
-        // additional: [
-        //   `🔗 ${additional[0]}`,
-        //   `${cliHyperlink('🔗', meshUrl.toString())} ${additional[1]}`,
-        // ],
+        idx: 0,
       })
 
+      if (httpDetails) {
+        running.forEach((_, key) => {
+          if (key.startsWith(operationString)) running.delete(key)
+        })
+
+        httpDetails.forEach((d) => {
+          const requestUrl = new URL(d.request.url)
+          requestUrl.searchParams.delete('extensions')
+
+          const sourceName =
+            !d.sourceName && URL.canParse(d.request.url)
+              ? new URL(d.request.url).hostname
+              : d.sourceName
+
+          const key = `${operationString}.${responsePathAsArray(d.path).join('.')}`
+          const name = `${operation.operationName}.${responsePathAsArray(d.path).join('.')} (${sourceName})`
+
+          let start = new Date(d.request.timestamp)
+          let end = new Date(d.response.timestamp)
+          let operationName: [string, string] = [name, name]
+          let idx = 0
+
+          if (running.has(key)) {
+            // Get the earliest start time and latest end time.
+            const existing = running.get(key)
+            if (existing) {
+              idx = (existing.idx ?? 0) + 1
+              start = existing.start < start ? existing.start : start
+              end = existing?.end ? (existing.end > end ? existing.end : end) : end
+              operationName = [`${name} ⨉ ${idx}`, `${name} ⨉ ${idx}`]
+            }
+          }
+
+          running.set(key, { start, end, operationName, idx })
+        })
+      }
+
       markTimeout()
 
       return data

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.100",
+  "version": "9.0.0-canary.101",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,8 +13,8 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.0-canary.100",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.0-canary.100",
+    "@graphcommerce/graphql-codegen-near-operation-file": "9.0.0-canary.101",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "9.0.0-canary.101",
     "@graphql-codegen/add": "5.0.3",
     "@graphql-codegen/fragment-matcher": "5.0.2",
     "@graphql-codegen/introspection": "4.0.3",
@@ -28,9 +28,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.100",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.100",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.100",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.101",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.101",
     "graphql": "^16.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"