@graphcommerce/ecommerce-ui 1.1.6 → 1.1.9

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @graphcommerce/ecommerce-ui
 
+## 1.1.9
+
+### Patch Changes
+
+- Updated dependencies [[`6ce2cbaf2`](https://github.com/graphcommerce-org/graphcommerce/commit/6ce2cbaf2cf27e21b753f7cb71e7e74826294de6), [`6ce2cbaf2`](https://github.com/graphcommerce-org/graphcommerce/commit/6ce2cbaf2cf27e21b753f7cb71e7e74826294de6)]:
+  - @graphcommerce/graphql@3.4.5
+  - @graphcommerce/next-ui@4.18.0
+
+## 1.1.8
+
+### Patch Changes
+
+- Updated dependencies [[`49370878a`](https://github.com/graphcommerce-org/graphcommerce/commit/49370878a48b90a4579026a7c56c54f97840cebb), [`b6ce5548c`](https://github.com/graphcommerce-org/graphcommerce/commit/b6ce5548c66a8ca62d3aee29467045f7f07f30c8)]:
+  - @graphcommerce/graphql@3.4.4
+  - @graphcommerce/next-ui@4.17.0
+
+## 1.1.7
+
+### Patch Changes
+
+- [#1575](https://github.com/graphcommerce-org/graphcommerce/pull/1575) [`199dc8599`](https://github.com/graphcommerce-org/graphcommerce/commit/199dc859989c376281243b59a59addc35138f119) Thanks [@paales](https://github.com/paales)! - WaitForQueries should also accept undefined when there is nothing to actually wait for
+
+- Updated dependencies [[`02023d8d8`](https://github.com/graphcommerce-org/graphcommerce/commit/02023d8d89c8138144243edce67290bd79ff49a7), [`87a188d6f`](https://github.com/graphcommerce-org/graphcommerce/commit/87a188d6f216b7f7b9ec95afbe74f1146cb07ce4), [`1eb131766`](https://github.com/graphcommerce-org/graphcommerce/commit/1eb131766c32db6fcb0a8e83dba2c3d241658595)]:
+  - @graphcommerce/react-hook-form@3.3.2
+  - @graphcommerce/next-ui@4.16.0
+
 ## 1.1.6
 
 ### Patch Changes

package/components/WaitForQueries/WaitForQueries.tsx

@@ -1,29 +1,25 @@
-import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { QueryResult } from '@graphcommerce/graphql'
-import React, { startTransition, useState } from 'react'
+import React, { startTransition, useEffect, useState } from 'react'
 
 export type WaitForQueriesProps = {
-  waitFor: QueryResult<any, any> | QueryResult<any, any>[]
+  waitFor: QueryResult<any, any> | QueryResult<any, any>[] | undefined
   children: React.ReactNode
   fallback?: React.ReactNode
 }
 
-/**
- * Shows the fallback during: SSR, Hydration and Query Loading.
- *
- * Why not use suspense? Not support with Apollo Client yet!
- */
+/** Shows the fallback during: SSR, Hydration and Query Loading. */
 export const WaitForQueries = (props: WaitForQueriesProps) => {
   const { waitFor, fallback, children } = props
 
-  // We are done when all queries either have data or an error
+  // Make sure the first render is always the same as the server.
+  // Make sure we we use startTransition to make sure we don't get into trouble with Suspense.
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => startTransition(() => setMounted(true)), [])
+
+  // We are done when all queries either have data or an error.
   const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every(
-    ({ data, error }) => data || error,
+    (res) => typeof res === 'undefined' || res.data || res.error,
   )
 
-  // Wait for the queries to finish
-  const [mountedState, setMountedState] = useState(false)
-  useIsomorphicLayoutEffect(() => startTransition(() => setMountedState(true)), [])
-
-  return <>{isDone && mountedState ? children : fallback}</>
+  return <>{isDone && mounted ? children : fallback}</>
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@graphcommerce/framer-utils": "3.1.4",
-    "@graphcommerce/next-ui": "4.15.1",
-    "@graphcommerce/react-hook-form": "3.3.1",
-    "@graphcommerce/graphql": "3.4.3"
+    "@graphcommerce/next-ui": "4.18.0",
+    "@graphcommerce/react-hook-form": "3.3.2",
+    "@graphcommerce/graphql": "3.4.5"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.9",