21、深入探索 React Query 与 GraphQL API 的交互

深入探索 React Query 与 GraphQL API 的交互

1. 使用 React Query

1.1 React Query 无缝渲染数据

React Query 能让组件无缝渲染旧数据，并在获取新数据后重新渲染。接下来，我们将重构博客文章页面，在向 API 发送新博客文章时使用 React Query。

1.2 使用 React Query 更新数据

要将新博客文章的保存操作改为使用 React Query 突变，可以在 PostsPage.tsx 中执行以下步骤：
1. 更新 React Query 导入 ：

import {
  useQuery,
  useMutation,
  useQueryClient,
} from '@tanstack/react-query';

useMutation 钩子用于执行突变操作， useQueryClient 钩子可获取组件使用的 queryClient 实例，以便访问和更新缓存数据。
2. 添加 useMutation 调用 ：

const {
  isLoading,
  data: posts,
  isFetching,
} =