14

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?

Oleksandr Fomin
  • 2,005
  • 5
  • 25
  • 47

3 Answers3

15

You can use the skip option:

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

Or a skipToken:

const { data: user, isFulfilled: userFulfilled } = useGetUserQuery();
const { data: userBio} = useGetUserBioQuery(userFulfilled ? user.id : skipToken);
phry
  • 35,762
  • 5
  • 67
  • 81
  • 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? – Oleksandr Fomin Oct 09 '21 at 09:34
  • 2
    the skipToken approach, but no destructuring of your result variable. that will keep the correlation isFulfilled => data is not undefined – phry Oct 09 '21 at 20:23
3

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

BenJey
  • 127
  • 9
2

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 });
rnewed_user
  • 1,386
  • 7
  • 13