score:0

i highly recommend using a code generation tool that uses your original schema as the source.

graphql code generator is a package that you can easily incorporate into a react app or similar. once you add it to your project, you can run yarn graphql-codegen init (assuming you use yarn; there are options for npm, etc.) and it will ask a series of questions to generate a yaml configuration file. you then can add a command like yarn generate that references that file.

here's an example of the config i created for my project:

overwrite: true
schema: "http://localhost:8080/query"
documents: "./src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-query"
  ./graphql.schema.json:
    plugins:
      - "introspection"

when you run the yarn generate command, it fetches your schema from your running back-end service (you'll need to make sure your service has graphql introspection enabled), combines that with your client-side queries, and then generates everything necessary to interact with your service. in my case, i use react-query, and it creates a per-operation wrapper around usequery, e.g., usewidgetsquery. it works great.

i have no affiliation with the project, i'm just a fan.

if you also use code generation on the back end (through another project, depending on your back-end language), it means you can write your schema, etc. once and then generate a huge amount of types and wiring that is easy to keep in sync across projects.


Related Query

More Query from same tag