queryClient.invalidateQueries() does not clear the queryCache

[EdmundMai]

Describe the bug
queryClient.invalidateQueries() is not clearing the queryCache.

Even after invalidating all queries, when I make a 2nd request using useQuery, it uses the cached response instead of making a new request.

To Reproduce
Steps to reproduce the behavior:

Mutation that triggers the invalidation:

const MyButton = () => {
  const history = useHistory();
  const queryClient = useQueryClient();
  const {
    mutate,
    is_loading,
  } = useMutationAutomaticallyActivateFundingSource({
    onSuccess: async () => {
      console.log('queryClienttttttttttttt before', queryClient);  // <===============
      await queryClient.invalidateQueries();
      console.log('queryClienttttttttttttt after', queryClient);     // <=============== shows that the queryCache has not changed
      history.push('/banking/settings');
    },
    onError: () => Message.error('An error occurred. Please try again.'),
  });

  return (
    <Button onClick={() => mutate()} loading={is_loading}>
      <span>Link External Account</span>
    </Button>
  );
};

export default MyButton;

Page that makes the query:

const BankingSettingsPage = () => {
  const {
    data: benefit_bank_account_data,
    refetch: refetchBenefitBankAccount,
    is_loading,
  } = useQueryBenefitBankAccount();

  if (is_loading) {
    return <div>Loading...</div>;
  }

  const { benefit_bank_account } = benefit_bank_account_data;

  console.log('xxxxxxxxxxxxxxxxxxx', benefit_bank_account);     // <=============== this prints the stale response
  if (benefit_bank_account) {
    return (
      <BankingSettings
        benefit_bank_account={benefit_bank_account}
        refetchBenefitBankAccount={refetchBenefitBankAccount}
      />
    );
  }

  return <div>Please create a bank account.</div>;
};

my query hook:

import { useQuery } from 'react-query';
import * as BenefitBankAccountApi from 'apis/benefitBankAccount';

const getBenefitBankAccount = async () => {
  const {
    data: { benefit_bank_account },
  } = await BenefitBankAccountApi.getBenefitBankAccount();
  return { benefit_bank_account };
};

const useQueryBenefitBankAccount = () => {
  const {
    data,
    isLoading: is_loading,
    refetch,
  } = useQuery('getBenefitBankAccount', () => getBenefitBankAccount());

  return {
    data,
    is_loading,
    refetch,
  };
};

export default useQueryBenefitBankAccount;

Expected behavior
I expect for the cache to be cleared, and for a 2nd new network request to be made when visiting the page.

Screenshots

Desktop (please complete the following information):
Mac
"react-query": "^3.13.0",

[TkDodo]

queryClient.invalidateQueries() is not clearing the queryCache.

that is not what invalidation is supposed to do. As you can see here: https://react-query.tanstack.com/guides/query-invalidation invalidation merely marks queries as stale and refetches them.

Maybe queryClient.removeQueries is what you are looking for?

[EdmundMai]

Hi @TkDodo ! Thanks for responding!

This is my expected flow:

1. User visits "/banking/settings" (which uses useQuery('getBenefitBankAccount', () => getBenefitBankAccount()) to make a GET request)
2. User goes to "/foobar" to submit a form using a mutation. onSuccess I want it to mark the getBenefitBankAccount query from step Bump eslint-utils from 1.3.1 to 1.4.2 #1 as stale and then get redirected to "/banking/settings"
3. Repeat step Bump eslint-utils from 1.3.1 to 1.4.2 #1, and I should see a 2nd GET request in the network tab

I just tried queryClient.removeQueries and it worked!

Would you mind explaining why I wouldn't use invalidateQueries instead? Is invalidating queries more for just marking it as stale and showing something "The data is out of date, please refresh"? Wondering when I should choose removeQueries vs. invalidateQueries

[TkDodo]

invalidation is like a smart refetch. active, stale queries are refetched and inactive or fresh queries are marked as stale so that they are refetched the next time they are used.

I don't know your specific setup, but using invalidateQueries('getBenefitBankAccount') should trigger the network request. you would still see the stale data, so you get a background refetch. removing the query results in a new hard loading state, so completely different ux. you could also try queryClient.refetchQueries, but invalidation should actually work.

i'm happy to take a look at a codesandbox example if you provide one.