How to refetch data for a query when a mutation is performed in a different component?

Question

To give a quick explanation of what I’m trying to do, I’m creating a system where a user can request to join a group and then the admins can accept or decline the request. I've tried following the docs for invalidating a single query but it seems to not be working in my case.

Component A is fetching the request status on the user side through a useQuery on one of my tRPC procedures.

Component A (checking request status on user side)

import { api } from "~/utils/api";

const {
    data: joinRequestStatus,
    isLoading: isLoadingJoinRequestStatus,
    refetch: refetchJoinRequestStatus,
  } = api.leagueUserManagement.getJoinRequestStatus.useQuery(
    {
      leagueSlug: league.leagueSlug,
    },

{
      queryKey: [
        "leagueUserManagement.getJoinRequestStatus",
        { leagueSlug: league.leagueSlug },
      ],
      staleTime: 5 * (60 * 1000),
      cacheTime: 10 * (60 * 1000),
    }
  );

Component B performs a mutation (accept or decline) on the admin side from one of my tRPC procedures and I want it to immediately update the request status that the user sees in Component A after the admin accepts or declines.

Component B (declining the request on admin side)

import { api } from "~/utils/api";

const utils = api.useContext();

const { mutate: declineJoinRequest, isLoading: isLoadingDeclineJoinRequest } =
  api.leagueUserManagement.declineJoinRequest.useMutation({
    onSuccess: async () = {
      toast({
        title: "Success",
        description: "Join request declined",
        variant: "success",
      });
      await refetchJoinRequests();
      await utils.leagueUserManagement.getJoinRequestStatus.invalidate();
    },
    onError: (error) = {
      toast({
        title: "Error",
        description: error.message,
        variant: "error",
      });
    },
  });
`

How to refetch data for a query when a mutation is performed in a different component?

Looking for more? Join the community!