---
title: Storefront API Types
description: >-
  If you are using TypeScript, pre-generated TypeScript types are available that
  match the Storefront API's GraphQL schema.
api_version: 2026-04
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/storefront-api-types
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/latest/utilities/storefront-api-types.md
api_name: hydrogen-react
---

# Storefront API Types

If you are using TypeScript, pre-generated TypeScript types are available that match the Storefront API's GraphQL schema. These types can be used when you need to manually create an object that matches a Storefront API object's shape.

These types also work really well with the new [`satisfies` operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator) introduced in TypeScript 4.9, though you don't need to use `satisfies` to use these types.

Examples

### Examples

* ####

  ##### Description

  I am the default example

  ##### Storefront API Types in TypeScript

  ```ts
  import type {
    Product,
    Collection,
  } from '@shopify/hydrogen-react/storefront-api-types';

  const myProduct = {id: '123', title: 'My Product'} satisfies Partial<Product>;
  console.log(myProduct.title);

  const myCollection = {
    id: '456',
    title: 'My Collection',
  } satisfies Partial<Collection>;
  console.log(myCollection.title);

  const myNotSatisfyingProduct: Partial<Product> = {
    id: '789',
    title: 'Other Product',
  };
  console.log(myNotSatisfyingProduct.title);
  ```

***

## Related

[storefrontApiCustomScalars](https://shopify.dev/docs/api/hydrogen-react/2026-04/utilities/storefrontapicustomscalars)

[Storefront Schema](https://shopify.dev/docs/api/hydrogen-react/2026-04/utilities/storefront-schema)

***