该系列其他文章可以点击查看专栏👉🏻👉🏻react-query手把手教程系列

！！！观前提醒！！！

本文假设您已经理解了graphql，并且你已经有一个graphql的后端服务。如果你没有场景使用graphql，可以关闭本篇文章，无需观看

如果你希望学习graphql，可以查看笔者的grahql极简入门教程系列。用最快的节奏带你入门graphql

场景

graphql从创立至今已经越来越受到社区的欢迎，前端只需要向后端请求需要什么样的数据，后端就会按照规定的格式返回前端。

在社区中同样有很多graphql客户端，比如笔者在grahql极简入门教程中使用的urql以及大名鼎鼎的Apollo。你同样也可以使用react-query作为客户端。

实践

在react-query中使用graphql

由于github的开放api也支持graphql（这里再次感谢github提供如此齐全的教学工具），所以这里还是以github为例，请求issue列表：

const issuesGraphQLQuery = `
query Issues($repo: String!, $org:String!) {
  repository(name: $repo, owner: $org) {
    issues(first: 10) {
      nodes {
        number
        title
      }
    }
  }
}
`


async function fetchIssues({queryKey}) {
  const [issues, org, repo] = queryKey;
  const request = await fetch(`https://api.github.com/graphql`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${这里替换成你自己的github token}`,
    },
    body: JSON.stringify({
      query: issuesGraphQLQuery,
      variables: {repo, org},
      operationName:"Issues"
    }),
  })


  const json = await request.json();


  if (json.errors) {
    throw new Error(json.errors[0].message);
  }


  return json;
}

由于graphql只是一种特殊形式的http请求，因此在这里完全可以使用fetch方法请求graphql的数据，只要遵循graphql社区的请求规范即可。

上面的请求体中，包含了查询本身（query）以及查询字符串中定义的变量(variables)以及操作的名称（operationName）。

直接使用useQuery新增一个和平常一样的查询即可：

const issuesQuery = useQuery(["issues", org, repo], fetchIssues);

同样也可以像之前的章节一样，封装一个全局通用的请求方法

async function fetchGithubGraphQL({queryKey}) {
  const [graphQLQuery, variables] = queryKey;


  const request = await fetch(`https://api.github.com/graphql`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${这里替换成你自己的github token}`,
    },
    body: JSON.stringify({
      query: graphQLQuery,
      variables,
    }),
  })


  const json = await request.json();


  if (json.errors) {
    throw new Error(json.errors[0].message);
  }


  return json;
}

之前的例子请求，可以直接改为下面的样子：

function GraphQLIssues({org, repo})  {
  const issuesQuery = useQuery(
    [issuesGraphQLQuery, {org, repo}],
    fetchIssues
  );
  // ...
}

请注意：

如果基于上面例子的查询请求，可能会造成大量的重复数据。因为react-query没有一种简单的方法，在不同查询键的缓存中共享数据。其它类型的客户端比如：Apollo和URQL能够使用规范化缓存，其中每个实体都单独缓存防止重复数据。如果对于重复数据的删除是一个强需求，你可以使用上面提到的这些客户端。

graphql-request

graphql-request是一个轻量级请求库，你可以减少请求graphql的模板代码，比如之前章节中提到的处理graphql的错误。但是又不像其他客户端提供缓存，因此非常适合结合graphql使用。

在写graphql查询时，你需要使用gql函数进行包裹，这样在IDE中将会对代码进行高亮处理。

import {GraphQLClient, gql} from 'graphql-request';

const graphQLClient = new GraphQLClient(
  'https://api.github.com/graphql',
  {
    headers: {
      'Authorization': `Bearer ${这里替换成你自己的github token}`,
    },
  }
);

function fetchIssues({queryKey}) {
  const [graphQLQuery, variables] = queryKey;

  return graphQLClient.request(graphQLQuery, variables);
}

const issuesGraphQLQuery = gql`
    query Issues($repo: String!, $org:String!) {
      repository(name: $repo, owner: $org) {
        issues(first: 10) {
          nodes {
            number
            title
          }
        }
      }
    }
`

function GraphQLIssues({org, repo})  {
  const issuesQuery = useQuery(
    [issuesGraphQLQuery, {org, repo}],
    fetchIssues
    );
    // ...
}

上面的代码将前文的例子以graphql-request库进行了重写，这样会使你在使用时方便许多。如果你希望了解更多该库的相关知识点击👉🏻graphql-request。

至此我们就简单的介绍了react-query在graphql中的应用。