---
title: Typing GraphQL operations
description: >-
  The GraphQL clients provided in this package can use Codegen to automatically
  parse and create types for your queries and mutations.
api_version: v0
source_url:
  html: 'https://shopify.dev/docs/api/shopify-app-react-router/v0/guide-graphql-types'
  md: >-
    https://shopify.dev/docs/api/shopify-app-react-router/v0/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.

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

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

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

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

## Running graphql-codegen

##### npm

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

##### yarn

```sh
yarn graphql-codegen
```

##### pnpm

```sh
pnpm graphql-codegen
```

***

## Resources

[Admin API\
\
](https://shopify.dev/docs/api/shopify-app-react-router/v0/apis/admin-api)

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

[Storefront API\
\
](https://shopify.dev/docs/api/shopify-app-react-router/v0/apis/storefront-api)

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

***