[DOCS] How to generate automatic typescript types from your graphql schema. [Hasura]

[nirmaanlabs]

Is this issue related to an existing part of the documentation? If so, please provide a link
I am not sure about this

Describe the thing to improve
A clear and concise description of problems.

If you are using Hasura as backend service, you may want to generate typescript types for your queries/mutation and use them with refine.

Step 1. Export graphql schema file from hasura. You can follow this guide

I will use apollo's new rover cli. Install apollo rover cli using following command
npm install --save-dev @apollo/rover

Generate Graphql schema using the following command.
npx rover graph introspect http://localhost:8080/v1/graphql -H "X-Hasura-Admin-Secret:adminsecretkey" | out-file schema.graphql -encoding utf8

If you are curious about the -encoding utf8 flag read here

Step 2. Generate typescript types from schema.graphql file

Create a file codegen.yml in the same level where your package json exist

schema: schema8.graphql
generates:
  ./src/generated.ts:
    plugins:
      - typescript
      - typescript-operations
      - typed-document-node

Install required packages using following command
npm i -D @graphql-codegen/cli @graphql-codegen/typed-document-node @graphql-codegen/typescript @graphql-codegen/typescript-operations

My devDependencies tree look like this now

"devDependencies": {
    "@apollo/rover": "^0.7.0",
    "@graphql-codegen/cli": "^2.9.1",
    "@graphql-codegen/typed-document-node": "^2.3.2",
    "@graphql-codegen/typescript": "^2.7.2",
    "@graphql-codegen/typescript-operations": "^2.5.2",
    "@types/graphql": "^14.5.0",
    "apollo": "^2.34.0",
    "graphql": "^16.5.0"
  }

Add codegen script cmd in package.json to generate types

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "codegen": "graphql-codegen --config ./codegen.yml"
  },

Now run npm run codegen and and new file generated.ts will be created inside src directory

This video explain more about automatic types from graphql schema

related #1713

[aliemir]

Hey @nirmaanlabs, thank you for the issue. I think this will be a great guide! Would you like to add it yourself to our Guides & Concepts section in the docs? If you want, here's a guide that you can follow to start with https://refine.dev/docs/contributing/#starting-documentation-in-watch-mode 🙏

[nirmaanlabs]

@aliemir I am pulled into different things right now.