@graphcommerce/magento-customer 6.0.2-canary.12 → 6.0.2-canary.13

package/CHANGELOG.md

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

package/hooks/useCustomerQuery.ts

@@ -10,16 +10,8 @@ import { useCustomerSession } from './useCustomerSession'
 /** Will only execute when the customer is signed in. */
 export function useCustomerQuery<Q, V extends OperationVariables>(
   document: TypedDocumentNode<Q, V>,
-  options: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
+  options: QueryHookOptions<Q, V> = {},
 ): QueryResult<Q, V> {
-  const { hydration, ...queryOptions } = options
-  const { loggedIn } = useCustomerSession({ hydration })
-
-  const result = useQuery(document, {
-    ...queryOptions,
-    ssr: false,
-    skip: !loggedIn,
-  })
-
-  return result
+  const { loggedIn } = useCustomerSession()
+  return useQuery(document, { ...options, ssr: false, skip: !loggedIn })
 }

package/hooks/useCustomerSession.ts

@@ -1,13 +1,11 @@
-import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryResult, useQuery } from '@graphcommerce/graphql'
-import { startTransition, useState } from 'react'
 import {
   CustomerTokenDocument,
   CustomerTokenQuery,
   CustomerTokenQueryVariables,
 } from './CustomerToken.gql'
 
-export type UseCustomerSessionOptions = { hydration?: boolean }
+export type UseCustomerSessionOptions = Record<string, unknown>
 
 export type UseCustomerSessionReturn =
   | {
@@ -16,33 +14,9 @@ export type UseCustomerSessionReturn =
       query: QueryResult<CustomerTokenQuery, CustomerTokenQueryVariables>
     } & Partial<Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>>
 
-export function useCustomerSession(options: UseCustomerSessionOptions = {}) {
-  /**
-   * We current always assume the initial render is during hydration.
-   *
-   * How can we determine we're not actually hydrating? Classically you could just use some global
-   * state to track this because when the initial render is done, we're not hydrating anymore.
-   *
-   * However, <Suspense/> can be used to defer the rendering to a later moment. This means that the
-   * useCustomerSession hook is called later and we're still in the hydration phase for this
-   * component while other components are rendering for the second time.
-   */
-  const { hydration = false } = options
-  const [hydrating, setHydrating] = useState(!hydration)
-
-  /**
-   * After the initital render we are definitely sure we're not hydrating anymore so we can flip the
-   * switch and rerender.
-   */
-  useIsomorphicLayoutEffect(() => {
-    if (!hydrating) return
-    startTransition(() => setHydrating(false))
-  }, [hydrating])
-
-  const skip = hydrating
-
-  const query = useQuery(CustomerTokenDocument, { skip })
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useCustomerSession(_: UseCustomerSessionOptions = {}) {
+  const query = useQuery(CustomerTokenDocument)
   const token = query.data?.customerToken
 
   return {

package/hooks/useGuestQuery.ts

@@ -9,8 +9,8 @@ import { useCustomerSession } from './useCustomerSession'
 /** Will only execute when the customer is not signed in. */
 export function useGuestQuery<Q, V extends OperationVariables>(
   document: TypedDocumentNode<Q, V>,
-  queryOptions: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
+  queryOptions: QueryHookOptions<Q, V> = {},
 ) {
-  const { token } = useCustomerSession({ hydration: queryOptions.hydration })
+  const { token } = useCustomerSession()
   return useQuery(document, { ...queryOptions, ssr: false, skip: !!token })
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.2-canary.12",
+  "version": "6.0.2-canary.13",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.12",
-    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.12",
-    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.12"
+    "@graphcommerce/eslint-config-pwa": "6.0.2-canary.13",
+    "@graphcommerce/prettier-config-pwa": "6.0.2-canary.13",
+    "@graphcommerce/typescript-config-pwa": "6.0.2-canary.13"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.0.2-canary.12",
-    "@graphcommerce/framer-utils": "6.0.2-canary.12",
-    "@graphcommerce/graphql": "6.0.2-canary.12",
-    "@graphcommerce/graphql-mesh": "6.0.2-canary.12",
-    "@graphcommerce/image": "6.0.2-canary.12",
-    "@graphcommerce/magento-graphql": "6.0.2-canary.12",
-    "@graphcommerce/magento-store": "6.0.2-canary.12",
-    "@graphcommerce/next-ui": "6.0.2-canary.12",
-    "@graphcommerce/react-hook-form": "6.0.2-canary.12"
+    "@graphcommerce/ecommerce-ui": "6.0.2-canary.13",
+    "@graphcommerce/framer-utils": "6.0.2-canary.13",
+    "@graphcommerce/graphql": "6.0.2-canary.13",
+    "@graphcommerce/graphql-mesh": "6.0.2-canary.13",
+    "@graphcommerce/image": "6.0.2-canary.13",
+    "@graphcommerce/magento-graphql": "6.0.2-canary.13",
+    "@graphcommerce/magento-store": "6.0.2-canary.13",
+    "@graphcommerce/next-ui": "6.0.2-canary.13",
+    "@graphcommerce/react-hook-form": "6.0.2-canary.13"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",