fontdue-js 3.4.1 → 3.5.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 3.5.1
+
+- Fixed `FontdueProvider` turning every Next.js `notFound()`, `redirect()` and thrown render error into a `200`. The provider wrapped the whole app in a Suspense boundary, so React streamed the page shell before Next could set the status – missing pages were indexed as real ones, redirects lost their `Location` header, and `error.tsx` never rendered (the error escalated to `global-error.tsx`). Each Fontdue component now carries its own boundary instead. A route’s own `loading.tsx` still streams a `200` before `notFound()` can act; that is Next.js behaviour ([vercel/next.js#82041](https://github.com/vercel/next.js/issues/82041)).
+- A GraphQL request that fails with a non-2xx status is now an error, retried twice for 5xx and 429 responses, instead of being handed to Relay as data. A transient origin error during a prerender could be serialized into the page and crash every visitor on hydration with `No data returned for operation …` until the page was regenerated; the render now fails instead, so Next keeps serving the last good page. The browser no longer primes its cache from a preload with no data either, so pages already built that way recover by fetching live.
+
+## 3.5.0
+
+- Adding to the cart now sends the buyer's analytics context (cookie consent, anonymous ID, Meta's `_fbp`/`_fbc`) with the request, the same way opening the cart already did. Fontdue records a "Product Added" event for each add and a "Checkout Started" event the first time the buyer submits their contact details in checkout.
+- `createFontdueFetch` from `fontdue-js/server` now sends the `fontdue-client-version` header, so server-rendered requests report the package version to Fontdue the way browser requests already did.
+
 ## 3.4.1
 
 - Fixed the standalone type tester dropping an axis slider when its `variable-settings` starting value is negative. `variable-settings="slnt -11"` was rejected as unparseable, so no slant slider appeared and nothing in the markup explained why. Any axis with a negative range was affected. Extra spaces between an axis and its value are tolerated now too.

package/README.md

@@ -387,7 +387,7 @@ export default withFontdue({
 What it installs:
 
 - **Image settings** — `images.remotePatterns` entries for Fontdue's image hosts (plus `dangerouslyAllowSVG`, since font specimens are often SVGs), merged with your own `images` config.
-- **Correct 404 statuses** — Next's streamed metadata locks in a `200` response before a `notFound()` thrown during `generateMetadata` can take effect ([vercel/next.js#82041](https://github.com/vercel/next.js/issues/82041)). `withFontdue` sets `htmlLimitedBots` to match every user agent so metadata rendering blocks the response and missing pages come out as real 404s.
+- **Blocking metadata** — Next's streamed metadata locks in a `200` response before a `notFound()` thrown during `generateMetadata` can take effect ([vercel/next.js#82041](https://github.com/vercel/next.js/issues/82041)). `withFontdue` sets `htmlLimitedBots` to match every user agent so metadata rendering blocks the response. This only covers `generateMetadata`: a `notFound()`, `redirect()` or error in the page itself gets its status from whether the page shell rendered, so keep the page out of any Suspense boundary you want a real status for — a route's own `loading.tsx` streams the shell as `200` before the page runs, which is the same upstream issue.
 
 The rest of your config — `rewrites` included — passes through unchanged.
 
@@ -454,7 +454,7 @@ For a site built on the [example repo](https://github.com/fontdue/example-next)
 
    v3 is ESM-only and needs `react` 18/19 and `node` >= 18. If TypeScript can't resolve the imports, set `moduleResolution` to `"bundler"` (or `node16`/`nodenext`) in `tsconfig.json` — see [Requirements](#requirements).
 
-2. **Wrap your Next config with `withFontdue`.** It installs the Fontdue image settings (`remotePatterns`, `dangerouslyAllowSVG`) and the `htmlLimitedBots` workaround for correct 404 statuses, so you can delete those from your own config — for many sites the whole file shrinks to:
+2. **Wrap your Next config with `withFontdue`.** It installs the Fontdue image settings (`remotePatterns`, `dangerouslyAllowSVG`) and the `htmlLimitedBots` workaround that lets a `notFound()` in `generateMetadata` return a real 404, so you can delete those from your own config — for many sites the whole file shrinks to:
 
    ```js
    // next.config.mjs (replaces next.config.js — the package is ESM)

package/dist/__generated__/PrecartAddToCartMutation.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fa9a3fe0cf1077d643c7e9bbcf053058>>
+ * @generated SignedSource<<74cae87a2fa5e1e7b1ee3b6482faabae>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@ export type CreateOrderItemsInput = {
     licenseeIsBillingIdentity?: boolean | null;
     orderVariableSelections?: ReadonlyArray<OrderVariableSelectionInput> | null;
     skuIds: ReadonlyArray<string | null>;
+    tracking?: OrderTrackingInput | null;
 };
 export type LicenseSelectionInput = {
     id?: string | null;
@@ -23,6 +24,13 @@ export type OrderVariableSelectionInput = {
     orderVariableId: string;
     orderVariableOptionId?: string | null;
 };
+export type OrderTrackingInput = {
+    analyticsConsent?: boolean | null;
+    anonymousId?: string | null;
+    fbc?: string | null;
+    fbp?: string | null;
+    url?: string | null;
+};
 export type PrecartAddToCartMutation$variables = {
     input: CreateOrderItemsInput;
 };

package/dist/__generated__/PrecartAddToCartMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fa9a3fe0cf1077d643c7e9bbcf053058>>
+ * @generated SignedSource<<74cae87a2fa5e1e7b1ee3b6482faabae>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/StoreModalProductSummaryAddToCartMutation.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<bdbd57be989b0c0a5ac24293c9e1a97b>>
+ * @generated SignedSource<<fef9b63617978230edc13ef9b3412c2e>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@ export type CreateOrderItemsInput = {
     licenseeIsBillingIdentity?: boolean | null;
     orderVariableSelections?: ReadonlyArray<OrderVariableSelectionInput> | null;
     skuIds: ReadonlyArray<string | null>;
+    tracking?: OrderTrackingInput | null;
 };
 export type LicenseSelectionInput = {
     id?: string | null;
@@ -23,6 +24,13 @@ export type OrderVariableSelectionInput = {
     orderVariableId: string;
     orderVariableOptionId?: string | null;
 };
+export type OrderTrackingInput = {
+    analyticsConsent?: boolean | null;
+    anonymousId?: string | null;
+    fbc?: string | null;
+    fbp?: string | null;
+    url?: string | null;
+};
 export type StoreModalProductSummaryAddToCartMutation$variables = {
     input: CreateOrderItemsInput;
 };

package/dist/__generated__/StoreModalProductSummaryAddToCartMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<bdbd57be989b0c0a5ac24293c9e1a97b>>
+ * @generated SignedSource<<fef9b63617978230edc13ef9b3412c2e>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__tests__/createFontdueFetch.test.js

@@ -245,6 +245,22 @@ describe('createFontdueFetch', () => {
       expect(init.next).toBeUndefined();
     });
   });
+  describe('fontdue-client-version header', () => {
+    it('sends the package version, like the Relay layer does', async () => {
+      const fetchMock = mockFetch(() => ({
+        status: 200,
+        json: async () => ({
+          data: {}
+        })
+      }));
+      const fetchGraphql = createFontdueFetch({
+        url: 'https://acme.fontdue.com'
+      });
+      await fetchGraphql('Q', 'query Q { __typename }');
+      const init = fetchMock.mock.calls[0][1];
+      expect(init.headers['fontdue-client-version']).toBe('0.0.0-test');
+    });
+  });
   describe('fontdue-preview header', () => {
     it('sends "false" by default so a public/session-only request never reveals hidden fonts', async () => {
       const fetchMock = mockFetch(() => ({

package/dist/__tests__/loadSerializableQuery.test.js

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+// environment.ts reads env at module load, so stub env and re-import fresh.
+beforeEach(() => {
+  vi.resetModules();
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+});
+const query = {
+  params: {
+    name: 'TestQuery',
+    text: 'query TestQuery { viewer { id } }',
+    operationKind: 'query',
+    metadata: {}
+  }
+};
+function respond(status, body) {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: async () => body
+  };
+}
+
+// The serialized preload is handed to the browser and, on a prerendered page,
+// frozen into the static output. A response with no `data` must never get
+// that far: throwing here fails the render (Next keeps serving the last good
+// page, a build aborts) instead of baking a payload every visitor crashes on.
+describe('loadSerializableQuery', () => {
+  it('returns the response alongside params and variables', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const payload = {
+      data: {
+        viewer: {
+          id: '1'
+        }
+      }
+    };
+    vi.stubGlobal('fetch', vi.fn(async () => respond(200, payload)));
+    const {
+      default: loadSerializableQuery
+    } = await import("../relay/loadSerializableQuery.js");
+    await expect(loadSerializableQuery(query, {})).resolves.toEqual({
+      params: query.params,
+      variables: {},
+      response: payload
+    });
+  });
+  it('refuses to serialize a response with no data, naming the operation and the GraphQL error', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    vi.stubGlobal('fetch', vi.fn(async () => respond(200, {
+      data: null,
+      errors: [{
+        message: 'Not found'
+      }]
+    })));
+    const {
+      default: loadSerializableQuery
+    } = await import("../relay/loadSerializableQuery.js");
+    await expect(loadSerializableQuery(query, {})).rejects.toThrow(/TestQuery.*Not found/);
+  });
+  it('propagates a failed request instead of serializing it', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    vi.stubGlobal('fetch', vi.fn(async () => respond(404, {
+      errors: [{
+        message: 'Site not found'
+      }]
+    })));
+    const {
+      default: loadSerializableQuery
+    } = await import("../relay/loadSerializableQuery.js");
+    await expect(loadSerializableQuery(query, {})).rejects.toThrow(/404/);
+  });
+});

package/dist/__tests__/networkFetch.test.js

@@ -14,6 +14,8 @@ describe('createNetworkFetch (server)', () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
     vi.stubEnv('NODE_ENV', 'production');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -37,6 +39,8 @@ describe('createNetworkFetch (server)', () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
     vi.stubEnv('NODE_ENV', 'development');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -56,6 +60,8 @@ describe('createNetworkFetch (server)', () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
     vi.stubEnv('NODE_ENV', 'production');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -88,6 +94,8 @@ describe('createNetworkFetch (server)', () => {
   it('forwards per-call options.headers (e.g. a preview Bearer token)', async () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -111,10 +119,54 @@ describe('createNetworkFetch (server)', () => {
 function headersOf(fetchMock) {
   return fetchMock.mock.calls[0][1].headers;
 }
+describe('createNetworkFetch (fontdue-client-version header)', () => {
+  // The server records this per tenant (Fontage.ClientVersions) to find sites
+  // that must upgrade before a client-dependent feature works for them.
+  it('sends the package version on every request', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch,
+      version
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(version).toBe('0.0.0-test');
+    expect(headersOf(fetchMock)['fontdue-client-version']).toBe('0.0.0-test');
+  });
+  it('cannot be overridden by per-call headers', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch({
+      headers: {
+        'fontdue-client-version': '9.9.9'
+      }
+    })(request, {});
+    expect(headersOf(fetchMock)['fontdue-client-version']).toBe('0.0.0-test');
+  });
+});
 describe('createNetworkFetch (fontdue-preview header)', () => {
   it('sends fontdue-preview: false on a public server fetch (no token)', async () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -129,6 +181,8 @@ describe('createNetworkFetch (fontdue-preview header)', () => {
   it('sends fontdue-preview: true when a preview Bearer token is forwarded (server)', async () => {
     vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -154,6 +208,8 @@ describe('createNetworkFetch (fontdue-preview header)', () => {
     });
     vi.stubEnv('NEXT_PUBLIC_FONTDUE_URL', 'https://acme.fontdue.com');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })
@@ -174,6 +230,8 @@ describe('createNetworkFetch (fontdue-preview header)', () => {
     });
     vi.stubEnv('NEXT_PUBLIC_FONTDUE_URL', 'https://acme.fontdue.com');
     const fetchMock = vi.fn(async () => ({
+      ok: true,
+      status: 200,
       json: async () => ({
         data: {}
       })

package/dist/__tests__/networkStatus.test.js

@@ -0,0 +1,105 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+// environment.ts reads env at module load, so stub env and re-import fresh.
+beforeEach(() => {
+  vi.resetModules();
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+const request = {
+  name: 'TestQuery',
+  text: 'query TestQuery { viewer { id } }'
+};
+function respond(status, body) {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: async () => body
+  };
+}
+
+// A non-2xx response is a failed request, not data. Before this, a 5xx whose
+// body happened to parse as JSON (a Cloudflare 522 to an `Accept:
+// application/json` client, Phoenix's own ErrorView) was returned to Relay as
+// if it were a payload — and, on the server, serialized into the prerendered
+// page, so every visitor hydrated into "No data returned for operation …"
+// until the page was regenerated.
+describe('createNetworkFetch (HTTP status handling)', () => {
+  it('retries a 5xx twice, then throws a FontdueResponseError carrying the status', async () => {
+    vi.useFakeTimers();
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => respond(522, {}));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch,
+      FontdueResponseError
+    } = await import("../relay/environment.js");
+    // Attach the rejection handler before advancing the clock so the retry
+    // delays don't surface as an unhandled rejection.
+    const outcome = createNetworkFetch()(request, {}).then(() => null, err => err);
+    await vi.advanceTimersByTimeAsync(5000);
+    const err = await outcome;
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+    expect(err).toBeInstanceOf(FontdueResponseError);
+    expect(err.status).toBe(522);
+    expect(err.operation).toBe('TestQuery');
+    expect(err.message).toContain('522');
+    expect(err.message).toContain('TestQuery');
+  });
+  it('recovers when a retry succeeds', async () => {
+    vi.useFakeTimers();
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const payload = {
+      data: {
+        viewer: {
+          id: '1'
+        }
+      }
+    };
+    const fetchMock = vi.fn().mockResolvedValueOnce(respond(503, {})).mockResolvedValueOnce(respond(200, payload));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    const pending = createNetworkFetch()(request, {});
+    await vi.advanceTimersByTimeAsync(5000);
+    await expect(pending).resolves.toEqual(payload);
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+  });
+  it('throws on a 4xx without retrying, surfacing the GraphQL message when the body has one', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => respond(404, {
+      errors: [{
+        message: 'Site not found'
+      }]
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await expect(createNetworkFetch()(request, {})).rejects.toThrow(/404.*Site not found/);
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+  it('throws when a 2xx body is not a GraphQL response', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    vi.stubGlobal('fetch', vi.fn(async () => respond(200, {})));
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await expect(createNetworkFetch()(request, {})).rejects.toThrow(/TestQuery/);
+  });
+  it('returns a 2xx GraphQL error payload unchanged so Relay reports the message', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const payload = {
+      data: null,
+      errors: [{
+        message: 'Not found'
+      }]
+    };
+    vi.stubGlobal('fetch', vi.fn(async () => respond(200, payload)));
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await expect(createNetworkFetch()(request, {})).resolves.toEqual(payload);
+  });
+});

package/dist/__tests__/previewServer.test.js

@@ -71,6 +71,7 @@ describe('runWithPreview', () => {
 describe('createFontdueFetch + ambient preview', () => {
   function mockFetch() {
     const fetchMock = vi.fn(async () => ({
+      ok: true,
       status: 200,
       json: async () => ({
         data: {}

package/dist/__tests__/providerBoundaries.test.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { afterEach, describe, it, expect, vi } from 'vitest';
+
+// The provider pulls in modules that declare `graphql` tagged queries at load
+// time; without the Relay Babel transform the tag throws, so stub it — nothing
+// rendered here runs a query.
+vi.mock('react-relay', async importActual => {
+  // react-relay is CommonJS: its named exports sit under `default` here.
+  const actual = await importActual();
+  return {
+    ...actual,
+    ...actual.default,
+    graphql: () => ({})
+  };
+});
+import FontdueContextProvider, { EnsureFontdueContext, LazyQueryBoundary } from '../components/FontdueContextProvider/index.js';
+function Boom() {
+  throw new Error('page render error');
+}
+function Suspender() {
+  throw new Promise(() => {});
+}
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+// A library provider must not wrap the host app in a Suspense boundary. Next
+// decides a response's status from whether the shell renders: with a boundary
+// above every page, `notFound()`, `redirect()` and thrown errors were caught
+// inside it, the shell streamed as 200, and error.tsx never got a chance
+// (vercel/next.js#82041 is the same mechanism for a route's own loading.tsx).
+describe('FontdueContextProvider', () => {
+  it('lets an error thrown by the host tree propagate during SSR', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderToString( /*#__PURE__*/React.createElement(FontdueContextProvider, null, /*#__PURE__*/React.createElement(Boom, null)))).toThrow('page render error');
+  });
+});
+
+// The boundary the provider used to supply now lives with each lazy renderer,
+// so a component that lazy-fetches blanks only itself while it loads, not the
+// page. EnsureFontdueContext itself adds none: a boundary around a preloaded
+// component's server HTML is hydrated lazily by React, and on a Next 16 page
+// that left every Fontdue component unhydrated until clicked.
+describe('LazyQueryBoundary', () => {
+  it('gives a lazy renderer its own Suspense boundary', () => {
+    const html = renderToString( /*#__PURE__*/React.createElement(FontdueContextProvider, null, /*#__PURE__*/React.createElement("p", null, "host content"), /*#__PURE__*/React.createElement(EnsureFontdueContext, null, /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(Suspender, null)))));
+    expect(html).toContain('host content');
+  });
+});
+describe('EnsureFontdueContext', () => {
+  it('adds no boundary of its own, so a preloaded component hydrates with the page', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderToString( /*#__PURE__*/React.createElement(FontdueContextProvider, null, /*#__PURE__*/React.createElement(EnsureFontdueContext, null, /*#__PURE__*/React.createElement(Boom, null))))).toThrow('page render error');
+  });
+});

package/dist/__tests__/useSerializablePreloadedQuery.test.js

@@ -0,0 +1,66 @@
+// @vitest-environment happy-dom
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { RelayEnvironmentProvider } from 'react-relay';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+beforeEach(() => {
+  vi.resetModules();
+  vi.unstubAllEnvs();
+  vi.stubEnv('NEXT_PUBLIC_FONTDUE_URL', 'https://acme.fontdue.com');
+});
+const params = {
+  name: 'TestQuery',
+  cacheID: 'test-query-cache-id',
+  text: 'query TestQuery { viewer { id } }',
+  operationKind: 'query'
+};
+
+// A page that was prerendered while the origin was down carries a preload
+// with no `data` (older fontdue-js serialized those). Priming the browser's
+// response cache with it hands Relay the empty payload on hydration and every
+// visitor gets "No data returned for operation …" — the fetch has to go to
+// the network instead.
+describe('useSerializablePreloadedQuery (browser cache priming)', () => {
+  async function prime(response) {
+    const {
+      createEnvironment,
+      responseCache
+    } = await import("../relay/environment.js");
+    const {
+      default: useSerializablePreloadedQuery
+    } = await import("../relay/useSerializablePreloadedQuery.js");
+    function Probe() {
+      useSerializablePreloadedQuery({
+        params,
+        variables: {},
+        response
+      });
+      return null;
+    }
+    renderToString( /*#__PURE__*/React.createElement(RelayEnvironmentProvider, {
+      environment: createEnvironment({})
+    }, /*#__PURE__*/React.createElement(Probe, null)));
+    return responseCache.get(params.cacheID, {});
+  }
+  it('warms the response cache with a preload that has data', async () => {
+    var _await$prime;
+    const payload = {
+      data: {
+        viewer: {
+          id: '1'
+        }
+      }
+    };
+    // Relay stamps the cached copy with `extensions.cacheTimestamp`.
+    expect((_await$prime = await prime(payload)) === null || _await$prime === void 0 ? void 0 : _await$prime.data).toEqual(payload.data);
+  });
+  it('leaves the cache cold for a preload with no data', async () => {
+    expect(await prime({})).toBeNull();
+    expect(await prime({
+      data: null,
+      errors: [{
+        message: 'Not found'
+      }]
+    })).toBeNull();
+  });
+});

package/dist/components/BuyButton/index.js

@@ -13,7 +13,7 @@ import BuyButtonIDQueryNode from '../../__generated__/BuyButtonIDQuery.graphql.j
 import BuyButtonSlugQueryNode from '../../__generated__/BuyButtonSlugQuery.graphql.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 function BuyButtonComponent(_ref) {
   let {
     collection: collectionKey,
@@ -153,17 +153,17 @@ export default function BuyButton(props) {
       collectionId,
       ...rest
     } = props;
-    inner = /*#__PURE__*/React.createElement(BuyButtonIDQueryRenderer, _extends({
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonIDQueryRenderer, _extends({
       collectionId: collectionId
-    }, rest));
+    }, rest)));
   } else if ('collectionSlug' in props && props.collectionSlug) {
     const {
       collectionSlug,
       ...rest
     } = props;
-    inner = /*#__PURE__*/React.createElement(BuyButtonSlugQueryRenderer, _extends({
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BuyButtonSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
-    }, rest));
+    }, rest)));
   } else {
     throw new Error('BuyButton expected one of preloadedQuery, collectionId, or collectionSlug');
   }

package/dist/components/Cart/orderTracking.d.ts

@@ -1,10 +1,27 @@
 import { Environment } from 'relay-runtime';
+export type OrderTrackingInput = {
+    analyticsConsent: boolean;
+    anonymousId?: string;
+    fbp?: string;
+    fbc?: string;
+    url: string;
+};
 /**
- * Stores the buyer's analytics context (cookie consent, Meta browser IDs,
- * checkout page URL) on the current order. The server emits the purchase
- * event from a Stripe webhook — outside the browser — so this is how that
- * event respects the consent banner and carries attribution.
+ * The buyer's analytics context as the order mutations take it: cookie
+ * consent, the anonymous ID, Meta's browser IDs (`_fbp`/`_fbc`) and the page.
+ * Sent with add-to-cart (`createOrderItems`) and cart/checkout open
+ * (`updateOrderTracking`) alike, so the server captures the same identifiers
+ * on every event it emits for the order — "Product Added", "Checkout Started"
+ * (which the server emits when the buyer submits their contact details, not
+ * from these calls) and the purchase, which fires from a Stripe webhook with
+ * no browser at all.
  *
- * Fire-and-forget: tracking must never break checkout.
+ * Returns undefined outside a browser or if anything throws: tracking must
+ * never break the cart.
+ */
+export declare function orderTrackingInput(): OrderTrackingInput | undefined;
+/**
+ * Stores the buyer's analytics context on the current order as the cart or
+ * checkout opens. Fire-and-forget: tracking must never break checkout.
  */
 export declare function sendOrderTracking(environment: Environment): void;