RTK Query链式查询实现：根据帖子userId获取用户名渲染

针对你需要根据帖子的userId获取对应用户名并渲染的场景，最直接的实现方式是在组件内嵌套使用RTK Query钩子，利用RTK Query的自动缓存机制避免重复请求。以下是具体步骤和代码示例：

1. 定义API Endpoints #

首先在API切片中定义获取帖子和单个用户的查询端点：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
  endpoints: (builder) => ({
    // 获取帖子列表
    getPosts: builder.query({
      query: () => 'posts',
    }),
    // 根据userId获取用户信息
    getUser: builder.query({
      query: (userId) => `users/${userId}`,
    }),
  }),
});

export const { useGetPostsQuery, useGetUserQuery } = apiSlice;

2. 组件内实现链式查询与渲染 #

先获取帖子列表，再遍历每个帖子，用其userId发起用户查询，同时处理各阶段状态：

import { useGetPostsQuery, useGetUserQuery } from './apiSlice';

function PostsWithUsers() {
  // 第一步：获取所有帖子
  const { data: posts, error: postsError, isLoading: postsLoading } = useGetPostsQuery();

  // 处理帖子查询状态
  if (postsLoading) return <div>加载帖子中...</div>;
  if (postsError) return <div>帖子加载失败：{postsError.message}</div>;
  if (!posts) return <div>暂无帖子数据</div>;

  return (
    <div className="posts-container">
      <h2>帖子列表（含作者）</h2>
      {posts.map((post) => (
        <div key={post.id} className="post-card">
          <h3>{post.title}</h3>
          <p className="post-body">{post.body}</p>
          
          {/* 第二步：对当前帖子的userId发起用户查询 */}
          const { data: user, error: userError, isLoading: userLoading } = useGetUserQuery(post.userId);
          
          <div className="post-author">
            {userLoading && <span>加载作者信息...</span>}
            {userError && <span>作者信息加载失败</span>}
            {user && <span>作者：{user.name}</span>}
          </div>
        </div>
      ))}
    </div>
  );
}

export default PostsWithUsers;

关键说明 #

• 自动缓存优化：RTK Query会自动缓存getUser查询结果，同一个userId仅发起一次网络请求，后续渲染直接复用缓存数据。
• 状态分离处理：分别处理帖子和单个用户查询的加载、错误状态，保证UI友好性，避免单个请求失败导致组件崩溃。
• 批量查询优化（可选）：若需减少请求次数，可在getPosts的transformResponse中批量获取所需用户数据，或新增合并查询的endpoint，但嵌套钩子的方式是最简洁且符合RTK Query设计理念的方案。

内容的提问来源于stack exchange，提问作者alexius