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