Examples
Authentication via HTTP header
import { GraphQLClient } from 'graphql-request'
const client = new GraphQLClient('my-endpoint', {
headers: {
Authorization: 'Bearer my-jwt-token',
},
})
const query = `{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`
client.request(query).then(data => console.log(data))
Passing more options to fetch
import { GraphQLClient } from 'graphql-request'
const client = new GraphQLClient('my-endpoint', {
credentials: 'include',
mode: 'cors'
})
const query = `{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`
client.request(query).then(data => console.log(data))
Using variables
With request
:
import { request } from 'graphql-request'
const query = `query getMovie($title: String!) {
Movie(title: $title) {
releaseDate
actors {
name
}
}
}`
const variables = {
title: 'Inception',
}
request('my-endpoint', query, variables).then(data => console.log(data))
With GraphQLClient
:
import { GraphQLClient } from 'graphql-request';
const query = `query getMovie($title: String!) {
Movie(title: $title) {
releaseDate
actors {
name
}
}
}`
const variables = {
title: 'Inception',
}
const client = new GraphQLClient('https://api.graph.cool/simple/v1/movies')
client.request(query, variables).then(data => console.log(data))
Error handling
import { request } from 'graphql-request'
const wrongQuery = `{
some random stuff
}`
request('my-endpoint', query)
.then(data => console.log(data))
.catch(err => {
console.log(err.response.errors) // GraphQL response errors
console.log(err.response.data) // Response data if available
})
Using require
instead of import
const { request } = require('graphql-request')
const query = `{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`
request('my-endpoint', query).then(data => console.log(data))
Cookie support for node
npm install fetch-cookie/node-fetch
import { GraphQLClient } from 'graphql-request'
// use this instead for cookie support
global['fetch'] = require('fetch-cookie/node-fetch')(require('node-fetch'))
const client = new GraphQLClient('my-endpoint')
const query = `{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`
client.request(query).then(data => console.log(data))
Using graphql-tag
You can use graphql-tag
to add syntax highlighting to your GraphQL queries. Since it transforms GraphQL SDL into an AST, you need to change it back into GraphQL SDL before passing it to request
. You can do that by using print
.
import { GraphQLClient } from 'graphql-request';
import gql from 'graphql-tag';
import { print } from 'graphql';
const query = gql`{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}`
const client = new GraphQLClient('https://api.graph.cool/simple/v1/movies')
client.request(print(query)).then(data => console.log(data))
More examples coming soon...
- Fragments
- Typed Typescript return values