@graphcommerce/graphql 3.4.7 → 3.4.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/measurePerformanceLink.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-import { text } from 'stream/consumers'
 import { ApolloLink } from '@apollo/client'
 
 const running = new Map<
@@ -50,91 +49,91 @@ const renderLine = (line: {
   return ['', ...line.additional, result]
 }
 
-let timeout: NodeJS.Timeout | undefined
-const markTimeout = () => {
-  if (timeout) {
-    clearTimeout(timeout)
-  }
-  timeout = setTimeout(() => {
-    const entries = Array.from(running.entries())
-    if (!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(([key, value]) => {
-      if (value.start.getTime() < start) start = value.start.getTime()
-      if (value.end && value.end.getTime() > end) end = value.end.getTime()
+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,
     })
-    end -= start
-
-    const colDivider = Math.max(Math.floor(end / 150), 20)
-
-    const lines = entries.map(([key, 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)
     })
-
-    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 ? ` │ ` : ''
+      }`
     })
+  })
 
-    // padd the items to the max length
-    items.forEach((item) => {
-      item.forEach((t, 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)
 
-    // render the items to a string
-    const output = [[''], ...items].map((item) => item.join(' ')).join('\n')
-    console.log(output)
+  running.clear()
+}
 
-    running.clear()
-  }, 1000)
+let timeout: NodeJS.Timeout | undefined
+const markTimeout = () => {
+  if (timeout) clearTimeout(timeout)
+  timeout = setTimeout(flushMeasurePerf, 1000)
 }
 
 /**

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.4.7",
+  "version": "3.4.8",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",