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?

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

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

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

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