@graphcommerce/graphcms-ui 3.1.9 → 3.2.0-canary.4

package/CHANGELOG.md

@@ -1,8 +1,20 @@
 # Change Log
 
-## 3.1.9
+## 3.2.0-canary.4
 
-## 3.1.8
+## 3.2.0-canary.3
+
+### Minor Changes
+
+- [#1733](https://github.com/graphcommerce-org/graphcommerce/pull/1733) [`761bd2832`](https://github.com/graphcommerce-org/graphcommerce/commit/761bd2832f115afc8b95bedbf479266309dd5acc) - ApolloLinks, typePolicies and migration scripts are now handled with plugins on the new library component `<GraphQLProvider/>`. Hygraph's, Magento Cart, Customer, Store, Wishlist and Magento GraphQL are all migrated to be using plugins.
+
+  If you are using custom `links` / `policies` / `migrations` you can pass them as props to the `<GraphQLProvider/>` or create your own local plugin. ([@paales](https://github.com/paales))
+
+## 3.1.8-canary.2
+
+## 3.1.8-canary.1
+
+## 3.1.8-canary.0
 
 ## 3.1.7
 

package/index.ts

@@ -1,2 +1,3 @@
 export * from './components/RichText'
 export * from './components/Asset/Asset'
+export * from './links/createHygraphLink'

package/links/createHygraphLink.ts

@@ -0,0 +1,22 @@
+import { ClientContext, setContext } from '@graphcommerce/graphql'
+import { defaultLocale } from '@graphcommerce/magento-store'
+
+/**
+ * Add a gcms-locales header to make sure queries return in a certain language with a fallback to
+ * defaultLocale().
+ *
+ * This will create a fallback list like: `nl_nl,nl,en_us,en`
+ */
+export const createHygraphLink = (locale?: string) =>
+  setContext((_, context: ClientContext) => {
+    if (!context.headers) context.headers = {}
+
+    const gcmsLocales = [
+      locale?.replace('-', '_'),
+      locale?.split('-')[0],
+      defaultLocale().replace('-', '_'),
+      defaultLocale().split('-')[0],
+    ]
+    context.headers['gcms-locales'] = gcmsLocales.filter(Boolean).join(',')
+    return context
+  })

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphcms-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.9",
+  "version": "3.2.0-canary.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,9 +19,9 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "4.30.2",
-    "@graphcommerce/image": "4.30.2",
-    "@graphcommerce/next-ui": "4.30.2"
+    "@graphcommerce/graphql": "4.31.0-canary.4",
+    "@graphcommerce/image": "4.31.0-canary.4",
+    "@graphcommerce/next-ui": "4.31.0-canary.4"
   },
   "peerDependencies": {
     "@mui/material": "5.5.3",

package/plugins/HygraphGraphqlProvider.tsx

@@ -0,0 +1,13 @@
+import { GraphQLProviderProps } from '@graphcommerce/graphql'
+import type { PluginProps } from '@graphcommerce/next-config'
+import { createHygraphLink } from '../links/createHygraphLink'
+
+export const component = 'GraphQLProvider'
+export const exported = '@graphcommerce/graphql'
+
+function HygraphGraphqlProvider(props: PluginProps<GraphQLProviderProps>) {
+  const { Prev, links = [], ...prev } = props
+  return <Prev {...prev} links={[...links, createHygraphLink(prev.router.locale)]} />
+}
+
+export const Plugin = HygraphGraphqlProvider