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 See it in actionSee 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.
Anchor to Installing packagesInstalling 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.
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.
Parsing will not work on .graphql documents, because the preset can only apply types from JavaScript and TypeScript const strings.
Parsing will not work on .graphql documents, because the preset can only apply types from JavaScript and TypeScript const strings.
Anchor to Setting up the 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.
Anchor to Generating typesGenerating 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.
You can pass in a --watch flag to the script, which will update your types every time you save a file.
