graphql-request
Minimal GraphQL client supporting Node and browsers for scripts or simple apps
- Features
- Install
- Quickstart
- Usage
- Node Version Support
- Community
- Examples
- FAQ
Features
- Most simple & lightweight GraphQL client
- Promise-based API (works with
async/await) - TypeScript support
- Isomorphic (works with Node / browsers)
Install
npm add graphql-request graphql
Quickstart
Send a GraphQL query with a single line of code.
import { request, gql } from 'graphql-request'
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
request('https://api.graph.cool/simple/v1/movies', query).then((data) => console.log(data))
Usage
import { request, GraphQLClient } from 'graphql-request'
// Run GraphQL queries/mutations using a static function
request(endpoint, query, variables).then((data) => console.log(data))
// ... or create a GraphQL client instance to send requests
const client = new GraphQLClient(endpoint, { headers: {} })
client.request(query, variables).then((data) => console.log(data))
Node Version Support
We only officially support LTS Node versions. We also make an effort to support two additional versions:
- The latest even Node version if it is not LTS already.
- The odd Node version directly following the latest even version.
You are free to try using other versions of Node (e.g. 13.x) with graphql-request but at your own risk.
Community
GraphQL Code Generator's GraphQL-Request TypeScript Plugin
A GraphQL-Codegen plugin that generates a graphql-request ready-to-use SDK, which is fully-typed.
Examples
Authentication via HTTP header
import { GraphQLClient, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const graphQLClient = new GraphQLClient(endpoint, {
headers: {
authorization: 'Bearer MY_TOKEN',
},
})
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
const data = await graphQLClient.request(query)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
Incrementally setting headers
If you want to set headers after the GraphQLClient has been initialised, you can use the setHeader() or setHeaders() functions.
import { GraphQLClient } from 'graphql-request'
const client = new GraphQLClient(endpoint)
// Set a single header
client.setHeader('authorization', 'Bearer MY_TOKEN')
// Override all existing headers
client.setHeaders({
authorization: 'Bearer MY_TOKEN',
anotherheader: 'header_value'
})
passing-headers-in-each-request
It is possible to pass custom headers for each request. request() and rawRequest() accept a header object as the third parameter
import { GraphQLClient } from 'graphql-request'
const client = new GraphQLClient(endpoint)
const query = gql`
query getMovie($title: String!) {
Movie(title: $title) {
releaseDate
actors {
name
}
}
}
`
const variables = {
title: 'Inception',
}
const requestHeaders = {
authorization: 'Bearer MY_TOKEN'
}
// Overrides the clients headers with the passed values
const data = await client.request(query, variables, requestHeaders)
Passing more options to fetch
import { GraphQLClient, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const graphQLClient = new GraphQLClient(endpoint, {
credentials: 'include',
mode: 'cors',
})
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
const data = await graphQLClient.request(query)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
Using GraphQL Document variables
import { request, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const query = gql`
query getMovie($title: String!) {
Movie(title: $title) {
releaseDate
actors {
name
}
}
}
`
const variables = {
title: 'Inception',
}
const data = await request(endpoint, query, variables)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
GraphQL Mutations
import { GraphQLClient, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const graphQLClient = new GraphQLClient(endpoint, {
headers: {
authorization: 'Bearer MY_TOKEN',
},
})
const mutation = gql`
mutation AddMovie($title: String!, $releaseDate: Int!) {
insert_movies_one(object: { title: $title, releaseDate: $releaseDate }) {
title
releaseDate
}
}
`
const variables = {
title: 'Inception',
releaseDate: 2010,
}
const data = await graphQLClient.request(mutation, variables)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
Error handling
import { request, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
fullname # "Cannot query field 'fullname' on type 'Actor'. Did you mean 'name'?"
}
}
}
`
try {
const data = await request(endpoint, query)
console.log(JSON.stringify(data, undefined, 2))
} catch (error) {
console.error(JSON.stringify(error, undefined, 2))
process.exit(1)
}
}
main().catch((error) => console.error(error))
Using require instead of import
const { request, gql } = require('graphql-request')
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
const data = await request(endpoint, query)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
Cookie support for node
npm install fetch-cookie
require('fetch-cookie/node-fetch')(require('node-fetch'))
import { GraphQLClient, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const graphQLClient = new GraphQLClient(endpoint, {
headers: {
authorization: 'Bearer MY_TOKEN',
},
})
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
const data = await graphQLClient.rawRequest(query)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
Using a custom fetch method
npm install fetch-cookie
import { GraphQLClient, gql } from 'graphql-request'
import crossFetch from 'cross-fetch'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
// a cookie jar scoped to the client object
const fetch = require('fetch-cookie')(crossFetch)
const graphQLClient = new GraphQLClient(endpoint, { fetch })
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
const data = await graphQLClient.rawRequest(query)
console.log(JSON.stringify(data, undefined, 2))
}
main().catch((error) => console.error(error))
Receiving a raw response
The request method will return the data or errors key from the response.If you need to access the extensions key you can use the rawRequest method:
import { rawRequest, gql } from 'graphql-request'
async function main() {
const endpoint = 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr'
const query = gql`
{
Movie(title: "Inception") {
releaseDate
actors {
name
}
}
}
`
const { data, errors, extensions, headers, status } = await rawRequest(endpoint, query)
console.log(JSON.stringify({ data, errors, extensions, headers, status }, undefined, 2))
}
main().catch((error) => console.error(error))
File Upload
Browser
import { request } from 'graphql-request'
const UploadUserAvatar = gql`
mutation uploadUserAvatar($userId: Int!, $file: Upload!) {
updateUser(id: $userId, input: { avatar: $file })
}
`
request('/api/graphql', UploadUserAvatar, {
userId: 1,
file: document.querySelector('input#avatar').files[0],
})
Node
import { createReadStream } from 'fs'
import { request } from 'graphql-request'
const UploadUserAvatar = gql`
mutation uploadUserAvatar($userId: Int!, $file: Upload!) {
updateUser(id: $userId, input: { avatar: $file })
}
`
request('/api/graphql', UploadUserAvatar, {
userId: 1,
file: createReadStream('./avatar.img'),
})
FAQ
Why do I have to install graphql?
graphql-request uses a TypeScript type from the graphql package such that if you are using TypeScript to build your project and you are using graphql-request but don't have graphql installed TypeScript build will fail. Details here. If you are a JS user then you do not technically need to install graphql. However if you use an IDE that picks up TS types even for JS (like VSCode) then its still in your interest to install graphql so that you can benefit from enhanced type safety during development.
Do I need to wrap my GraphQL documents inside the gql template exported by graphql-request?
No. It is there for convenience so that you can get the tooling support like prettier formatting and IDE syntax highlighting. You can use gql from graphql-tag if you need it for some reason too.
What's the difference between graphql-request, Apollo and Relay?
graphql-request is the most minimal and simplest to use GraphQL client. It's perfect for small scripts or simple apps.
Compared to GraphQL clients like Apollo or Relay, graphql-request doesn't have a built-in cache and has no integrations for frontend frameworks. The goal is to keep the package and API as minimal as possible.
-
纯个人理解学习记录，不含教程（这部分肯定是官方最靠谱啦） graphQL与react都是由Facebook设计，react为构建用户界面提供了一种声明式方案，类似地graphQL为API通信提供声明式方案，对想要的数据的声明式描述。 例如并行发起数据请求时，我们希望能同时获得所需的全部数据，graphQL可以去帮我们处理多个数据请求，我们只需要关心我们想要的数据。 此外graphQL也衍生扩展了很
-
To query a GraphQL API, all you need to do is send an HTTP request that includes the query operation in the body of the request. In this lesson, we will use the browser’s fetch method to request the t
-
使用 Dataloader 使用 graphql, 你很可能会去查询图结构的数据(graph of data ) (这可能是句废话). 如果用简单直接的方法去获取每个field的数据，可能会效率很低。 使用 java-dataloader 可以帮助你更有效地缓存和批量化数据加载操作。 >>< 假设我们用以下的 StarWars 查询。这查询了一个英雄( hero)和他朋友的名字，和他朋友的朋友的名
-
GraphQL 前端 基于graphql-request三方实现GraphQL在前端应用。 参考： 1.https://github.com/prisma-labs/graphql-request 2.https://graphql.cn/code 1.创建graph_api.js文件, const {GraphQLClient } = require('graphql-request') //u
-
https://dreamylost.cn/ 文档 version = 1.4 仅供参考# Queries 要对schema执行查询，需要使用适当的参数构建一个新的GraphQL对象，然后调用execute()方法。 查询的结果是ExecutionResult，它可能包含查询数据或错误信息列表。 GraphQLSchema schema = GraphQLSchema.newSchema()
-
运行时异常 如果遇到某些异常情况，graphql引擎可以引发运行时异常。以下是可以在graphql.execute（…）调用中抛出的异常列表。 这些不是执行中的graphql错误，而是执行graphql查询的完全不可接受的条件。 graphql.schema.CoercingSerializeException 原文：is thrown when a value cannot be seriali
-
maven中添加依赖 com.graphql-java-kickstart graphql-spring-boot-starter 5.5.0 com.graphql-java-kickstart graphiql-spring-boot-starter 5.5.0 runtime com.graphql-java-kickstart graphql-java-tools 5.5.0 在resou
-
我创建了全一个新的react状态管理框架https://github.com/babyfish-ct/graphql-state 这篇文章不打算介绍框架本身的细节，因为框架提供了入门例子、详细的文档、全面的示例、甚至生动的GIF动画，这里不做简单的重复 本文中，我们讨论为什么要创建这个新的框架，究竟是重复发明轮子，还是有其独到见解和非凡的价值。 如何在react中消费GraphQL服务，可以分为四
-
https://dreamylost.cn/ 文档 version = 1.4 仅供参考 Creating a schema 定义数据模型 GraphQL API具有一个schema，该schema定义了可以查询或突变的每个字段以及这些字段的类型。 graphql-java提供了两种不同的方式来定义schema：以编程方式使用Java代码或通过特殊的graphql dsl（称为SDL）。 如果不确
-
graphql GraphQL是比REST更高效、强大和灵活的新一代API标准。Facebook开发了GraphQL并且将其开源，目前其由一大群来自全球各地的公司和个人维护。 GraphQL 使用 Schema 来描述数据，并通过制定和实现 GraphQL 规范 定义了支持 Schema 查询的 DSQL （Domain Specific Query Language，领域特定查询语言）。Sche
-
1. Graphql是什么？ GraphQL是Facebook 在2012年开发的，2015年开源，2016年下半年Facebook宣布可以在生产环境使用，而其内部早就已经广泛应用了，用于替代 REST API。facebook的解决方案和简单：用一个“聪明”的节点来进行复杂的查询，将数据按照客户端的要求传回去，后端根据GraphQL机制提供一个具有强大功能的接口，用以满足前端数据的个性化需求，既
-
快速开始 GraphQL 是一种用于 API 的查询语言。这是 GraphQL 和 REST 之间一个很好的比较 (译者注： GraphQL 替代 REST 是必然趋势)。在这组文章中, 我们不会解释什幺是 GraphQL, 而是演示如何使用 @nestjs/GraphQL 模块。 GraphQLModule 只不过是 Apollo 服务器的包装器。我们没有造轮子, 而是提供一个现成的模块, 这让
-
GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。 向你的 API 发出一个 GraphQL 请求就能准确获得你想要的数据，不多不少。 GraphQL 查询总是返回可预测
-
Graphql editor 是一款 Graphql 的可视化编辑器和 IDE，帮助用户更容易理解 GraphQL 模式，通过使用可视化块系统创建模式。GraphQL Editor 将把它们转化为代码。通过 GraphQL Editor，用户可以在不写任何代码的情况下创建可视化的图表，或者以一种很好的方式呈现其模式。 GraphQL View Code Editor View Hierarchy View
-
GraphQL CLI Help us to improve new GraphQL CLI. Check out the new structure and commands below!Feel free to contact us in Discord channel. We would love to hear your feedback. Features Helpful command
-
Fullstack GraphQL Simple Demo Application API built with Node + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL). WebApp built with React + Redux. Written in ES6 using Babel
-
Hasura GraphQL Engine Hasura is an open source product that accelerates API development by 10x by giving you GraphQL or REST APIs with built in authorization on your data, instantly. Read more at hasu