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

Question

我正在尝试在 NextJS 应用程序中使用 RTK 查询从 API 获取多个实体。我有App和AppVersion型号。当组件加载时，我需要获取App然后获取适当的AppVersions。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>
  )
}