如何使用React Query通过独立API调用结果修改现有数据

嘿，我太懂你这个场景了！社交板块里帖子默认显示几条回复，点击加载更多再拉取完整回复，这简直是现在社交产品的标配需求。用React Query来实现这个需求特别顺手，我给你一步步拆解怎么搞：

先对齐咱们的场景 #

你做的ReactJS应用里有个社交板块，用户能发动态、回复别人的动态。现在有个API返回帖子列表，每条帖子带id、内容和前2条回复；用户点按钮后，调用另一个独立API获取该帖子的所有剩余回复，然后把这些回复更新到原来的帖子数据里——完全get到了！

那咱们直接上可落地的代码方案：

第一步：初始化获取帖子列表的Query #

首先你得用useQuery把初始的帖子列表拉下来，一定要给这个Query设个唯一的queryKey（比如['posts']），这是后面能修改缓存数据的关键。代码大概长这样：

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

// 模拟你的获取帖子列表API请求
const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  return response.json();
};

function SocialFeed() {
  const queryClient = useQueryClient();
  // 拉取初始帖子列表
  const { data: posts } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

第二步：实现加载更多回复并更新现有数据 #

这里的核心是用React Query的queryClient.setQueryData方法，它能直接修改咱们之前缓存的帖子数据。我推荐用useMutation来包裹加载回复的异步操作，还能顺便处理加载状态，避免用户重复点击：

// 模拟获取单帖所有回复的API请求
const fetchAllRepliesForPost = async (postId) => {
  const response = await fetch(`/api/posts/${postId}/all-replies`);
  return response.json();
};

// 用useMutation管理加载回复的异步逻辑
const { mutate: loadAllReplies, isLoading } = useMutation({
  mutationFn: fetchAllRepliesForPost,
  // 请求成功后更新缓存里的帖子数据
  onSuccess: (fullReplies, postId) => {
    queryClient.setQueryData(['posts'], (oldPosts) => {
      if (!oldPosts) return [];
      // 找到对应的帖子，把回复替换成完整列表
      return oldPosts.map(post => 
        post.id === postId 
          ? { ...post, replies: fullReplies } 
          : post
      );
    });
  },
});

第三步：渲染帖子和加载按钮 #

最后把帖子渲染出来，给符合条件的帖子（比如当前只显示了2条回复）加上“加载更多”按钮，绑定咱们刚才写的方法：

return (
    <div className="social-feed">
      {posts?.map(post => (
        <div key={post.id} className="post-card">
          <p className="post-content">{post.content}</p>
          <div className="replies-section">
            {post.replies.map(reply => (
              <p key={reply.id} className="reply">
                {reply.content}
              </p>
            ))}
            {/* 只有当当前显示2条回复时，才显示加载按钮 */}
            {post.replies.length === 2 && (
              <button 
                onClick={() => loadAllReplies(post.id)}
                disabled={isLoading}
                className="load-more-btn"
              >
                {isLoading ? '加载中...' : '查看更多回复'}
              </button>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

export default SocialFeed;

额外唠两句 #

用useMutation的好处是它自带加载状态管理，能防止用户重复点击按钮；而setQueryData会自动触发组件重新渲染，根本不用你手动维护state，React Query会帮你把缓存和视图同步的事情搞定，特别省心。

内容来源于stack exchange