---
title: hydrogenContext
description: >-
  A grouped export of all Hydrogen context keys for use with React Router's
  context.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/hydrogencontext'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/utilities/hydrogencontext.md'
api_name: hydrogen
---

# hydrogen​Context

A grouped export of all Hydrogen context keys for use with React Router's `context.get()` pattern. This enables type-safe access to Hydrogen services in loaders, actions, and middleware.

The proxy-based implementation in `createHydrogenContext` supports both direct property access and the `context.get()` pattern, giving you flexibility in how you access Hydrogen services.

Examples

### Examples

* #### Using hydrogenContext

  ##### Description

  Using hydrogenContext with context.get() in a loader

  ##### JavaScript

  ```js
  import {hydrogenContext} from '@shopify/hydrogen';

  export async function loader({context}) {
    // Access services using the grouped hydrogenContext object
    const storefront = context.get(hydrogenContext.storefront);
    const cart = context.get(hydrogenContext.cart);
    const customerAccount = context.get(hydrogenContext.customerAccount);
    const env = context.get(hydrogenContext.env);
    const session = context.get(hydrogenContext.session);
    const waitUntil = context.get(hydrogenContext.waitUntil);

    // Use the services as needed
    const {product} = await storefront.query(
      `#graphql
        query Product($handle: String!) {
          product(handle: $handle) {
            title
            handle
          }
        }
      `,
      {
        variables: {handle: 'example-product'},
      },
    );

    return {product};
  }

  export async function action({context, request}) {
    // Access only the services you need
    const cart = context.get(hydrogenContext.cart);
    const session = context.get(hydrogenContext.session);

    const formData = await request.formData();
    const lines = formData.get('lines');

    // Add items to cart
    const result = await cart.addLines(lines);

    // Update session if needed
    session.set('cartId', result.cart.id);

    return {cart: result};
  }
  ```

  ##### TypeScript

  ```ts
  // Import from local files to get proper types
  import {hydrogenContext} from './context-keys';
  import type {HydrogenRouterContextProvider} from './types';

  // These examples show how to use hydrogenContext with React Router's context.get() pattern
  // In a real app, you would import from '@shopify/hydrogen' and have proper type augmentation

  // Example loader using context.get() pattern
  export async function loader({
    context,
  }: {
    context: HydrogenRouterContextProvider;
  }) {
    // Access services using the grouped hydrogenContext object
    const storefront = context.get(hydrogenContext.storefront);
    const cart = context.get(hydrogenContext.cart);
    const customerAccount = context.get(hydrogenContext.customerAccount);
    const env = context.get(hydrogenContext.env);
    const session = context.get(hydrogenContext.session);
    const waitUntil = context.get(hydrogenContext.waitUntil);

    // Use the services as needed
    const {product} = await storefront.query(
      `#graphql
        query Product($handle: String!) {
          product(handle: $handle) {
            title
            handle
          }
        }
      `,
      {
        variables: {handle: 'example-product'},
      },
    );

    return {product};
  }

  // Example action using context.get() pattern
  export async function action({
    context,
    request,
  }: {
    context: HydrogenRouterContextProvider;
    request: Request;
  }) {
    // Access only the services you need
    const cart = context.get(hydrogenContext.cart);
    const session = context.get(hydrogenContext.session);

    const formData = await request.formData();
    const lines = formData.get('lines');

    // Add items to cart
    const result = await cart.addLines(lines as any);

    // Update session if needed
    session.set('cartId', result.cart.id);

    return {cart: result};
  }

  // Example showing both patterns work
  export async function hybridExample({
    context,
  }: {
    context: HydrogenRouterContextProvider;
  }) {
    // Pattern 1: Direct property access (existing pattern)
    const directStorefront = context.storefront;
    const directCart = context.cart;

    // Pattern 2: context.get() with hydrogenContext (new pattern)
    const viaGetStorefront = context.get(hydrogenContext.storefront);
    const viaGetCart = context.get(hydrogenContext.cart);

    // Both patterns return the same instances
    console.assert(
      directStorefront === viaGetStorefront,
      'Both patterns access same storefront',
    );
    console.assert(directCart === viaGetCart, 'Both patterns access same cart');

    return {success: true};
  }
  ```

***

## Related

[createHydrogenContext](https://shopify.dev/docs/api/hydrogen/2026-04/utilities/createhydrogencontext)

***