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