---
title: Typing GraphQL operations
description: |-
  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.
api_version: v4 latest
api_name: shopify-app-remix
source_url:
  html: https://shopify.dev/docs/api/shopify-app-remix/latest/guide-graphql-types
  md: https://shopify.dev/docs/api/shopify-app-remix/latest/guide-graphql-types.md
---

# 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

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

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.

### Examples

* #### Installing packages

  ##### npm

  ```sh
  npm add --save-dev @shopify/api-codegen-preset
  npm add @shopify/admin-api-client @shopify/storefront-api-client
  ```

  ##### yarn

  ```sh
  yarn add --dev @shopify/api-codegen-preset
  yarn add @shopify/admin-api-client @shopify/storefront-api-client
  ```

  ##### pnpm

  ```sh
  pnpm add --save-dev @shopify/api-codegen-preset
  pnpm add @shopify/admin-api-client @shopify/storefront-api-client
  ```

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

[![](https://shopify.dev/images/icons/32/github.png)![](https://shopify.dev/images/icons/32/github-dark.png)](https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/api-codegen-preset#configuration)

[Learn more about the available configurations.Configuration options](https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/api-codegen-preset#configuration)

### Examples

* #### Codegen configuration example

  ##### /.graphqlrc.ts

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

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

### Examples

* #### Setting up the script

  ##### /package.json

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

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

### Examples

* #### Running graphql-codegen

  ##### npm

  ```sh
  npm run graphql-codegen
  ```

  ##### yarn

  ```sh
  yarn graphql-codegen
  ```

  ##### pnpm

  ```sh
  pnpm graphql-codegen
  ```

## Resources

[![](https://shopify.dev/images/icons/32/shopify.png)![](https://shopify.dev/images/icons/32/shopify-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/apis/admin-api)

[Admin API](https://shopify.dev/docs/api/shopify-app-remix/apis/admin-api)

[Make requests to the Admin API](https://shopify.dev/docs/api/shopify-app-remix/apis/admin-api)

[![](https://shopify.dev/images/icons/32/shopify.png)![](https://shopify.dev/images/icons/32/shopify-dark.png)](https://shopify.dev/docs/api/shopify-app-remix/apis/storefront-api)

[Storefront API](https://shopify.dev/docs/api/shopify-app-remix/apis/storefront-api)

[Make requests to the Storefront API](https://shopify.dev/docs/api/shopify-app-remix/apis/storefront-api)