Theo's Typesafe Cult•13mo ago

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

Hi guys, can someone explain what is the correct way to do invalidation with app router and trpc? Is there even such a way? I am talking about the use case where I have a server component fetching data with trpc query and a client component firing a mutation which make the data from the previous render obsolete

6 Replies

Ivo•13mo ago

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

SNICKER•13mo ago

In my t3 app with app router when I invalidate a api call it makes my page refresh , this is happening only in dev and not in production 😅 .Any idea ? This is the link to the code repo : https://github.com/sohan9819/devloop

  const createPost = api.post.create.useMutation({
    onSuccess: () => {
      router.refresh();
      setTitle("");
      setContent("");
      void utils.post.getAll.invalidate(); // Invalidating
    },
  });

  const createPost = api.post.create.useMutation({
    onSuccess: () => {
      router.refresh();
      setTitle("");
      setContent("");
      void utils.post.getAll.invalidate(); // Invalidating
    },
  });

In this I am revalidating the post.getAll whenever a new post is created and it refreshes the entire app when a new post is created.

GitHub

GitHub - sohan9819/devloop: A platform to connect developers

A platform to connect developers. Contribute to sohan9819/devloop development by creating an account on GitHub.

gsemyong•13mo ago

Dude, it’s just regular client side fetching with trpc, that’s not what my question was about Basically using trpc with RSC is a mess and should be avoided IMHO (at least in the current state of things)

!Stan_---__-•13mo ago

i dont think u can invalidate a server query, that should only be run once on the server. You can try passing the data from the server query to your client component, => create another query via the client api and useQuery ,then use that data passed from the server (in the client comp props) as the initalData prop in the useQuery

Steve Melons•12mo ago

This works perfectly! But is this the "correct" way to go? This does not seem like a niche Problem.

!Stan_---__-•12mo ago

I saw it in a Jack Herrington video that came out not long ago about using trpc in app router

Gaming

Programming

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