如何在 react-query 中进行依赖查询？

Question

我有一个名为 Sidebar.tsx 的组件，它正在此处获取一些数据，但我只想在 studentId 可用时才获取级别。我查看了 react-query documentation 上的相关查询。我在我的代码中应用了它，但它看起来不起作用。这是我所做的。

首先，我也从 API 中获取了 studentId，这是它的样子：

  const studentId = intakeProgramStore.getStudentShipByUserId(authUser?.id)
.data?.data.data[0];

新增获取节目的功能

class IntakeProgramStore{

  getIntakeProgramsByStudent(studentId: string) {
    return useQuery(
      ['intakeProgram/studentId', studentId],
      () => intakeProgramService.getIntakeProgramsByStudent(studentId),
      { enabled: !!studentId },
    );
  }
}

export const intakeStore = new IntakeProgramStore();

这个函数位于 stores/intake.store.ts 中，它的作用是当它被调用时调用一个名为 intakeProgramService.getIntakeProgramsByStudent 的服务方法，该方法也在顶部导入并且按预期工作正常。我在这里遇到的问题是，它正在调用该服务，即使 studentId 未定义，而它应该在它有值时调用它。

这是我在 Sidebar.tsx 中调用它的方式，这是我的 UI 组件

 const programs = intakeProgramStore.getIntakeProgramsByStudent(student.id)
.data?.data.data[0];

我将 stores/intake.store.ts 文件中的代码移到了 Sidebar.tsx 中，现在它工作正常，但我不知道为什么。这是它的样子

const programs = useQuery(
['intakeProgram/studentId', student?.id],
() => intakeProgramService.getIntakeProgramsByStudent(student?.id),
{ enabled: !!student

我不确定为什么当我在商店内取货时它不起作用，但当我在 UI 组件中取货时它可以工作。

Answer 1

一般来说，您的代码看起来是正确的。我可以看到的唯一一件事是，在第一个示例中，您在名为 getIntakeProgramsByStudent 的函数中调用 useQuery，这是一个无效的挂钩调用。钩子只能调用：

按功能反应组件
inside custom hooks，它们是以 use....

另请参阅 rules of hooks React 文档。

您的 useQuery 调用的自定义挂钩是：

export const useIntakeProgramsByStudent(studentId: string) {
  return useQuery(
    ['intakeProgram/studentId', studentId],
    () => intakeProgramService.getIntakeProgramsByStudent(studentId),
    { enabled: !!studentId },
  );
}

如何在 react-query 中进行依赖查询？

How do I make dependent queries in react-query?

javascript

reactjs

react-query