@graphcommerce/graphql 8.1.0-canary.40 → 8.1.0-canary.42

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 8.1.0-canary.42
+
+### Patch Changes
+
+- [#2308](https://github.com/graphcommerce-org/graphcommerce/pull/2308) [`8faa5ac`](https://github.com/graphcommerce-org/graphcommerce/commit/8faa5ac618ecfdacd6d5eb751b4110c423aef97f) - Added Draft Mode support. When enabled it will be shown.
+  ([@paales](https://github.com/paales))
+
+## 8.1.0-canary.41
+
 ## 8.1.0-canary.40
 
 ## 8.1.0-canary.39

package/components/GraphQLProvider/GraphQLProvider.tsx

@@ -5,12 +5,18 @@ import {
   InMemoryCache,
   ApolloProvider,
   HttpLink,
+  DefaultOptions,
 } from '@apollo/client'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useStorefrontConfig } from '@graphcommerce/next-ui/hooks/useStorefrontConfig'
 import type { AppProps } from 'next/app'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { ApolloClientConfig, graphqlConfig, ApolloClientConfigInput } from '../../config'
+import {
+  ApolloClientConfig,
+  graphqlConfig,
+  ApolloClientConfigInput,
+  PreviewConfig,
+} from '../../config'
 import fragments from '../../generated/fragments.json'
 import { createCacheReviver } from './createCacheReviver'
 import { errorLink } from './errorLink'
@@ -31,13 +37,19 @@ export type GraphQLProviderProps = AppProps &
  * Take a look at the props to see possible customization options.
  */
 export function GraphQLProvider(props: GraphQLProviderProps) {
-  const { children, links, migrations, policies, pageProps } = props
+  const { children, links, migrations, policies, pageProps, router } = props
   const state = (pageProps as { apolloState?: NormalizedCacheObject }).apolloState
 
   const stateRef = useRef(state)
 
   const storefront = useStorefrontConfig()
-  const conf = graphqlConfig({ links, migrations, policies, storefront })
+  const conf = graphqlConfig({
+    links,
+    migrations,
+    policies,
+    storefront,
+    preview: router.isPreview,
+  })
   const config = useRef<ApolloClientConfig>(conf)
   config.current = conf
 
@@ -62,7 +74,17 @@ export function GraphQLProvider(props: GraphQLProviderProps) {
     if (stateRef.current) cache.restore(stateRef.current)
 
     const ssrMode = typeof window === 'undefined'
-    return new ApolloClient({ link, cache, name: 'web', ssrMode })
+    return new ApolloClient({
+      link,
+      cache,
+      name: 'web',
+      ssrMode,
+      defaultOptions: {
+        preview: {
+          preview: router.isPreview,
+        } as PreviewConfig,
+      } as DefaultOptions,
+    })
   })
 
   useEffect(() => {

package/config.ts

@@ -1,7 +1,15 @@
 import { ApolloLink, TypePolicies } from '@apollo/client'
 import type { GraphCommerceStorefrontConfig } from '@graphcommerce/next-config'
+import type { SetRequired } from 'type-fest'
 import { MigrateCache } from './components/GraphQLProvider/migrateCache'
 
+export interface PreviewData {}
+
+export type PreviewConfig = {
+  preview?: boolean
+  previewData?: PreviewData & Record<string, unknown>
+}
+
 export type ApolloClientConfigInput = {
   storefront: GraphCommerceStorefrontConfig
 
@@ -17,11 +25,14 @@ export type ApolloClientConfigInput = {
    * yet, we run these migrations.
    */
   migrations?: MigrateCache[]
-}
+} & PreviewConfig
 
-export type ApolloClientConfig = Required<ApolloClientConfigInput>
+export type ApolloClientConfig = SetRequired<
+  ApolloClientConfigInput,
+  'links' | 'policies' | 'migrations'
+>
 
 export function graphqlConfig(config: ApolloClientConfigInput): ApolloClientConfig {
-  const { storefront, links = [], policies = [], migrations = [] } = config
-  return { storefront, links, policies, migrations }
+  const { storefront, links = [], policies = [], migrations = [], ...rest } = config
+  return { storefront, links, policies, migrations, ...rest }
 }

package/index.ts

@@ -3,3 +3,5 @@ export * from './components/GraphQLProvider'
 export { default as fragments } from './generated/fragments.json'
 export * from './generated/types'
 export * from './config'
+export * from './utils/getPreviewData'
+export * from './utils/cachePolicy'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.40",
+  "version": "8.1.0-canary.42",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -13,8 +13,8 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/graphql-codegen-near-operation-file": "8.1.0-canary.40",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "8.1.0-canary.40",
+    "@graphcommerce/graphql-codegen-near-operation-file": "8.1.0-canary.42",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "8.1.0-canary.42",
     "@graphql-codegen/add": "5.0.1",
     "@graphql-codegen/fragment-matcher": "5.0.1",
     "@graphql-codegen/introspection": "4.0.1",
@@ -28,9 +28,9 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.40",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.40",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.40",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.42",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.42",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.42",
     "graphql": "^16.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

package/utils/cachePolicy.ts

@@ -0,0 +1,15 @@
+import { ApolloClient, FetchPolicy } from '@apollo/client'
+import { getPreviewData } from './getPreviewData'
+
+export function cachePolicy(
+  client: ApolloClient<object>,
+  requestedCachePolicy: FetchPolicy,
+): FetchPolicy {
+  return process.env.NODE_ENV !== 'development' && !getPreviewData(client)?.preview
+    ? requestedCachePolicy
+    : 'network-only'
+}
+
+export function cacheFirst(client: ApolloClient<object>) {
+  return cachePolicy(client, 'cache-first')
+}

package/utils/getPreviewData.ts

@@ -0,0 +1,7 @@
+import { ApolloClient } from '@apollo/client'
+import { PreviewConfig } from '../config.interceptor'
+
+export function getPreviewData(client: ApolloClient<object>): PreviewConfig | undefined {
+  if ('preview' in client.defaultOptions) return client.defaultOptions.preview as PreviewConfig
+  return undefined
+}