T
TanStack•3y ago
metropolitan-bronze

Prevent nested requests using setQueryData

Hello. I've logged in user in the top of app and manually set user data to user's query cache with queryClient.setQueryData(userKey, user) And I don't expect additional requests in nested components which included useUserQuery with same key. But nested components send another request. Hot to prevent it? Do I do something wrong? I would like to combine two custom hook with query (login and fetching user) but I don't know how. That's why I put cache manually.
8 Replies
metropolitan-bronze
metropolitan-bronzeOP•3y ago
Here is what I'm trying to do: 
async function authEnterFn({ idToken }: { idToken: string }) {
  const { token } = await signUp({ idToken });

  const user = await usersRetrieve();
  return { token, user };
}

export const useAuthEnterMutation = ({
  onSuccess,
  ...options
} = {}) => {

  return useMutation({
    mutationFn: authEnterFn,
    mutationKey: auth.signup,

    onMutate: () => {
      tokensManager.clear();
    },

    onSuccess: (data, vars, ctx) => {
      const { action, user } = data;


      queryClient.setQueryData(users.retrieve, user);

      onSuccess && onSuccess(data, vars, ctx);
    },

    ...options,
  });
};
async function authEnterFn({ idToken }: { idToken: string }) {
  const { token } = await signUp({ idToken });

  const user = await usersRetrieve();
  return { token, user };
}

export const useAuthEnterMutation = ({
  onSuccess,
  ...options
} = {}) => {

  return useMutation({
    mutationFn: authEnterFn,
    mutationKey: auth.signup,

    onMutate: () => {
      tokensManager.clear();
    },

    onSuccess: (data, vars, ctx) => {
      const { action, user } = data;


      queryClient.setQueryData(users.retrieve, user);

      onSuccess && onSuccess(data, vars, ctx);
    },

    ...options,
  });
};
absent-sapphire
absent-sapphire•3y ago
Are you seeing a background refetch because staleTime defaults to zero?
metropolitan-bronze
metropolitan-bronzeOP•3y ago
Yes, I see refetch in background
absent-sapphire
absent-sapphire•3y ago
well then that is your answer
metropolitan-bronze
metropolitan-bronzeOP•3y ago
May you suggest please how should I organaze it? I would like to combine two queries to prevent this refetch but I don't know how to do it...
absent-sapphire
absent-sapphire•3y ago
setting staleTime is your best bet. Have you read: https://tkdodo.eu/blog/react-query-as-a-state-manager
React Query as a State Manager
Everything you need to know to make React Query your single source of truth state manager for your async state
metropolitan-bronze
metropolitan-bronzeOP•3y ago
I'm not sure the problem is really in stale time... The problem is if I put data to cache manually with queryClient then query on the top child triggers once. Next to that query works fine and just subscribe to cache store without any requests. I don't understand why this queryClient.setQueryData(userKey, user) don't prevent children's refetch when regular useQuery(userKey...) does it well.
absent-sapphire
absent-sapphire•3y ago
not sure what you're talking about - showing a codesandbox reproduction would be helpful

Did you find this page helpful?