createCroctMiddleware

This function creates a route middleware for React Router 7 Hydrogen apps.

Add it to your root route’s middleware export so loaders and actions receive the Croct visitor context through the context they get. Pair it with the cookie writer in your server entry to persist the visitor cookies on the response.

Remix has no route middleware, so use the context helper instead.

Signature

This function has the following signature:

function createCroctMiddleware(options?: CroctOptions): MiddlewareFunction;

Example

Register the middleware on your root route:

import {createCroctMiddleware} from '@croct/plug-hydrogen/server';
export const middleware = [createCroctMiddleware()];

Parameters

The following list describes the supported parameters:

options(optional)

object

The resolver options.

userIdResolver(optional)

(context: ResolverContext)=>Promise<string|null>

The function that resolves the ID of the logged-in customer for the current request.

It receives the Hydrogen request context and returns the user ID, or nothing for anonymous visitors.

By default, the SDK reads the logged-in customer’s ID from the Shopify Customer Account API.

localeResolver(optional)

(context: ResolverContext)=>Promise<string|null>

The function that resolves the preferred content locale for the current request.

It receives the Hydrogen request context and returns a BCP‑47 locale, or nothing to use the workspace default.

By default, the SDK derives the locale from the storefront’s i18n configuration, such as en-US.