GraphQL
由于 React Query 的获取机制不可知地(agnostically)建立在 Promises 上，因此您可以将 React Query 与字面上的任何异步数据获取客户端（包括 GraphQL）一起使用！
请记住，React Query 不支持归一化缓存。 尽管绝大多数用户实际上并不需要归一化缓存，甚至没有像他们认为的那样受益，但是在极少数情况下可能需要这样做，因此请务必先与我们联系。 以确保它是你所需要的真正的东西！
类型安全的代码生成
React Query 和 graphql-request^5、GraphQL Code Generator 一起使用时，可以提供全量的类型安全的 GraphQL 操作:
TypeScript
1import request from "graphql-request";2import { useQuery } from "@tanstack/react-query";3 4import { graphql } from "./gql/gql";5 6const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ `7 query allFilmsWithVariablesQuery($first: Int!) {8 allFilms(first: $first) {9 edges {10 node {11 id12 title13 }14 }15 }16 }17`);18 19function App() {20 // `data` is fully typed!21 const { data } = useQuery({22 queryKey: ["films"],23 queryFn: async () =>24 request(25 "https://swapi-graphql.netlify.app/.netlify/functions/index",26 allFilmsWithVariablesQueryDocument,27 // variables are type-checked too!28 { first: 10 }29 ),30 });31 // ...32}例子的全量代码(仓库)
有关 GraphQL 类型，请参阅关于 GraphQL 代码生成器文档的专用指南