Typing GraphQL operations

The GraphQL clients provided in this package can use [Codegen](https://the-guild.dev/graphql/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.

See it in action

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

Installing packages

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

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

Setting up .graphqlrc.ts

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

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',
    }),
  },
};

Setting up the script

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

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

Generating types

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

npm run graphql-codegen

yarn graphql-codegen

pnpm run graphql-codegen

Resources

Resources