GraphQL | TanStack Query React Docs

GraphQL

由于 React Query 的获取机制是基于 Promise 构建的，与具体实现无关，因此您可以将 React Query 与任何异步数据获取客户端一起使用，包括 GraphQL！

请记住，React Query 不支持规范化缓存。虽然绝大多数用户实际上并不需要规范化缓存，甚至不像他们认为的那样从中受益匪浅，但在极少数情况下可能需要它，因此请务必先与我们核实，以确保这确实是您所需要的！

类型安全和代码生成

React Query 与 graphql-request^5 和 GraphQL Code Generator 结合使用，可提供完全类型的 GraphQL 操作：

tsx

import request from 'graphql-request'
import { useQuery } from '@tanstack/react-query'

import { graphql } from './gql/gql'

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`)

function App() {
  // `data` 是完全类型的！
  const { data } = useQuery({
    queryKey: ['films'],
    queryFn: async () =>
      request(
        'https://swapi-graphql.netlify.app/.netlify/functions/index',
        allFilmsWithVariablesQueryDocument,
        // 变量也经过类型检查！
        { first: 10 },
      ),
  })
  // ...
}

import request from 'graphql-request'
import { useQuery } from '@tanstack/react-query'

import { graphql } from './gql/gql'

const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `
  query allFilmsWithVariablesQuery($first: Int!) {
    allFilms(first: $first) {
      edges {
        node {
          id
          title
        }
      }
    }
  }
`)

function App() {
  // `data` 是完全类型的！
  const { data } = useQuery({
    queryKey: ['films'],
    queryFn: async () =>
      request(
        'https://swapi-graphql.netlify.app/.netlify/functions/index',
        allFilmsWithVariablesQueryDocument,
        // 变量也经过类型检查！
        { first: 10 },
      ),
  })
  // ...
}

您可以在仓库中找到一个完整的示例

从 GraphQL Code Generator 文档中的专门指南开始。