Skip to main content

Typing GraphQL operations

The GraphQL clients provided in this package can use Codegen to automatically parse and create types for your queries and mutations.

By installing a few packages in your app, you can use the graphql-codegen script, which will look for strings with the #graphql tag and extract types from them.

If your IDE supports it, you will also get syntax highlighting and auto-complete features when writing your queries.

Anchor to See it in actionSee it in action

In this example, we use the graphql-codegen script to parse a query in the /app/routes/new.tsx file.

Note how VSCode shows the types for both the return type of response.json(), and the variables option in the graphql function.

Anchor to Installing packagesInstalling packages

To use the graphql-codegen script, you will need to install a few packages in your app.

They will include the scripts to run, and the types that will be overridden by the results of parsing your operations.

Installing packages

npm add --save-dev @shopify/api-codegen-preset
npm add @shopify/admin-api-client @shopify/storefront-api-client
yarn add --dev @shopify/api-codegen-preset
yarn add @shopify/admin-api-client @shopify/storefront-api-client
pnpm add --save-dev @shopify/api-codegen-preset
pnpm add @shopify/admin-api-client @shopify/storefront-api-client

Anchor to Setting up .graphqlrc.tsSetting up .graphqlrc.ts

Before you can parse operations, you'll need to create a .graphqlrc.ts file in your project, and configure it to use the @shopify/api-codegen-preset.

Caution

Parsing will not work on .graphql documents, because the preset can only apply types from JavaScript and TypeScript const strings.

Learn more about the available configurations.Configuration options

Codegen configuration example

/.graphqlrc.ts

import {shopifyApiProject, ApiType} from '@shopify/api-codegen-preset';

export default {
// For syntax highlighting / auto-complete when writing operations
schema: 'https://shopify.dev/admin-graphql-direct-proxy/2023-10',
documents: ['./app/**/*.{js,ts,jsx,tsx}'],
projects: {
// To produce variable / return types for Admin API operations
default: shopifyApiProject({
apiType: ApiType.Admin,
apiVersion: '2023-10',
documents: ['./app/**/*.{js,ts,jsx,tsx}'],
outputDir: './app/types',
}),
},
};

Anchor to Setting up the scriptSetting up the script

To generate types, you'll need to add an entry for graphql-codegen in the "scripts" section of your package.json file.

Setting up the script

/package.json

{
"scripts": {
"graphql-codegen": "graphql-codegen"
}
}

Anchor to Generating typesGenerating types

When you run graphql-codegen, it will look in all your configured documents for strings marked with a #graphql tag.

IDEs that support the .graphqlrc.ts file will provide syntax highlighting for your operations, as well as typing.

Tip

You can pass in a --watch flag to the script, which will update your types every time you save a file.

Running graphql-codegen

npm run graphql-codegen
yarn graphql-codegen
pnpm graphql-codegen

Anchor to ResourcesResources

Admin API

Make requests to the Admin API

Storefront API

Make requests to the Storefront API

Was this page helpful?