6、React 中使用 GraphQL 的全面指南

React 中使用 GraphQL 的全面指南

1. GraphQL 查询在 React 中的实现

在 React 应用里，我们可以借助 GraphQL 来获取数据。首先，我们从获取一个组织的信息开始。

1.1 定义查询

在 App 组件上方定义查询变量，使用 JavaScript 的模板字符串来定义多行查询字符串，如下所示：

const GET_ORGANIZATION = `
{
  organization(login: "the-road-to-learn-react") {
    name
    url
  }
}
`;

1.2 发送请求

使用 axios 向 GitHub 的 GraphiQL API 发送 POST 请求，配置 axios 指向正确的 API 端点，并使用个人访问令牌。在 App 组件的 componentDidMount 方法中执行请求：

const axiosGitHubGraphQL = axios.create({
  baseURL: 'https://api.github.com/graphql',
  headers: {
    Authorization: `bearer ${
      process.env.REACT_APP_GITHUB_PERS