问题描述
我正在尝试在 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>
)
}