Theo's Typesafe Cult•12mo ago

tRPC not invalidating queries called on RSC

I have a Home Component RSC which fetches the data by trpc and passes it to another client component. The problem is when I mutate the data in the client component the original data isn't invalidated My best guess would be because RSC don't get re-rendered . how can I change my approach

4 Replies

adityaOP•12mo ago

const Home = async () => { const session = await getServerAuthSession(); const initialVaults = await api.vault.getAllVaults.query(); data being fetched on RSC The client component

const { mutate, isLoading } = api.vault.create.useMutation({
    onSettled: () => {
      void context.vault.getAllVaults.invalidate();
    },
  });

const { mutate, isLoading } = api.vault.create.useMutation({
    onSettled: () => {
      void context.vault.getAllVaults.invalidate();
    },
  });

Anonymous_hacker•12mo ago

Context now replaced with utils try with utils.

adityaOP•12mo ago

yeah it's with useUtils variable name is context

Rich•12mo ago

How did you get this working? I'm using t3 stack but don't seem to have utils :/ Ah I got it working in the end import { api } from "@/trpc/react"; And in the create form modal:

  const utils = api.useUtils();
  const invalidateQueries = () => utils.invalidate(queryKey);

  const createFocusList = api.focusList.addFocusList.useMutation({
    onSettled: invalidateQueries,
  });

  const utils = api.useUtils();
  const invalidateQueries = () => utils.invalidate(queryKey);

  const createFocusList = api.focusList.addFocusList.useMutation({
    onSettled: invalidateQueries,
  });

queryKey is constructed dynamically in the parent component and passed to this component via a prop

Gaming

Programming

tRPC not invalidating queries called on RSC