---
title: Storefront API Types
description: "

  \    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.

  \  "
api_version: 2025-04
api_name: hydrogen-react
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
---

# Storefront API Typesutility

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

* #### Example code

  ##### 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

[![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/api/hydrogen-react/utilities/storefrontApiCustomScalars)

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

[![](https://shopify.dev/images/icons/32/gear.png)![](https://shopify.dev/images/icons/32/gear-dark.png)](https://shopify.dev/api/hydrogen-react/utilities/storefront-schema)

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