TTC
Theo's Typesafe Cult•14mo ago
aditya

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
aditya
adityaOP•14mo 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
Anonymous_hacker•14mo ago
Context now replaced with utils try with utils.
aditya
adityaOP•14mo ago
yeah it's with useUtils variable name is context
Rich
Rich•13mo 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

Did you find this page helpful?