Chain 2 queries in RTK Query

Question

What is the proper way to chain queries if the 2nd query requires a parameter that is returned by the 1st?

const { data: user } = useGetUserQuery();

The user object contains an ID that is used to run

const { data: userBio} = useGetUserBioQuery(user.id);

How do I make sure the 2nd one runs only after the 1st one is fulfilled?

Counterstamp

Answer 1

You can use the skip option:

const { data: user, isFulfilled: userFulfilled } = useGetUserQuery();
const { data: userBio} = useGetUserBioQuery(user.id, { skip: !userFulfilled });

Or a skipToken:

import { skipToken } from '@reduxjs/toolkit/query/react'

const { data: user, isFulfilled: userFulfilled } = useGetUserQuery();
const { data: userBio} = useGetUserBioQuery(userFulfilled ? user.id : skipToken);

Branham

I tried it but Typescript doesn't seem to be happy with it. Is there a better way than just shut it down with the non-null assertion operator? – Counterstamp

the skipToken approach, but no destructuring of your result variable. that will keep the correlation isFulfilled => data is not undefined – Branham

Answer 2

The usage section of the RTK Query docs also provides another example on how to combine multiple requests with one single query that I found very usefull for that use case: https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#performing-multiple-requests-with-a-single-query

Frendel

Answer 3

we can use skip flag to make sure if there is user id

const { data: user } = useGetUserQuery();
const { data: userBio} = useGetUserBioQuery(user.id, { skip: !user.id });

Woeful

Answer 4

Simplifying the accepted reponse on the use of skipToken. I simply use the ?? operator to use the defined previous response or skip the query.

import { skipToken } from '@reduxjs/toolkit/query/react'

const { data: user } = useGetUserQuery();
const { data: userBio } = useGetUserBioQuery(user.id ?? skipToken);

Briannebriano