如何从同一个组件调用同一个查询？

Question

我的查询设置如下：

   ...
   doesProjectExist: build.query({
     query: (projectNumber) => ({
     url: `${URL}/exists/${projectNumber}`,
     method: "GET",
   }),
...

export const {
  useDoesProjectExistQuery
} = projectsSlice;

当用户选择一个项目时，将调用此查询以查看它是否存在。

  const {
    data: existingProject,
    isLoading: isLoadingExistingProject,
    isSuccess: isSuccessExistingProject,
  } = useDoesProjectExistQuery(
    projectToCheckIfExists ? projectToCheckIfExists.projectNumber : skipToken
  );

  useEffect(() => {
    console.log("Existing Project", existingProject);
    console.log("Loading Existing Project", isLoadingExistingProject);
    console.log("Success Existing Project", isSuccessExistingProject);
  }, [existingProject, isLoadingExistingProject, isSuccessExistingProject]);

使用效果吐出结果3次，其中2次显示isSuccess = true，但1次existing project为true，1次为false，无法评估。

如果我将查询更改为突变并像这样解构挂钩：

  const [doesProjectExist, { isLoading }] =
    useDoesProjectExistMutation(skipToken);

我可以随意调用 doesProjectExist 并解包结果。有没有办法直接调用和解包查询？使用突变似乎是错误的。我觉得我错过了一些简单的东西！

Answer 1

我想这是预期的行为。当您将 isLoadingExistingProject 和 isSuccessExistingProject 都设置为 false 时的情况 - 很可能是您通过 skipToken 时的情况，因为 projectToCheckIfExists 可能是 undefined 在生命周期变化期间。

为了更清楚地调查它，尝试做一些更直接的事情：

const {
    data: existingProject,
    isLoading: isLoadingExistingProject,
    isSuccess: isSuccessExistingProject,
  } = useDoesProjectExistQuery(
     projectToCheckIfExists?.projectNumber, 
     { skip: !projectToCheckIfExists}
  );

useDoesProjectExistQuery 可能不会期望参数中有 undefined，但是你可以让它处理 undefined，或者像 projectToCheckIfExists?.projectNumber ?? 0 这样对参数添加一些空检查，由于 skip 条件，它永远不会通过。

不如您使用 skipToken 的符号清晰，但它应该更易于预测。

如何从同一个组件调用同一个查询？

How do I call the same query from the same component?

rtk-query