From 784b31a78a175488f9dc1567f182569b042453b8 Mon Sep 17 00:00:00 2001 From: Charly POLY Date: Mon, 3 Oct 2022 14:14:10 +0200 Subject: [PATCH 1/2] doc(readme): update documentation on GraphQL Code Generator integration --- README.md | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ee0bf4fa..7596d17e 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 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 From 1d07973f9416de4d238db709d1e4421015f8ebad Mon Sep 17 00:00:00 2001 From: Charly POLY Date: Mon, 3 Oct 2022 14:21:35 +0200 Subject: [PATCH 2/2] doc(readme): add link GraphQL Code Generator docs --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7596d17e..94e76009 100644 --- a/README.md +++ b/README.md @@ -115,7 +115,7 @@ You are free to try using other versions of Node (e.g. `13.x`) with `graphql-req `graphql-request@^5` supports `TypedDocumentNode`, the typed counterpart of `graphql`'s `DocumentNode`. -Installing and configuring GraphQL Code Generator requires a few steps in order to get end-to-end typed GraphQL operations using the provided `graphql()` helper: +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';