Skip to content

Commit

Permalink
chore(docs): update documentation on GraphQL Code Generator integrati…
Browse files Browse the repository at this point in the history
…on (#392)
  • Loading branch information
charlypoly authored Oct 3, 2022
1 parent d5599b9 commit 82c2081
Showing 1 changed file with 33 additions and 2 deletions.
35 changes: 33 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,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

Expand Down

0 comments on commit 82c2081

Please sign in to comment.