CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxrtk-query
Oleksandr Fomin
Oleksandr Fomin

Reputation: 2356

Chain 2 queries in RTK Query

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?

Upvotes: 20

Views: 13339

Answers (4)

C RICH
C RICH

Reputation: 503

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

Upvotes: 0

phry
phry

Reputation: 44078

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

Upvotes: 23

rnwed_user
rnwed_user

Reputation: 1660

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

Upvotes: 4

BenJey
BenJey

Reputation: 257

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

Upvotes: 6

Related Questions