fontdue-js 3.5.0 → 3.5.1

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 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.

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/__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: {}
       })
@@ -117,6 +125,8 @@ describe('createNetworkFetch (fontdue-client-version header)', () => {
   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: {}
       })
@@ -133,6 +143,8 @@ describe('createNetworkFetch (fontdue-client-version header)', () => {
   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: {}
       })
@@ -153,6 +165,8 @@ 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: {}
       })
@@ -167,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: {}
       })
@@ -192,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: {}
       })
@@ -212,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/CharacterViewer/index.js

@@ -20,7 +20,7 @@ import StyleSelect from './StyleSelect.js';
 import Checkbox from '../Checkbox/index.js';
 import useFeaturesData from '../TypeTester/useFeaturesData.js';
 import CharacterViewerStyleRefetchQueryNode from '../../__generated__/CharacterViewerStyleRefetchQuery.graphql.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { unicodeNamesUrl } from '../../data/unicodeNamesUrl.js';
 import { compareGlyphs, flattenCharacterList } from './glyphMatch.js';
@@ -498,17 +498,17 @@ export default function CharacterViewer(props) {
       collectionId,
       ...rest
     } = props;
-    inner = /*#__PURE__*/React.createElement(CharacterViewerIdQueryRenderer, _extends({
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(CharacterViewerIdQueryRenderer, _extends({
       collectionId: collectionId
-    }, rest));
+    }, rest)));
   } else if ('collectionSlug' in props && props.collectionSlug) {
     const {
       collectionSlug,
       ...rest
     } = props;
-    inner = /*#__PURE__*/React.createElement(CharacterViewerSlugQueryRenderer, _extends({
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(CharacterViewerSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
-    }, rest));
+    }, rest)));
   } else {
     throw new Error('CharacterViewer expected one of preloadedQuery, collectionId, or collectionSlug');
   }

package/dist/components/CustomerLoginForm/index.js

@@ -2,7 +2,7 @@
 
 import _CustomerLoginFormQuery from "../../__generated__/CustomerLoginFormQuery.graphql.js";
 import _CustomerLoginFormLoginMutation from "../../__generated__/CustomerLoginFormLoginMutation.graphql.js";
-import React, { useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { commitMutation, graphql, useLazyLoadQuery, useRelayEnvironment } from 'react-relay';
 import TextField from '../TextField/index.js';
 const loginMutation = (_CustomerLoginFormLoginMutation.hash && _CustomerLoginFormLoginMutation.hash !== "975b639fac1e0d88e0f0c9c55acd8b9c" && console.error("The definition of 'CustomerLoginFormLoginMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormLoginMutation);
@@ -51,7 +51,13 @@ const CustomerLoginForm = _ref => {
     className: "login-form"
   }, error && /*#__PURE__*/React.createElement("div", {
     className: "login-form__errors"
-  }, error), submitted ? /*#__PURE__*/React.createElement(SubmittedMessage, null) : /*#__PURE__*/React.createElement("form", {
+  }, error), submitted ?
+  /*#__PURE__*/
+  // The label fetch suspends; resolve it here rather than at whatever
+  // boundary the host app has above the form.
+  React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(SubmittedMessage, null)) : /*#__PURE__*/React.createElement("form", {
     className: "login-form__form",
     onSubmit: handleSubmit
   }, /*#__PURE__*/React.createElement("div", {

package/dist/components/FeatureTester/FeatureTesters.js

@@ -7,7 +7,7 @@ import _FeatureTesters_collection from "../../__generated__/FeatureTesters_colle
 import React from 'react';
 import { graphql, useFragment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
 import FeatureTesterCard from './FeatureTesterCard.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import FeatureTestersIdQueryNode from '../../__generated__/FeatureTestersIdQuery.graphql.js';
 import FeatureTestersSlugQueryNode from '../../__generated__/FeatureTestersSlugQuery.graphql.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
@@ -148,9 +148,9 @@ export default function FeatureTesters(_ref7) {
     config: config
   }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(FeatureTestersPreloadedRenderer, _extends({
     preloadedQuery: props.preloadedQuery
-  }, options)) : 'collectionId' in props && props.collectionId ? /*#__PURE__*/React.createElement(ById, _extends({
+  }, options)) : 'collectionId' in props && props.collectionId ? /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(ById, _extends({
     collectionId: props.collectionId
-  }, options)) : /*#__PURE__*/React.createElement(BySlug, _extends({
+  }, options))) : /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(BySlug, _extends({
     collectionSlug: props.collectionSlug
-  }, options)));
+  }, options))));
 }

