@graphcommerce/graphql 3.4.5 → 3.4.8

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Change Log
 
+## 3.4.8
+
+### Patch Changes
+
+- [#1622](https://github.com/graphcommerce-org/graphcommerce/pull/1622) [`396b5de5d`](https://github.com/graphcommerce-org/graphcommerce/commit/396b5de5d50c7b8f59bf636807e7a4b50f14e0b2) Thanks [@paales](https://github.com/paales)! - Make sure the measurePerformanceLink only gets included on the server and flush the current timings.
+
+## 3.4.7
+
+### Patch Changes
+
+- Updated dependencies [[`860b4afc0`](https://github.com/graphcommerce-org/graphcommerce/commit/860b4afc0a2f79b1e660a5f9ce204532ce4fca47)]:
+  - @graphcommerce/graphql-codegen-near-operation-file@3.0.18
+
+## 3.4.6
+
+### Patch Changes
+
+- [#1598](https://github.com/graphcommerce-org/graphcommerce/pull/1598) [`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+- Updated dependencies [[`707dbc73d`](https://github.com/graphcommerce-org/graphcommerce/commit/707dbc73d181204d88fdbbd2e09340e25b2b5f7b)]:
+  - @graphcommerce/graphql-codegen-near-operation-file@3.0.17
+  - @graphcommerce/graphql-codegen-relay-optimizer-plugin@3.0.10
+
 ## 3.4.5
 
 ### Patch Changes

package/measurePerformanceLink.ts

@@ -1,8 +1,10 @@
 /* eslint-disable no-console */
 import { ApolloLink } from '@apollo/client'
 
-const slowOperationThreshold = 1000
-const slowResolverThreshold = 300
+const running = new Map<
+  string,
+  { start: Date; end?: Date; internalStart?: Date; operationName: string }
+>()
 
 interface TracingFormat {
   version: 1
@@ -21,46 +23,150 @@ interface TracingFormat {
   }
 }
 
+const renderLine = (line: {
+  serverStart: number
+  requestStart: number
+  requestEnd: number
+  colDivider: number
+  additional: string[]
+}) => {
+  const duration = line.requestEnd - line.requestStart
+  const serverDuration = duration - line.serverStart
+  const waitTime = duration - serverDuration
+
+  const reqStart = Math.floor(line.requestStart / line.colDivider)
+  const startSpacing = reqStart >= 1 ? ' '.repeat(reqStart) : ''
+
+  const waitDotsRound = Math.floor(waitTime / line.colDivider - 1)
+  const waitDots = waitDotsRound >= 1 ? `${'╌'.repeat(waitDotsRound)}` : ''
+
+  const dashrepeat = Math.floor(serverDuration / line.colDivider)
+
+  const dashes =
+    dashrepeat >= 1 ? `${waitDotsRound > 1 ? '┼' : ''}${'─'.repeat(dashrepeat - 1)}` : ''
+  const result = `${startSpacing}├${waitDots}${dashes}┤`
+
+  return ['', ...line.additional, result]
+}
+
+export const flushMeasurePerf = () => {
+  const entries = Array.from(running.entries())
+  if (entries.length === 0 || !entries.every(([k, v]) => v.end)) return
+
+  /**
+   * Print to the console a timeline that gives a visual reprentation of the starting time and
+   * duration of each operation like so;
+   *
+   * ╞═════════ QueryOne (250ms) ═════════╡ ╞══════════════════ Query Two (450ms)
+   * ══════════════════╡ ╞═════════ QueryThree ═════════╡
+   */
+
+  let start = Number.MAX_VALUE
+  let end = 0
+  entries.forEach(([_, value]) => {
+    if (value.start.getTime() < start) start = value.start.getTime()
+    if (value.end && value.end.getTime() > end) end = value.end.getTime()
+  })
+  end -= start
+
+  const colDivider = Math.max(Math.floor(end / 150), 20)
+
+  const lines = entries.map(([_, value]) => {
+    const requestStart = value.start.getTime() - start
+    const requestEnd = value.end ? value.end.getTime() - start : 0
+    const duration = requestEnd - requestStart
+
+    const serverStart = value.internalStart
+      ? value.internalStart.getTime() - value.start.getTime()
+      : 0
+
+    return renderLine({
+      serverStart,
+      requestStart,
+      requestEnd,
+      additional: [
+        value.operationName,
+        `${duration - (duration - serverStart)}ms`,
+        `${duration - serverStart}ms`,
+      ],
+      colDivider,
+    })
+  })
+
+  const items = [
+    ['', 'GraphQL requests', 'Bootup', 'Mesh', 'Waterfall'],
+    ['', '', '', '', ''],
+    ...lines,
+    renderLine({
+      serverStart: 0,
+      requestStart: 0,
+      requestEnd: end,
+      additional: [`Total time`, '', `${end}ms`],
+      colDivider,
+    }),
+  ]
+
+  // Rewrite the above so it can handle abritraty columns
+  const colWidths: number[] = Array(items[0].length).fill(0)
+  items.forEach((item) => {
+    item.forEach((t, index) => {
+      colWidths[index] = Math.max(colWidths[index], 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 ? ` │ ` : ''
+      }`
+    })
+  })
+
+  // render the items to a string
+  const output = [[''], ...items].map((item) => item.join(' ')).join('\n')
+  console.log(output)
+
+  running.clear()
+}
+
+let timeout: NodeJS.Timeout | undefined
+const markTimeout = () => {
+  if (timeout) clearTimeout(timeout)
+  timeout = setTimeout(flushMeasurePerf, 1000)
+}
+
 /**
  * This doesn't work with the current implementation of the Apollo client. We're using SchemaLink
  * which doesn't support additional links.
  */
 export const measurePerformanceLink = new ApolloLink((operation, forward) => {
-  if (typeof global.window !== 'undefined') {
-    return forward(operation)
-  }
-  // Called before operation is sent to server
-  operation.setContext({ measurePerformanceLinkStart: new Date().valueOf() })
-  return forward(operation).map((data) => {
-    // Called after server responds
-    const time: number =
-      new Date().valueOf() - (operation.getContext().measurePerformanceLinkStart as number)
-    let vars =
+  if (typeof window === 'undefined') {
+    // Called before operation is sent to server
+    operation.setContext({ measurePerformanceLinkStart: new Date() })
+    const vars =
       Object.keys(operation.variables).length > 0 ? `(${JSON.stringify(operation.variables)})` : ''
-    if (vars.length > 100) {
-      vars = `${vars.substring(0, 100)}…`
-    }
-
-    if (data.extensions?.tracing && time > slowOperationThreshold) {
-      const tracing = data.extensions?.tracing as TracingFormat
-
-      const duration = Math.round(tracing.duration / (1000 * 1000))
-
-      console.group(`GraphQL slow query/mutation '${operation.operationName}'${vars}`)
-      console.info(`operations ${duration}ms, mesh: ${time - duration}ms`)
-
-      tracing.execution.resolvers
-        .filter((resolver) => resolver.duration > slowResolverThreshold * 1000 * 1000)
-        .forEach((resolver) =>
-          console.info(
-            `${operation.operationName}.${resolver.path.join('.')}[${Math.round(
-              resolver.duration / (1000 * 1000),
-            )}ms]`,
-          ),
-        )
-      console.groupEnd()
-    }
-
-    return data
-  })
+    const operationString = `${operation.operationName}${vars}`
+
+    running.set(operationString, { start: new Date(), operationName: operation.operationName })
+    markTimeout()
+
+    // console.info(`GraphQL start ${operationString}`)
+    return forward(operation).map((data) => {
+      const tracing = data.extensions?.tracing as TracingFormat | undefined
+
+      // Called after server responds
+      running.set(operationString, {
+        internalStart: tracing ? new Date(tracing.startTime) : undefined,
+        start: operation.getContext().measurePerformanceLinkStart as Date,
+        end: new Date(),
+        operationName: operation.operationName,
+      })
+
+      markTimeout()
+
+      return data
+    })
+  }
+  return forward(operation)
 })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.4.5",
+  "version": "3.4.8",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,24 +13,24 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.9",
+    "@graphcommerce/eslint-config-pwa": "^4.1.10",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.4",
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
     "@apollo/client": "^3.6.9",
-    "@graphcommerce/graphql-codegen-near-operation-file": "3.0.16",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "3.0.9",
-    "@graphql-codegen/add": "3.2.0",
-    "@graphql-codegen/fragment-matcher": "3.3.0",
-    "@graphql-codegen/introspection": "2.2.0",
-    "@graphql-codegen/schema-ast": "2.5.0",
-    "@graphql-codegen/typed-document-node": "2.3.1",
-    "@graphql-codegen/typescript": "2.7.1",
-    "@graphql-codegen/typescript-apollo-client-helpers": "2.2.1",
-    "@graphql-codegen/typescript-document-nodes": "2.3.1",
-    "@graphql-codegen/typescript-operations": "2.5.1",
+    "@graphcommerce/graphql-codegen-near-operation-file": "3.0.18",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "3.0.10",
+    "@graphql-codegen/add": "3.2.1",
+    "@graphql-codegen/fragment-matcher": "3.3.1",
+    "@graphql-codegen/introspection": "2.2.1",
+    "@graphql-codegen/schema-ast": "2.5.1",
+    "@graphql-codegen/typed-document-node": "2.3.3",
+    "@graphql-codegen/typescript": "2.7.3",
+    "@graphql-codegen/typescript-apollo-client-helpers": "2.2.3",
+    "@graphql-codegen/typescript-document-nodes": "2.3.3",
+    "@graphql-codegen/typescript-operations": "2.5.3",
     "apollo3-cache-persist": "^0.14.1",
     "graphql": "16.5.0"
   },