reactjs - React工具包查询-如何在同一功能组件中使用多个查询

Question

您好，我一直在使用 RTK 查询在一个功能组件中获取多个数据。如果您知道出路，请帮忙。非常感谢。

我的目标我想用RTK查询获取两个api，都使用“GET”方法，基本url是相同的，唯一的区别是查询字符串。

我的问题如果我只在函数组件中设置一个查询，我就无法更改查询字符串，因为它会更改我从获取的数据中呈现的数据。

由于新的数据集为原始数据提供了信息。我无法将组件分成两部分。

我尝试过的我尝试在 RTK 代码中的原始查询下方设置另一个查询，如下所示。

export const createIssueApi = createApi({
  reducerPath: "createLabelApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://api.github.com/repos",
  }),
  tagTypes: ["issues"],
  endpoints: (builder) => ({

...... original query above, new query I set below
getClosedIssues: builder.query<GetLebal[], Parameter>({
      query: ({ type, name, repo, query }) => ({
        url: `/${name}/${repo}/${type}${query}`,
        method: "GET",
        headers: new Headers({
          "Content-Type": "application/json",
          Authorization: `token ${process.env.REACT_APP_PASSWORD}`,
        }),
      }),
      providesTags: ["issues"],
    }),
  }),
});

然后我尝试在同一个组件中使用此查询来获取 2 个 api，如下所示

 const { data } = useGetAllIssuesQuery({
    type: "issues",
    name: "some-name",
    repo: "some-issue",
    query: `query-1`,
  });
//I cannot change query-1 dynamically or else the data I rendered below will also be changed.

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

我遇到的问题是，我显然无法再次重新声明数据，但似乎 RTK 查询只允许我通过 const{data} 来解构 api 结果。

Answer 1

所有查询 Hook 都会在 Hook 返回值的 data 属性中返回获取的数据。这并不意味着您需要将其命名为data。使用解构赋值时，您还可以重命名要解构的属性。

示例:

const { data: allIssues } = useGetAllIssuesQuery(....);
const { data: closedIssues } = useGetClosedIssuesQuery(....);