Skip to content

Conversation

@frandiox
Copy link
Contributor

The main code block (step 2 of the cookie migration feat) contains the following as markdown:


React Router + Hydrogen on Oxygen

If you scaffolded from the default Hydrogen skeleton and deploy to Oxygen, the createRequestHandler utility from @shopify/hydrogen/oxygen (now also exported from @shopify/hydrogen) already sets up a Storefront API proxy on the same domain as your storefront.

In most cases, no changes are required; just confirm your server entry still uses it:

// server.ts (Oxygen)
import {createRequestHandler, createHydrogenContext} from '@shopify/hydrogen';

export default {
  async fetch(request, env) {
    const hydrogenContext = createHydrogenContext({
      env,
      request,
      /* ... */
    });

    const handleRequest = createRequestHandler({
      /* ... */
      getLoadContext: () => hydrogenContext,
      // Alternatively, pass at least storefront client:
      // getLoadContext: () => ({storefront: createStorefrontClient(...)})
    });

    return handleRequest(request);
  },
};

Keep using <Analytics.Provider> component or useCustomerPrivacy hook to get cookies in the browser automatically.

For a full example, refer to our skeleton template.

React Router + Hydrogen on other hosts

Hosts that support Web Fetch API (Request/Response)

On hosts that support the standard Web Fetch API (Workers-style environments), import createRequestHandler from @shopify/hydrogen (instead of react-router) and route requests through it:

import {createRequestHandler, createHydrogenContext} from '@shopify/hydrogen';

const hydrogenContext = createHydrogenContext({
  /* ... */
});

const handleRequest = createRequestHandler({
  /* ... */
  getLoadContext: () => hydrogenContext,
});

Node.js and other hosts

For Node-like environments, adapt Node requests to Fetch with @remix-run/node-fetch-server, then delegate to Hydrogen's handler:

import {createRequestHandler, createHydrogenContext} from '@shopify/hydrogen';
import {createRequestListener} from '@remix-run/node-fetch-server';
import http from 'http';

const handleNodeRequest = createRequestListener((request) => {
  const hydrogenContext = createHydrogenContext({
    /* ... */
  });

  const handleWebRequest = createRequestHandler({
    /* ... */
    getLoadContext: () => hydrogenContext,
  });

  return handleWebRequest(request);
});

http.createServer(handleNodeRequest);

Alternatively, if you can't delegate to Hydrogen's createRequestHandler, you can provide a custom Storefront API proxy in your server. See Hydrogen's implementation as a reference. In this case, ensure you manually pass sameDomainForStorefrontApi: true in the consent object for <Analytics.Provider> or as a prop to the useCustomerPrivacy hook.

@frandiox frandiox requested a review from kdaviduik December 12, 2025 02:47
@frandiox frandiox requested a review from a team as a code owner December 12, 2025 02:47
@shopify
Copy link
Contributor

shopify bot commented Dec 12, 2025

Oxygen deployed a preview of your fd-cookies-changelogjson-entry branch. Details:

Storefront Status Preview link Deployment details Last update (UTC)
Skeleton (skeleton.hydrogen.shop) ✅ Successful (Logs) Preview deployment Inspect deployment December 12, 2025 2:48 AM

Learn more about Hydrogen's GitHub integration.

@kdaviduik
Copy link
Contributor

/snapit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants