@graphcommerce/graphql 10.1.0-canary.32 → 10.1.0-canary.34

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 10.1.0-canary.34
+
+### Minor Changes
+
+- [#2646](https://github.com/graphcommerce-org/graphcommerce/pull/2646) [`35707a1`](https://github.com/graphcommerce-org/graphcommerce/commit/35707a1f68a6b8c97de5d22221a7c9229961cd7a) - Add a `terminatingLink` prop to `GraphQLProvider` to override the terminating link at the tail of the Apollo link chain (by default the `HttpLink` to the Mesh backend).
+
+  Because the terminating link runs after every context-setting link (customer auth token, store, cache-id, header links), this lets you route specific operations to a different transport while still inheriting all request headers. The motivating case is file uploads: `File`/`Blob` variables must be sent as a `multipart/form-data` request (e.g. via `apollo-upload-client`'s `UploadHttpLink`), which the default `HttpLink` cannot serialize. Previously such an upload link had to be prepended via `links`, where it terminated _before_ the auth/header links could run — dropping the customer token from multipart requests, so a logged-in customer's cart mutations were rejected. Supplying the upload-aware split as `terminatingLink` keeps it at the tail, so uploads inherit the token like any other operation. ([@paales](https://github.com/paales))
+
+## 10.1.0-canary.33
+
 ## 10.1.0-canary.32
 
 ## 10.1.0-canary.31

package/components/GraphQLProvider/GraphQLProvider.tsx

@@ -20,7 +20,27 @@ export const globalApolloClient: { current: ApolloClient | null } = {
 }
 
 export type GraphQLProviderProps = AppProps &
-  Omit<ApolloClientConfigInput, 'storefront'> & { children: React.ReactNode }
+  Omit<ApolloClientConfigInput, 'storefront'> & {
+    children: React.ReactNode
+    /**
+     * Overrides the terminating link at the tail of the Apollo link chain (by default the `HttpLink`
+     * connection to the Mesh backend). Because it sits *after* every context-setting link (customer
+     * auth token, store, cache-id, header links), use it to route specific operations to a different
+     * transport while still inheriting all request headers.
+     *
+     * The motivating case is file uploads: `File`/`Blob` variables must be sent as a
+     * `multipart/form-data` request (e.g. via `apollo-upload-client`'s `UploadHttpLink`), which the
+     * default `HttpLink` cannot serialize. Providing the upload-aware split here keeps it at the tail
+     * of the chain, so uploads still pick up the customer token instead of going out unauthenticated.
+     *
+     * @example
+     *   ```tsx
+     *   const terminatingLink = ApolloLink.split(hasUploadFiles, uploadHttpLink, httpLink)
+     *   <GraphQLProvider {...props} terminatingLink={terminatingLink} />
+     *   ```
+     */
+    terminatingLink?: ApolloLink
+  }
 
 /**
  * The GraphQLProvider allows us to configure the ApolloClient and provide it to the rest of the
@@ -29,7 +49,7 @@ 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, router } = props
+  const { children, links, migrations, policies, pageProps, router, terminatingLink } = props
   const state = (pageProps as { apolloState?: unknown }).apolloState
 
   const stateRef = useRef(state)
@@ -58,8 +78,10 @@ export function GraphQLProvider(props: GraphQLProviderProps) {
     const link = ApolloLink.from([
       ...(typeof window === 'undefined' ? [errorLink, measurePerformanceLink] : []),
       ...config.current.links,
-      // The actual Http connection to the Mesh backend.
-      new HttpLink({ uri: '/api/graphql', credentials: 'same-origin' }),
+      // The actual Http connection to the Mesh backend. Overridable via `terminatingLink` so
+      // e.g. multipart file uploads can be routed to a different transport while still inheriting
+      // every header set by the links above.
+      terminatingLink ?? new HttpLink({ uri: '/api/graphql', credentials: 'same-origin' }),
     ])
 
     const cache = createCache()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/graphql",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "10.1.0-canary.32",
+  "version": "10.1.0-canary.34",
   "sideEffects": false,
   "main": "index.ts",
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -28,12 +28,12 @@
     "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.32",
-    "@graphcommerce/graphql-codegen-near-operation-file": "10.1.0-canary.32",
-    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "10.1.0-canary.32",
-    "@graphcommerce/next-config": "^10.1.0-canary.32",
-    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.32",
-    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.32",
+    "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.34",
+    "@graphcommerce/graphql-codegen-near-operation-file": "10.1.0-canary.34",
+    "@graphcommerce/graphql-codegen-relay-optimizer-plugin": "10.1.0-canary.34",
+    "@graphcommerce/next-config": "^10.1.0-canary.34",
+    "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.34",
+    "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.34",
     "@graphql-mesh/plugin-http-details-extensions": "*",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"