GraphQL frontend schema types

Questions and Answers Frontend-React
2

One thing i found really helpful is https://github.com/dotansimha/graphql-code-generator. It fetches all the schemas from your graphql endpoint and generates one file with everything typed out.

To use it, you just need to install the @graphql-codegen/cli and @graphql-codegen/typescript packages, add a codegen.yml file to your project and run the graphql-codegen --config codegen.yml command.

// codegen.yml
overwrite: true
schema: "http://localhost:1337/graphql"
generates:
  ./src/types.d.ts:
    plugins:
      - "typescript"

One downside is that it types out every schema it finds on the endpoint and generates a pretty huge file. But that should not be that big of a deal because d.ts files do not end up in final builds.

Hope that helps.

3 Likes