diff --git a/README.md b/README.md index ee0bf4fa..94e76009 100644 --- a/README.md +++ b/README.md @@ -111,9 +111,40 @@ You are free to try using other versions of Node (e.g. `13.x`) with `graphql-req ## Community -#### GraphQL Code Generator's GraphQL-Request TypeScript Plugin +### Get typed GraphQL Queries with GraphQL Code Generator -A [GraphQL-Codegen plugin](https://graphql-code-generator.com/docs/plugins/typescript-graphql-request) that generates a `graphql-request` ready-to-use SDK, which is fully-typed. +`graphql-request@^5` supports `TypedDocumentNode`, the typed counterpart of `graphql`'s `DocumentNode`. + +Installing and configuring [GraphQL Code Generator](https://www.the-guild.dev/graphql/codegen) requires a few steps in order to get end-to-end typed GraphQL operations using the provided `graphql()` helper: + +```ts +import request from 'graphql-request'; +import { graphql } from './gql/gql'; + +const getMovieQueryDocument = graphql(/* GraphQL */ ` + query getMovie($title: String!) { + Movie(title: $title) { + releaseDate + actors { + name + } + } + } +`); + + +const data = await request( + 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr', + getMovieQueryDocument, + // variables are type-checked! + { title: "Inception" } +) + +// `data.Movie` is typed! +``` +[_The complete example is available in the GraphQL Code Generator repository_](https://github.com/dotansimha/graphql-code-generator/tree/master/examples/front-end/react/graphql-request) + +Visit GraphQL Code Generator's dedicated guide to get started: https://www.the-guild.dev/graphql/codegen/docs/guides/react-vue. ## Examples