Ivo Comments - Answer Overflow

Ivo

•Created by ibrahimyaacob on 10/19/2023 in #questions

with trpc, how to invalidate query only when there's the query cached exist?

when you invalidate some query by default all places that uses this query will be refetched, this should be the expected behavior, right ? if you don't want to refetch, just avoid the .invalidate()

3 replies

TTCTheo's Typesafe Cult

•Created by gsemyong on 10/21/2023 in #questions

Caching and invalidation in t3-stack with app router and trpc

in your react application, after you call your mutation you can do something like:

import { trpc } from "@/app/_trpc/client";

export const Documents = () => {
  const utils = trpc.useContext();
  const { data: documents, isLoading } = trpc.documents.getDocuments.useQuery();
  const { mutate: update } = trpc.documents.updateDocument.useMutation({
    onSuccess: () => {
      utils.documents.getDocuments.invalidate();
    },
  });
  
  const handleClick = () => {
    update({id: 1, title: 'new title'})
  }
  
  return (
    <div>
      <ListOfDocuments documents={documents}/>
      <button onClick={handleClick}> mutate </button> 
    </div>
  )
}

import { trpc } from "@/app/_trpc/client";

export const Documents = () => {
  const utils = trpc.useContext();
  const { data: documents, isLoading } = trpc.documents.getDocuments.useQuery();
  const { mutate: update } = trpc.documents.updateDocument.useMutation({
    onSuccess: () => {
      utils.documents.getDocuments.invalidate();
    },
  });
  
  const handleClick = () => {
    update({id: 1, title: 'new title'})
  }
  
  return (
    <div>
      <ListOfDocuments documents={documents}/>
      <button onClick={handleClick}> mutate </button> 
    </div>
  )
}

9 replies

Gaming

Programming