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

【问题标题】：Redux ToolKit Query - Make multiple queries in the same component dependant on each otherRedux ToolKit Query - 在同一个组件中进行多个相互依赖的查询
【发布时间】：2021-08-31 16:03:06
【问题描述】：

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

代码失败是因为组件一开始是在没有路由的情况下渲染的，无法获取应用，也没有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>
  )
}

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

【问题讨论】：

标签： reactjs next.js redux-toolkit rtk rtk-query

【解决方案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>
  )
}

您也可以使用同样由 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>
  )
}

【讨论】：