Redux ToolKit Query - сделайте несколько запросов в одном компоненте зависимыми друг от друга.

Question

Я пытаюсь использовать RTK Query в приложении NextJS для получения нескольких объектов из API. У меня есть свои и модели. Когда компонент загружается, мне нужно получить, а затем получить соответствующие s. An 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>
  )
}

Какой подходящий шаблон здесь использовать? Спасибо!

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

В качестве альтернативы вы можете использовать skipToken который также экспортируется с помощью RTK-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>
  )
}