@graphcommerce/graphql 3.4.7 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 3.5.0
+
+### Minor Changes
+
+- [#1670](https://github.com/graphcommerce-org/graphcommerce/pull/1670) [`8a34f8081`](https://github.com/graphcommerce-org/graphcommerce/commit/8a34f808186274a6fe1d4f309472f1a9c6d00efd) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Added cache resetting when token expires and logging in with a different account than cached.
+
+### Patch Changes
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`cf3518499`](https://github.com/graphcommerce-org/graphcommerce/commit/cf351849999ad6fe73ce2bb258098a7dd301d517) Thanks [@paales](https://github.com/paales)! - ApolloClient is not persisted to localStorage before we restore from localStorage. Fixes a race condition where the current cartId wasn't persisted.
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6) Thanks [@paales](https://github.com/paales)! - Added crosssel functionality
+
+## 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/createCacheReviver.ts

@@ -7,8 +7,10 @@ import { getTypePoliciesVersion } from './typePolicies'
 const APOLLO_CACHE_PERSIST = 'apollo-cache-persist'
 const APOLLO_CACHE_VERSION = 'apollo-cache-version'
 
+let persistor: CachePersistor<NormalizedCacheObject> | null = null
+
 /** Revives the cache from the localStorage if it is available. */
-export function createCacheReviver(
+export async function createCacheReviver(
   client: ApolloClient<NormalizedCacheObject>,
   createCache: () => ApolloCache<NormalizedCacheObject>,
   policies: StrictTypedTypePolicies[],
@@ -22,14 +24,25 @@ export function createCacheReviver(
     try {
       const { cache } = client
 
+      if (persistor) await persistor.persist()
       // todo https://github.com/apollographql/apollo-cache-persist/tree/master/examples/react-native/src/utils/persistence
-      const persistor = new CachePersistor({
+      persistor = new CachePersistor({
         cache,
         storage: new LocalStorageWrapper(window.localStorage),
         maxSize: false,
         key: APOLLO_CACHE_PERSIST,
       })
 
+      client.onClearStore(async () => {
+        client.cache.restore(incommingState)
+        await persistor?.persist()
+      })
+
+      client.onResetStore(async () => {
+        client.cache.restore(incommingState)
+        await persistor?.persist()
+      })
+
       const storedState = window.localStorage[APOLLO_CACHE_PERSIST] as string | undefined
       const currentVersion = window.localStorage[APOLLO_CACHE_VERSION] as string | undefined
 

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.5.0",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",