Using GraphQL Codegen with Typescript and urql

GraphQL codegen helps us to write queries, mutations, fragments and using hooks which are already typed.
read more about it

Assuming you already have urql , graphQL and typescript installed and setup in your project, (I am working on next.js project)
here is how you can install and use graphql codegen for typed variables throughout your project.

Installation

yarn add -D @graphql-codegen/typescript-urql 

Add codegen CLI

yarn add -D @graphql-codegen/cli

Initialize codegen configuration

yarn run graphql-codegen init

This command will generate codegen configuration for you by asking for selecting your graphql endpoint, location of your graphql operation in the project, folder to write the output of codegen, script to run graphql codegen etc. You can also manually create the codegen.ts file and write the configuration there.

Use your graphQL api endpoint as schema.
read more about config

Run

Run yarn install and the script you have set up to run codegen.
Eg. yarn run codegen

To run in watchmode,

yarn run codegen --watch