如何在同一React函数组件中使用RTK Query发起多个查询？

先解决变量重名的直接问题 #

你遇到的data变量重复声明是JavaScript语法限制，和RTK Query无关，解构时给变量重命名即可：

const { data: openIssues } = useGetAllIssuesQuery({
  type: "issues",
  name: "some-name",
  repo: "some-issue",
  query: `query-1`,
});

const { data: closedIssues } = useGetClosedIssuesQuery({
  type: "issues",
  name: "some-name",
  repo: "some-issue",
  query: `query-2`,
});

这样就能分别拿到两组数据，不会产生变量冲突。

更优方案：无需新增查询端点 #

其实你完全不需要单独添加getClosedIssues端点——两个请求只是查询字符串不同，属于同一类资源。RTK Query会根据查询参数的唯一性自动维护独立缓存条目，同一个端点用不同参数调用，不会覆盖彼此的数据。

步骤1：简化API定义 #

保留原有的查询端点即可，无需新增冗余定义：

export const createIssueApi = createApi({
  reducerPath: "issueApi", // 建议reducerPath命名和功能匹配，原名称createLabelApi不太贴合
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.github.com/repos",
    headers: {
      "Content-Type": "application/json",
      Authorization: `token ${process.env.REACT_APP_PASSWORD}`,
    }, // 公共headers可以提到baseQuery中，避免每个端点重复编写
  }),
  tagTypes: ["issues"],
  endpoints: (builder) => ({
    getAllIssues: builder.query<GetLebal[], Parameter>({
      query: ({ type, name, repo, query }) => ({
        url: `/${name}/${repo}/${type}${query}`,
        method: "GET",
      }),
      providesTags: ["issues"],
    }),
    // 删除getClosedIssues端点，无需重复定义
  }),
});

export const { useGetAllIssuesQuery } = createIssueApi;

步骤2：组件中调用同一端点，传入不同参数 #

// 获取第一组数据（示例：开放状态的issues）
const { data: openIssues } = useGetAllIssuesQuery({
  type: "issues",
  name: "some-name",
  repo: "some-issue",
  query: `?state=open`,
});

// 获取第二组数据（示例：关闭状态的issues）
const { data: closedIssues } = useGetAllIssuesQuery({
  type: "issues",
  name: "some-name",
  repo: "some-issue",
  query: `?state=closed`,
});

关键原理说明 #

RTK Query的缓存基于「查询端点+参数组合」生成唯一缓存键。只要参数不同（哪怕是同一个端点），就会被视为两个独立请求，各自缓存、互不干扰。因此你完全不用担心修改其中一个查询的参数会影响另一个已渲染的数据——它们的缓存是完全分离的。

这种方式既减少了冗余代码，又能完美实现「同时获取两组补充数据」的需求，无需拆分组件。

内容的提问来源于stack exchange，提问作者Taiwan No.1