reactjs - Redux ToolKit Query - 在同一个组件中进行多个相互依赖的查询

Question

我正在尝试在 NextJS 应用程序中使用 RTK Query 从 API 获取多个实体。我有App和AppVersion模型。当组件加载时，我需要获取App然后获取适当AppVersion的 s。AnApp具有currentVersionId链接到 和 的属性AppVersion。

代码失败是因为组件最初是在没有路由器的情况下呈现的，它无法获取应用程序并且没有app.currentversionId.

我有两个从 RESTful API 获取适当对象的切片。

function AppsShow() {
  const router = useRouter()
  const { id } = router.query
  const { data: app } = useGetAppQuery(parseInt(id, 10)) // from RTK Query slice
  const currentVersion = useGetVersionQuery(app?.currentVersionId) // from RTK Query slice

  return (
    <div></div>
  )
}

在这里使用什么合适的模式？谢谢！

Answer 1

使用skip选项:)

function AppsShow() {
  const router = useRouter()
  const { id } = router.query
  const { data: app } = useGetAppQuery(parseInt(id, 10)) // from RTK Query slice
  const currentVersion = useGetVersionQuery(app?.currentVersionId, { skip: !app?.currentVersionId })

  return (
    <div></div>
  )
}

或者，您可以使用skipTokenRTK-Query 也导出的（这种方法可能会更好地使用 TypeScript）

function AppsShow() {
  const router = useRouter()
  const { id } = router.query
  const { data: app } = useGetAppQuery(parseInt(id, 10)) // from RTK Query slice
  const currentVersion = useGetVersionQuery(app?.currentVersionId ?? skipToken)

  return (
    <div></div>
  )
}