GraphQL frontend schema types

Questions and Answers Frontend-React
#1

So i am pretty new to graphql and apollo, but have been using it sucessfully these last few weeks together with strapi. Something i am wondering about is, is there some way to get the grapqhl type definitions from strapi into my frontend repo? So that I could hopefully get some intelisense when writing my queries akin to how the playground does it.

I feel like most of my bugs are due to misspellings in the actual queries themselves.

Any tips or advice is welcome!

PS, using typescript, next.js and apollo client for the frontend

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

1 Like
#3

This helped me the absolute most!! I was struggling to create the types and interfaces needed to make my NextJS site be typed correctly.