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

如何解决Redux ToolKit 查询 - 在同一组件中进行多个相互依赖的查询

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

这里使用的适当模式是什么？ 谢谢！

解决方法

使用 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>
  )
}

或者，您也可以使用 RTK-Query 导出的 skipToken（这种方法可能与 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>
  )
}