createCroctContext

This function resolves the Croct visitor context for Remix Hydrogen apps, which have no route middleware.

Call it in your getLoadContext wrapper, merge the returned context into the load context under the croct property, and call the cookie writer in your server entry to persist the visitor cookies on the response.

For React Router 7 apps, use the route middleware instead.

Signature

This function has the following signature:

function createCroctContext(  request: Request,  scope: ResolverContext,  options?: CroctOptions,): Promise<RequestContext>;

Example

Resolve the context in your getLoadContext wrapper:

import {createCroctContext} from '@croct/plug-hydrogen/server';
const croct = await createCroctContext(request, hydrogenContext);
return {...hydrogenContext, croct};

Parameters

The following list describes the supported parameters:

request

Request

The incoming request.

scope

ResolverContext

The Hydrogen context for the current request.

The SDK reads the storefront and customer account from it to resolve the visitor identity and locale.

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.