@graphcommerce/ecommerce-ui 8.0.0-canary.40 → 8.0.0-canary.69

package/CHANGELOG.md

@@ -1,8 +1,58 @@
 # @graphcommerce/ecommerce-ui
 
-## 8.0.0-canary.40
+## 8.0.0-canary.69
 
-## 7.1.0-canary.39
+## 7.1.0-canary.68
+
+## 7.1.0-canary.67
+
+## 7.1.0-canary.66
+
+## 7.1.0-canary.65
+
+## 7.1.0-canary.64
+
+## 7.1.0-canary.63
+
+## 7.1.0-canary.62
+
+## 7.1.0-canary.61
+
+## 7.1.0-canary.60
+
+## 7.1.0-canary.59
+
+## 7.1.0-canary.58
+
+## 7.1.0-canary.57
+
+## 7.1.0-canary.56
+
+## 7.1.0-canary.55
+
+## 7.1.0-canary.54
+
+## 7.1.0-canary.53
+
+## 7.1.0-canary.52
+
+## 7.1.0-canary.51
+
+## 7.1.0-canary.50
+
+## 7.1.0-canary.49
+
+## 7.1.0-canary.48
+
+## 7.1.0-canary.47
+
+### Minor Changes
+
+- [#2111](https://github.com/graphcommerce-org/graphcommerce/pull/2111) [`35f3d3eaf`](https://github.com/graphcommerce-org/graphcommerce/commit/35f3d3eaf46f4b782bb1149e0efb0ec3819442d6) - Only show network errors in development mode. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 7.1.0-canary.46
+
+## 7.1.0-canary.45
 
 ## 7.1.0-canary.38
 
@@ -1026,31 +1076,31 @@
   All occurences of `<Trans>` and `t` need to be replaced:
 
   ```tsx
-  import { Trans, t } from '@lingui/macro'
+  import { Trans, t } from "@lingui/macro";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={t`Account ${foo}`}>
         <Trans>My Translation {foo}</Trans>
       </div>
-    )
+    );
   }
   ```
 
   Needs to be replaced with:
 
   ```tsx
-  import { Trans } from '@lingui/react'
-  import { i18n } from '@lingui/core'
+  import { Trans } from "@lingui/react";
+  import { i18n } from "@lingui/core";
 
   function MyComponent() {
-    const foo = 'bar'
+    const foo = "bar";
     return (
       <div aria-label={i18n._(/* i18n */ `Account {foo}`, { foo })}>
-        <Trans key='My Translation {foo}' values={{ foo }}></Trans>
+        <Trans key="My Translation {foo}" values={{ foo }}></Trans>
       </div>
-    )
+    );
   }
   ```
 

package/components/ApolloError/ApolloErrorAlert.tsx

@@ -1,6 +1,8 @@
 import { ApolloError } from '@graphcommerce/graphql'
 import { extendableComponent } from '@graphcommerce/next-ui/Styles/extendableComponent'
+import { Trans } from '@lingui/react'
 import { AlertProps, Alert, Box, SxProps, Theme } from '@mui/material'
+import { maskNetworkError } from './maskNetworkError'
 
 const { classes, selectors } = extendableComponent('ApolloErrorAlert', ['root', 'alert'] as const)
 
@@ -46,7 +48,7 @@ export function ApolloErrorAlert(props: ApolloErrorAlertProps) {
                   key='networkError'
                 >
                   <Alert severity='error' {...networkErrorAlertProps}>
-                    Network Error: {error.networkError.message}
+                    {maskNetworkError(error.networkError)}
                   </Alert>
                 </Box>
               </Box>

package/components/ApolloError/ApolloErrorFullPage.tsx

@@ -3,6 +3,7 @@ import { FullPageMessage, FullPageMessageProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { AlertProps } from '@mui/material'
 import { ApolloErrorAlert } from './ApolloErrorAlert'
+import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorFullPageProps = {
   error: ApolloError
@@ -19,14 +20,14 @@ export function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
     ...fullPageMessageProps
   } = props
 
-  const errorCount = error?.graphQLErrors?.length ?? +(error?.networkError ? 1 : 0)
+  const errorCount = (error?.graphQLErrors?.length ?? 0) + (error?.networkError ? 1 : 0)
 
   if (errorCount === 0) return null
 
   if (errorCount === 1) {
     return (
       <FullPageMessage
-        title={error?.graphQLErrors[0].message ?? error?.networkError?.message}
+        title={error?.graphQLErrors?.[0]?.message ?? maskNetworkError(error.networkError)}
         {...fullPageMessageProps}
       >
         {children}

package/components/ApolloError/ApolloErrorSnackbar.tsx

@@ -1,5 +1,6 @@
 import { ApolloError } from '@graphcommerce/graphql'
 import { ErrorSnackbar, ErrorSnackbarProps } from '@graphcommerce/next-ui'
+import { maskNetworkError } from './maskNetworkError'
 
 export type ApolloErrorSnackbarProps = {
   error?: ApolloError
@@ -14,7 +15,7 @@ export function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
     <ErrorSnackbar variant='pill' severity='error' {...passedProps} open={!!error}>
       <>
         {error.graphQLErrors.map((e) => e.message).join(', ')}
-        {error.networkError && <>Network Error: {error.networkError.message}</>}
+        {maskNetworkError(error.networkError)}
       </>
     </ErrorSnackbar>
   )

package/components/ApolloError/maskNetworkError.tsx

@@ -0,0 +1,26 @@
+import { ServerError, ServerParseError } from '@graphcommerce/graphql'
+import { Trans } from '@lingui/react'
+
+function isServerError(error: Error | ServerParseError | ServerError | null): error is ServerError {
+  return 'name' in (error as ServerError)
+}
+
+function isServerParseError(
+  error: Error | ServerParseError | ServerError | null,
+): error is ServerParseError {
+  return 'bodyText' in (error as ServerParseError)
+}
+
+export function maskNetworkError(networkError: Error | ServerParseError | ServerError | null) {
+  if (!networkError) return null
+
+  if (isServerParseError(networkError) || isServerError(networkError)) {
+    return <Trans id='Something went wrong on the server, please try again later.' />
+  }
+
+  if (globalThis.navigator && !globalThis.navigator?.onLine) {
+    return <Trans id='It appears you are offline, please try again later.' />
+  }
+
+  return <Trans id='Something went wrong' />
+}

package/components/WaitForQueries/WaitForQueries.tsx

@@ -3,18 +3,21 @@ import React, { startTransition, useEffect, useState } from 'react'
 
 export type WaitForQueriesProps = {
   waitFor: QueryResult<any, any> | boolean | (QueryResult<any, any> | boolean)[] | undefined
+  noSsr?: boolean
   children: React.ReactNode
   fallback?: React.ReactNode
 }
 
 /** Shows the fallback during: SSR, Hydration and Query Loading. */
 export const WaitForQueries = (props: WaitForQueriesProps) => {
-  const { waitFor, fallback, children } = props
+  const { waitFor, fallback, children, noSsr = false } = props
 
   // 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)), [])
+  const [mounted, setMounted] = useState(!noSsr)
+  useEffect(() => {
+    if (noSsr) startTransition(() => setMounted(true))
+  }, [noSsr])
 
   // We are done when all queries either have data or an error.
   const isDone = (Array.isArray(waitFor) ? waitFor : [waitFor]).every((res) => {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/ecommerce-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.0-canary.40",
+  "version": "8.0.0-canary.69",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,12 +12,12 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "8.0.0-canary.40",
-    "@graphcommerce/graphql": "8.0.0-canary.40",
-    "@graphcommerce/next-ui": "8.0.0-canary.40",
-    "@graphcommerce/prettier-config-pwa": "8.0.0-canary.40",
-    "@graphcommerce/react-hook-form": "8.0.0-canary.40",
-    "@graphcommerce/typescript-config-pwa": "8.0.0-canary.40",
+    "@graphcommerce/eslint-config-pwa": "^8.0.0-canary.69",
+    "@graphcommerce/graphql": "^8.0.0-canary.69",
+    "@graphcommerce/next-ui": "^8.0.0-canary.69",
+    "@graphcommerce/prettier-config-pwa": "^8.0.0-canary.69",
+    "@graphcommerce/react-hook-form": "^8.0.0-canary.69",
+    "@graphcommerce/typescript-config-pwa": "^8.0.0-canary.69",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",