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