Very often when working with backend it is useful for frontend application to know what response can we get.
When working with TypeScript we can actually generate types and hooks using
schema.graphql or even “live” backend.
This is where graphql-codegen comes in handy
When you need to create generic components for resources (types) shared across different components you can use typescript plugin
When writing graphql queries, you can also generate type-safe react hooks with typescript-react-apollo plugin. With this plugin you only need to write
*.graphql with desired Query, Mutation, Subscription or Fragment (you don’t need to import fragments in your quries!) and respective hooks will be created.
codegen.yaml file from project:
overwrite: true schema: 'http://localhost:4000/graphql' documents: - 'src/**/queries.ts' - 'src/**/*.graphql' generates: src/__generated__/types.tsx: plugins: - 'typescript' config: maybeValue: T | undefined src/__generated__/operations.tsx: preset: import-types presetConfig: typesPath: ./types plugins: - typescript-operations config: maybeValue: T | undefined src/__generated__/hooks.tsx: preset: import-types presetConfig: typesPath: ./operations plugins: - typescript-react-apollo config: maybeValue: T | undefined