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 exampleSee it in action
In this example, we use the graphql-codegen
script to parse a query in the 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 installInstalling 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
examples
Installing packages
npm
npm add --save-dev @shopify/api-codegen-preset npm add @shopify/admin-api-client @shopify/storefront-api-client
yarn
yarn add --dev @shopify/api-codegen-preset yarn add @shopify/admin-api-client @shopify/storefront-api-client
pnpm
pnpm add --save-dev @shopify/api-codegen-preset pnpm add @shopify/admin-api-client @shopify/storefront-api-client
Anchor to configureSetting 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 .
Parsing will not work on .graphql
documents, because the preset can only apply types from JavaScript and TypeScript const strings.
Codegen configuration example
/.graphqlrc.ts
examples
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 set-up-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
examples
Setting up the script
/package.json
{ "scripts": { "graphql-codegen": "graphql-codegen" } }
Anchor to runGenerating 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.
You can pass in a --watch
flag to the script, which will update your types every time you save a file.
Running graphql-codegen
examples
Running graphql-codegen
npm
npm run graphql-codegen
yarn
yarn graphql-codegen
pnpm
pnpm run graphql-codegen