React-Query Prefetch query doesnt return value?

Question

const getQueryService = () => {


return {
    login: async (id): Promise<AuthLoginGoogleResponse> => {
      try {
        const result = await authApi.loginGooglePost({
          idToken: {
            id_token: id,
          },
        });
        return result;
      } catch (error) {
        console.error("Google Login Fail", error);
      }
    },
  };
};

// Mutation is only for updating and creating and deleting
const getMutationService = () => {
  return {};
};

const useGoogleLogin = () => {
  const queryClient = useQueryClient();
  const queryService = getQueryService();
  // const { data, isLoading } = useQuery('auth', queryService.login)
  const mutationService = getMutationService();

  const fetchLoginData = async (
    tokenId
  ): Promise<AuthLoginGoogleResponse | void> => {
    return await queryClient.prefetchQuery("auth", async() => {
      return await queryService.login(tokenId);
    });
  };

  return fetchLoginData;
};

I am sending token.Id to API using Post request and I am calling it from component however when I run debugger, preFetchquery is not returning the value retuned from result in getqueryservice function.

Is there a reason why preFetchQuery is not returning the return value from getQueryService.login?

According to API reference, prefetchQuery doesn't return the data: react-query.tanstack.com/reference/… "Returns Promise<void>: A promise is returned that will either immediately resolve if no fetch is needed or after the query has been executed. It will not return any data or throw any errors." — Jakub Kotrs
– Jakub Kotrs, Commented May 6, 2022 at 22:30

TkDodo · Accepted Answer · 2022-05-07 17:03:44Z

4

because that's what prefetching does. According to the docs (emphasis mine):

prefetchQuery is an asynchronous method that can be used to prefetch a query before it is needed or rendered with useQuery and friends. The method works the same as fetchQuery except that it will not throw or return any data.

So prefetchQuery just puts data in the cache so that it can be picked up later by useQuery, hence the name: pre-fetch.

If you wan to get data returned, you can use queryClient.fetchQuery instead - but you'd also need to handle errors in case the fetch fails.

To be honest, I'm not sure why you are trying to achieve though. Judging from the code, it looks like you're trying to execute a query when the user wants to login. Please keep in mind that this is not what queries are for. Logging someone in is a prime example for a mutation.

answered May 7, 2022 at 17:03

TkDodo

30.4k5 gold badges85 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Query Prefetch query doesnt return value?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related