[GraphQL] Query a GraphQL API with graphql-request

不打扰是莪最后的温柔 提交于 2020-11-24 15:05:03

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 total days skied from our GraphQL API.

const query = `
  query {
    totalDays
  }
`;

console.log("querying the count");
fetch("https://8lq1n313m2.sse.codesandbox.io", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ query })
})
  .then(res => res.json())
  .then(({ data }) => `totalDays: ${data.totalDays}`)
  .then(console.log)
  .catch(console.error);

 

graphql-request is a lightweight package that can be used to send queries to any GraphQL API. Sending a request with graphql-request uses less syntax than a fetch request. In this lesson, we will query the totalDays field using this helper package.

Install:

npm i --save graphql-request
import { request } from "graphql-request";

const query = `
  query {
    totalDays
  }
`;

console.log("querying the count");
request("https://8lq1n313m2.sse.codesandbox.io", query)
  .then(({ totalDays }) => `totalDays: ${totalDays}`)
  .then(console.log)
  .catch(console.error);

 

Source: https://github.com/prisma/graphql-request

 

Personally, I feel you can do some wrapper for raw fetch function by yourself instead of install a new dependency to your project, it add more bytes to the total bundles but in return, it is shorten your own code. 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!