WO•2y ago

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

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),
    }
  );

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",
      });
    },
  });

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",
      });
    },
  });

7 Replies

Alex / KATT 🐱•2y ago

this is what i do https://trpc.io/docs/client/react/useContext#invalidate-full-cache-on-every-mutation

useContext | tRPC

useContext is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide...

WOOP•2y ago

Thanks! I’m trying to use the useContext hook to access my queries and invalidate them in the code snippets above but it doesn’t seem to be working. I’ve tried changing my query cache time, stale time, removing the refetch function from it but still can’t get it to work properly

icy.icicle•2y ago

I am also running into this issue. I try to do any of the .invalidate() functions using the context, but it doesn't cause a rerender in the other components. I tried .refetch() too. alex / KATT 's solution fixed the issue, but I am using firebase, and a full refresh of the data is not cost effective for me.

typedef•2y ago

@icy.icicle Hi, did you find a solution? having the same issue.

icy.icicle•2y ago

@_typedef Not the most optimal solution, but check out what @alexkatt does: https://trpc.io/docs/client/react/useContext#invalidate-full-cache-on-every-mutation I hate it, but it will refetch every query on the page every time there is a mutation

useContext | tRPC

NeoBean•2y ago

i believe an idea solution would be to be able to pass an array of dependencies. Dependencies can query keys / routers

typedef•2y ago

Yep this works but I really dont want to refetch all queries in the cache. Wait so your useContext doesnt work aswell?

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

Did you find this page helpful?