Redux ToolKit Query - Make multiple queries in the same component dependant on each other

Question

I'm trying to use RTK Query in a NextJS app to fetch multiple entities from an API. I have the App and AppVersion models. When the component loads I need to fetch the App and then fetch the appropriate AppVersions. An App has the currentVersionId property that links to and AppVersion.

The code fails because the component is rendered without the router at first, it can't get an app and there's no app.currentversionId.

I have two slices that fetch the appropriate objects from a 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>
  )
}

What is the appropriate pattern to use here? Thank you!

phry · Accepted Answer · 2021-06-15 20:49:46Z

6

Use the skip option :)

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

Alternatively you could use the skipToken that is also exported by RTK-Query (this approach might play better with 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>
  )
}

answered Jun 15, 2021 at 20:49

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux ToolKit Query - Make multiple queries in the same component dependant on each other

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related