package/dist/components/FeatureTester/index.js

@@ -5,7 +5,7 @@ import _FeatureTesterStandaloneQuery from "../../__generated__/FeatureTesterStan
 import React from 'react';
 import { graphql, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
 import FeatureTesterCard from './FeatureTesterCard.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import FeatureTesterStandaloneQueryNode from '../../__generated__/FeatureTesterStandaloneQuery.graphql.js';
@@ -62,5 +62,5 @@ function FeatureTesterLazyRenderer(_ref3) {
 export default function FeatureTester(props) {
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: props.config
-  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(FeatureTesterPreloadedRenderer, props) : /*#__PURE__*/React.createElement(FeatureTesterLazyRenderer, props));
+  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(FeatureTesterPreloadedRenderer, props) : /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(FeatureTesterLazyRenderer, props)));
 }

package/dist/components/FontdueContextProvider/index.d.ts

@@ -7,6 +7,9 @@ export declare function EnsureFontdueContext({ children, config, }: {
     children: React.ReactNode;
     config?: Config;
 }): React.JSX.Element;
+export declare function LazyQueryBoundary({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
 export interface FontdueContextProvider_props {
     children?: React.ReactNode;
     url?: string;

package/dist/components/FontdueContextProvider/index.js

@@ -53,6 +53,14 @@ function ConfigOverride(_ref) {
 // typeTester: { selectable: true } }} />` works without any provider. Inside an
 // existing context, it deep-merges onto the inherited config — the component's
 // keys win, everything else is inherited from the outer `<FontdueProvider>`.
+//
+// Deliberately no Suspense boundary here either: one around every component
+// would put a dehydrated boundary in the server HTML of each preloaded
+// component, and React hydrates those lazily — measured on a Next 16 / React
+// 19.2 page, the preloaded BuyButton, TypeTesters and CharacterViewer were
+// still unhydrated a minute after load (a click still works, since React
+// hydrates the target on interaction, but nothing else does). Only the lazy
+// renderers need a boundary; see LazyQueryBoundary.
 export function EnsureFontdueContext(_ref2) {
   let {
     children,
@@ -68,6 +76,27 @@ export function EnsureFontdueContext(_ref2) {
     config: config
   }, children);
 }
+
+// The Suspense boundary for a component's *lazy* renderer — the branch taken
+// when it's given an id or slug rather than a preloaded query, so it fetches
+// its own data with useLazyLoadQuery (see the lazy-vs-preloaded guide). That
+// suspension has to resolve here, next to the component, not at whatever
+// boundary the host app has above it: the provider used to supply one around
+// the whole app, which blanked everything beneath it while any one component
+// loaded — and put every Next page inside a Suspense boundary, so
+// `notFound()`, `redirect()` and thrown errors were caught in it and the
+// response streamed as 200 (see FontdueContextProvider below). Preloaded
+// renderers resolve synchronously and get no boundary, so their server HTML
+// hydrates with the page as before. A null fallback keeps server HTML and the
+// first client render identical.
+export function LazyQueryBoundary(_ref3) {
+  let {
+    children
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, children);
+}
 const IS_SERVER = typeof window === typeof undefined;
 
 // === Multi-island state-sharing contract ===
@@ -112,7 +141,15 @@ function useSharedStore(providedStore, config) {
 // `*Preloaded` self-wrapping components use this so they can stand alone
 // without claiming the page-level aux UI slot. Pages that need aux UI
 // (theme/test-mode/consent/tracking) wrap with `FontdueProvider` instead.
-export default function FontdueContextProvider(_ref3) {
+//
+// Deliberately NO Suspense (or error) boundary around `children`. Mounted in a
+// Next root layout, a boundary here sits above every page: React SSR then
+// catches a page's `notFound()`, `redirect()` or thrown error inside it, emits
+// the fallback, and streams the shell as 200 — soft 404s site-wide, redirects
+// with no Location header, error.tsx never rendering (FD-1183 / FD-1074).
+// Components that can suspend carry their own boundary via
+// `EnsureFontdueContext`; the provider's aux UI has one in FontdueProvider.
+export default function FontdueContextProvider(_ref4) {
   let {
     children,
     url,
@@ -120,7 +157,7 @@ export default function FontdueContextProvider(_ref3) {
     config,
     components,
     store
-  } = _ref3;
+  } = _ref4;
   const environment = useCurrentEnvironment({
     url,
     stripeIntegration
@@ -136,8 +173,6 @@ export default function FontdueContextProvider(_ref3) {
     environment: environment
   }, /*#__PURE__*/React.createElement(Provider, {
     store: sharedStore
-  }, /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
   }, /*#__PURE__*/React.createElement(RawConfigContext.Provider, {
     value: config
   }, /*#__PURE__*/React.createElement(ConfigContext.Provider, {
@@ -146,5 +181,5 @@ export default function FontdueContextProvider(_ref3) {
     value: url ?? fontdueBaseUrl() ?? ''
   }, /*#__PURE__*/React.createElement(ComponentsContext.Provider, {
     value: components ?? {}
-  }, /*#__PURE__*/React.createElement(TypeTesterFamiliesProvider, null, children)))))))));
+  }, /*#__PURE__*/React.createElement(TypeTesterFamiliesProvider, null, children))))))));
 }

