How to get data in dependent querys?

[ZahraMirzaei]

Scenario:

I have a web application when the user clicks on signin/signup button and goes to signin page, the user should sign in with a google account. then If the user had already registered and had a username, should redirect to the home page, else redirect to signup page.

Description with code:

userId service:

services/userId.ts
----------------------------------------------------------------------------------------------------------------------------------------------------
import { createApi } from "@reduxjs/toolkit/query/react";
import { HYDRATE } from "next-redux-wrapper";

import { httpBaseQuery } from "@/libs/rtk-query-http";
import { HTTP_HOST } from "@/utils/constant";

const userIdApi = createApi({
    baseQuery: httpBaseQuery({
      baseUrl: `${HTTP_HOST}/api/google`,
    }),
    endpoints: (builder) => ({
      find: builder.mutation<UserId, UserIdRequest>({
        invalidatesTags: [{ type: "UserInfo", id: "LIST" }],
        query: (payload: UserIdRequest) => ({
          body: JSON.stringify(payload),
          method: "POST",
          url: `/callback`,
        }),
      }),
    }),
    extractRehydrationInfo: (action, { reducerPath }): any => {
      if (action.type === HYDRATE) {
        return action["payload"][reducerPath];
      }
    },
    reducerPath: "userIdApi",
    tagTypes: ["UserId"],
  }),
  {
    endpoints: { find },
    useFindMutation,
    util: { getRunningOperationPromises },
  } = userIdApi;

export default userIdApi;

export { find, getRunningOperationPromises, useFindMutation };

userInfo service:

services/user-info.ts
----------------------------------------------------------------------------------------------------------------------------------------------------
import { createApi } from "@reduxjs/toolkit/query/react";
import { HYDRATE } from "next-redux-wrapper";
import { httpBaseQuery } from "@/libs/rtk-query-http";
import { HTTP_HOST } from "@/utils/constant";

const userInfoApi = createApi({
    baseQuery: httpBaseQuery({
      baseUrl: `${HTTP_HOST}/api/v1/user_info`,
    }),
    endpoints: (builder) => ({
      getUserInfo: builder.query<UserInfo, UserInfoRequest>({
        providesTags: (result, _error, _arg) =>
          typeof result === "undefined"
            ? [{ id: "ONE", type: "UserInfo" }]
            : [{ id: result.id, type: "UserInfo" }],
        query: (payload: UserInfoRequest) => `/${payload.id}`,
      }),
      updateUserInfo: builder.mutation<
        UpdatedAtResponse,
        UpdateUserInfoRequest
      >({
        invalidatesTags: ["UserInfo"],
        query: (payload: UpdateUserInfoRequest) => ({
          body: JSON.stringify(payload.userInfoUpdate),
          method: "PATCH",
          url: `/${payload.id}`,
        }),
      }),
    }),
    extractRehydrationInfo: (action, { reducerPath }): any => {
      if (action.type === HYDRATE) {
        return action["payload"][reducerPath];
      }
    },
    reducerPath: "userInfoApi",
    tagTypes: ["UserInfo"],
  }),
  {
    endpoints: { getUserInfo, updateUserInfo },
    useGetUserInfoQuery,
    useUpdateUserInfoMutation,
    util: { getRunningOperationPromises },
  } = userInfoApi;

export default userInfoApi;

export {
  getRunningOperationPromises,
  getUserInfo,
  updateUserInfo,
  useGetUserInfoQuery,
  useUpdateUserInfoMutation,
};

A part of signin page:

pages/signin.tsx 
----------------------------------------------------------------------------------------------------------------------------------------------------
 const [getUserId, userIdResponse] = useFindMutation({
        fixedCacheKey: USER_ID_CACHE_KEY,
      });
const [userId, setUserId] = useState("");
const { data: userInfo } = useGetUserInfoQuery({
        id: userId,
      });
const router = useRouter();
const dispatch = useAppDispatch();

    function idTokenCallback(response: any) {
      dispatch(setCredential(response.credential));
      dispatch(setClientId(response.client_id));

      getUserId({
        client_id: response.client_id,
        credential: response.credential,
      })
        .then(async (response) => {
        // Here I want to get userInfo and check if user is registered, if yes redirect to home, else redirect to signup page.}

            if ("data" in response) {
            setUserId(response.data.userId);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }

    useEffect(() => {
      google.accounts.id.initialize({
        callback: idTokenCallback,
        client_id: CLIENT_ID,
      });
    }, [userId]);

As I mentioned above in .then part, I want to get userId there and then fetch userInfo, and check if user registers or not.
but after call getUserId, in .then part when I check userInfo its undefined. Based on my search it may be can be solved by Manual Cache Updates but I'm not sure.
Please guide me, on how to solve this problem.

[phryneas]

Why do you want to call a useState setter for userId when you can use it from the useQuery hook?
Oh, and you might want to skip useGetUserInfoQuery until you have a result from useFindMutation

const [getUserId, userIdResponse] = useFindMutation({
  fixedCacheKey: USER_ID_CACHE_KEY,
});

const { data: userInfo } = useGetUserInfoQuery(
  {
    id: userId,
  },
  {
    skip: !userIdResponse.isSuccess,
  }
);

const userId = userInfo.userId; // or something like that