---
title: storefrontApiCustomScalars
description: "

  \    Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.


  See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).


  Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.

  \  "
api_version: 2025-04
api_name: hydrogen-react
source_url:
  html: https://shopify.dev/docs/api/hydrogen-react/latest/utilities/storefrontapicustomscalars
  md: https://shopify.dev/docs/api/hydrogen-react/latest/utilities/storefrontapicustomscalars.md
---

# storefront​Api​Custom​Scalarsutility

Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly when using TypeScript.By default, GraphQL CodeGen uses `any` for custom scalars; by using these definitions, GraphQL Codegen will generate the correct types for the Storefront API's custom scalars.

See more about [GraphQL CodeGen](https://graphql-code-generator.com/) and [custom scalars for TypeScript](https://the-guild.dev/graphql/codegen/plugins/typescript/typescript#scalars).

Note that `@shopify/hydrogen-react` has already generated types for the Storefront API, so you may not need to setup GraphQL Codegen on your own.

### Examples

* #### codegen.ts

  ##### Description

  I am the default example

  ##### Codegen Config

  ```js
  import {storefrontApiCustomScalars} from '@shopify/hydrogen-react';

  const config = {
    overwrite: true,
    schema: require.resolve('@shopify/hydrogen-react/storefront.schema.json'),
    documents: 'pages/**/*.tsx',
    generates: {
      './gql/': {
        preset: 'client',
        plugins: [],
        config: {
          // defines the custom scalars used in the Storefront API
          scalars: storefrontApiCustomScalars,
        },
      },
    },
  };

  export default config;
  ```

## 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/storefront-schema)

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

[![](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-api-types)

[Storefront API Types](https://shopify.dev/api/hydrogen-react/utilities/storefront-api-types)