package/dist/components/NewsletterSignup/index.js

@@ -14,7 +14,7 @@ import Check from '../Icons/Check.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import NewsletterSignupQueryNode from '../../__generated__/NewsletterSignupQuery.graphql.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
 export async function loadNewsletterSignupQuery(options) {
@@ -238,5 +238,5 @@ export default function NewsletterSignup(_ref4) {
     config: config
   }, props.preloadedQuery ? /*#__PURE__*/React.createElement(NewsletterSignupPreloadedQueryRenderer, _extends({}, props, {
     preloadedQuery: props.preloadedQuery
-  })) : /*#__PURE__*/React.createElement(NewsletterSignupLazyQueryRenderer, props));
+  })) : /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(NewsletterSignupLazyQueryRenderer, props)));
 }

package/dist/components/TestFontsForm/index.js

@@ -15,7 +15,7 @@ import TestFontsFormQueryNode from '../../__generated__/TestFontsForm_Query.grap
 import Checkbox from '../Checkbox/index.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';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
 const TestFontsDownloading = _ref => {
@@ -258,5 +258,5 @@ export default function TestFontsForm(_ref5) {
     config: config
   }, props.preloadedQuery ? /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({}, props, {
     preloadedQuery: props.preloadedQuery
-  })) : /*#__PURE__*/React.createElement(TestFontsFormLazyQueryRenderer, props));
+  })) : /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(TestFontsFormLazyQueryRenderer, props)));
 }

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -12,7 +12,7 @@ import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import TypeTesterStandaloneQueryNode from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
 import ConfigContext from '../ConfigContext.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
 const changedStylesQuery = (_TypeTesterStandaloneChangedStylesQuery.hash && _TypeTesterStandaloneChangedStylesQuery.hash !== "98374227c6b2c3eceab5b48138e1a662" && console.error("The definition of 'TypeTesterStandaloneChangedStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneChangedStylesQuery);
 function TypeTesterStandaloneComponent(_ref) {
@@ -144,5 +144,5 @@ function TypeTesterStandaloneLazyQueryRenderer(_ref4) {
 export default function TypeTesterStandalone(props) {
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: props.config
-  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(TypeTesterStandalonePreloadedQueryRenderer, props) : /*#__PURE__*/React.createElement(TypeTesterStandaloneLazyQueryRenderer, props));
+  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(TypeTesterStandalonePreloadedQueryRenderer, props) : /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(TypeTesterStandaloneLazyQueryRenderer, props)));
 }

package/dist/components/TypeTesters/index.js

@@ -23,7 +23,7 @@ import { normalizeFeaturesProp } from '../TypeTester/types.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
-import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 const findPriceBarCollection = (collection, familyId) => {
   if (collection.id === familyId) return collection;
   if (!collection.families) return null;
@@ -306,13 +306,13 @@ export default function TypeTesters(_ref8) {
       preloadedQuery: preloadedQuery
     }, rest));
   } else if (collectionId) {
-    inner = /*#__PURE__*/React.createElement(TypeTestersIDQueryRenderer, _extends({
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(TypeTestersIDQueryRenderer, _extends({
       collectionId: collectionId
-    }, rest));
+    }, rest)));
   } else if (collectionSlug) {
-    inner = /*#__PURE__*/React.createElement(TypeTestersSlugQueryRenderer, _extends({
+    inner = /*#__PURE__*/React.createElement(LazyQueryBoundary, null, /*#__PURE__*/React.createElement(TypeTestersSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
-    }, rest));
+    }, rest)));
   }
   if (!inner) return null;
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {

package/dist/relay/environment.d.ts

@@ -1,6 +1,20 @@
 import { Environment, RequestParameters, QueryResponseCache, Variables, GraphQLResponse } from 'relay-runtime';
 import { version } from '../version.js';
 export { version };
+/**
+ * A GraphQL request that came back with a non-2xx status, or a 2xx whose body
+ * isn't a GraphQL response at all. Thrown rather than returned so a failed
+ * request can never masquerade as data: on the server that payload would be
+ * serialized into the prerendered page, and every visitor would hydrate into
+ * Relay's "No data returned for operation …" until the page was regenerated.
+ */
+export declare class FontdueResponseError extends Error {
+    /** The HTTP status the Fontdue endpoint answered with. */
+    status: number;
+    /** The GraphQL operation name, e.g. `FontdueProviderQuery`. */
+    operation: string;
+    constructor(message: string, status: number, operation: string);
+}
 export declare function fontdueBaseUrl(): string | undefined;
 export declare function createNetworkFetch(options?: CreateRelayEnvironmentOptions): (request: RequestParameters, variables: Variables) => Promise<GraphQLResponse>;
 export declare const networkFetch: (request: RequestParameters, variables: Variables) => Promise<GraphQLResponse>;

package/dist/relay/environment.js

@@ -47,6 +47,54 @@ const NEXT_PUBLIC_STRIPE = typeof process !== 'undefined' && process.env ? proce
 const FONTDUE_URL = readEnv('FONTDUE_URL') ?? readEnv('NEXT_PUBLIC_FONTDUE_URL') ?? NEXT_PUBLIC_URL;
 const STRIPE_INTEGRATION = readEnv('FONTDUE_STRIPE_INTEGRATION') ?? readEnv('NEXT_PUBLIC_FONTDUE_STRIPE_INTEGRATION') ?? NEXT_PUBLIC_STRIPE;
 const CACHE_TTL = 10 * 1000; // 10 seconds, to resolve preloaded results
+const RETRY_DELAY_MS = 1000;
+
+/**
+ * A GraphQL request that came back with a non-2xx status, or a 2xx whose body
+ * isn't a GraphQL response at all. Thrown rather than returned so a failed
+ * request can never masquerade as data: on the server that payload would be
+ * serialized into the prerendered page, and every visitor would hydrate into
+ * Relay's "No data returned for operation …" until the page was regenerated.
+ */
+export class FontdueResponseError extends Error {
+  /** The HTTP status the Fontdue endpoint answered with. */
+
+  /** The GraphQL operation name, e.g. `FontdueProviderQuery`. */
+
+  constructor(message, status, operation) {
+    super(message);
+    this.name = 'FontdueResponseError';
+    this.status = status;
+    this.operation = operation;
+  }
+}
+
+// Transient origin failures worth a second try: a gateway or overload error
+// from Cloudflare or Render (5xx), rate limiting, a request timeout.
+function isRetryableStatus(status) {
+  return status >= 500 || status === 429 || status === 408;
+}
+
+// The GraphQL error message a failed response carries, if any — Fontdue
+// answers an unknown site with `{"errors":[{"message":"Site not found"}]}`.
+async function errorMessageOf(resp) {
+  try {
+    var _body$errors, _body$errors$;
+    const body = await resp.json();
+    const message = body === null || body === void 0 ? void 0 : (_body$errors = body.errors) === null || _body$errors === void 0 ? void 0 : (_body$errors$ = _body$errors[0]) === null || _body$errors$ === void 0 ? void 0 : _body$errors$.message;
+    return typeof message === 'string' ? message : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// A body with `data` (present or null) or an `errors` list. Anything else — an
+// empty object from a proxy, a JSON-shaped error page — is not a payload Relay
+// can act on and must fail the request instead.
+function isGraphQLResponse(json) {
+  if (typeof json !== 'object' || json === null) return false;
+  return 'data' in json || Array.isArray(json.errors);
+}
 
 // The configured Fontdue base URL resolved for the current runtime, or
 // undefined when it can't be determined (e.g. multi-tenant, where fetches go to
@@ -129,14 +177,34 @@ export function createNetworkFetch(options) {
     for (let attempt = 0; attempt <= 2; attempt++) {
       try {
         const resp = await fetch(url + `?queryName=${request.name}`, init);
+
+        // A non-2xx response is a failed request, never data. Returning its
+        // body used to let a 5xx that happened to parse as JSON (Cloudflare
+        // answers an `Accept: application/json` client with one) reach Relay
+        // as a payload — and, on the server, get serialized into a prerendered
+        // page that then crashed every visitor on hydration.
+        if (!resp.ok) {
+          if (attempt < 2 && isRetryableStatus(resp.status)) {
+            await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
+            continue;
+          }
+          const detail = await errorMessageOf(resp);
+          throw new FontdueResponseError(`fontdue-js: ${request.name} failed with HTTP ${resp.status}` + (detail ? `: ${detail}` : ''), resp.status, request.name);
+        }
         const json = await resp.json();
+        if (!isGraphQLResponse(json)) {
+          throw new FontdueResponseError(`fontdue-js: ${request.name} returned HTTP ${resp.status} with a body that is not a GraphQL response`, resp.status, request.name);
+        }
 
         // GraphQL returns exceptions (for example, a missing required variable) in the "errors"
         // property of the response. If any exceptions occurred when processing the request,
         // throw an error to indicate to the developer what went wrong.
-        if (Array.isArray(json.errors)) {
-          var _json$errors, _error$extensions;
-          const error = (_json$errors = json.errors) === null || _json$errors === void 0 ? void 0 : _json$errors[0];
+        const {
+          errors
+        } = json;
+        if (Array.isArray(errors) && errors[0]) {
+          var _error$extensions;
+          const error = errors[0];
           console.error('GraphQL Error:', {
             message: error.message,
             code: (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code,
@@ -145,9 +213,10 @@ export function createNetworkFetch(options) {
         }
         return json;
       } catch (error) {
+        if (error instanceof FontdueResponseError) throw error;
         // Retry on network errors (TypeError) before falling through to CORS detection
         if (attempt < 2 && error instanceof TypeError) {
-          await new Promise(resolve => setTimeout(resolve, 1000));
+          await new Promise(resolve => setTimeout(resolve, RETRY_DELAY_MS));
           continue;
         }
         if (handlePossibleCorsError(error, url)) {

package/dist/relay/loadSerializableQuery.js

@@ -46,6 +46,18 @@ export default async function loadSerializableQuery(query, variables, options) {
   if (!('params' in query)) throw new Error('Params not found in query, is it a fragment instead of a query?');
   const fetcher = createNetworkFetch(options);
   const response = await fetcher(query.params, variables);
+
+  // The result is handed to the browser and, on a prerendered page, frozen
+  // into the static output — so a response with no data must fail here, where
+  // the render fails with it (Next keeps serving the last good page; a build
+  // aborts), rather than be serialized and crash every visitor on hydration.
+  // Partial data alongside errors is still a payload Relay can render.
+  const singular = Array.isArray(response) ? response[0] : response;
+  if ((singular === null || singular === void 0 ? void 0 : singular.data) == null) {
+    var _singular$errors, _singular$errors$;
+    const detail = singular === null || singular === void 0 ? void 0 : (_singular$errors = singular.errors) === null || _singular$errors === void 0 ? void 0 : (_singular$errors$ = _singular$errors[0]) === null || _singular$errors$ === void 0 ? void 0 : _singular$errors$.message;
+    throw new Error(`fontdue-js: ${query.params.name} returned no data` + (detail ? `: ${detail}` : ''));
+  }
   return {
     params: query.params,
     variables,

package/dist/relay/useSerializablePreloadedQuery.js

@@ -18,14 +18,18 @@ export default function useSerializablePreloadedQuery(preloadQuery) {
   let query = arguments.length > 2 ? arguments[2] : undefined;
   const environment = useRelayEnvironment();
   useMemo(() => {
+    // A preload with no data is not a result to hand Relay: on a page that was
+    // prerendered while the origin was down (older fontdue-js serialized
+    // those) priming the cache with it would make hydration throw "No data
+    // returned for operation …" for every visitor. Leave the cache cold so the
+    // component fetches live instead.
+    const response = preloadQuery.response;
+    const singular = Array.isArray(response) ? response[0] : response;
+    if ((singular === null || singular === void 0 ? void 0 : singular.data) == null) return;
     writePreloadedQueryToCache(preloadQuery);
     if (query != null) {
-      const response = preloadQuery.response;
-      const singular = Array.isArray(response) ? response[0] : response;
-      if ((singular === null || singular === void 0 ? void 0 : singular.data) != null) {
-        const operation = createOperationDescriptor(getRequest(query), preloadQuery.variables);
-        environment.commitPayload(operation, singular.data);
-      }
+      const operation = createOperationDescriptor(getRequest(query), preloadQuery.variables);
+      environment.commitPayload(operation, singular.data);
     }
   }, [preloadQuery, environment, query]);
   return {

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.5.0";
+export const version = "3.5.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",