Component re-renders after state change, tRPC query not executed again?
I have a component where I render out a table. Each row has a checkbox. Each checked row can be deleted. I am using tRPC to query and paginate the data in the table and also to delete the rows using Prisma. After deleting the checked rows, I want the table to re-render and display the items minus the ones previously deleted.
Everything tRPC-ish works (I think). The component get's re-rendered after the mutation, but I the table only get's updated after I switch windows (i.e. bringing VSCode in the front, then back to Chrome). What is causing this behaviour? Am I missing something using on the tRPC side of things?
4 Replies
hard to tell without seeing the code, but it sounds like you're missing a mutation/invalidate call for the table data. tRPC/react-query calls this on window focus by default
Solution
trpc doesnt refetch on rerender
that would get expensive fast
look into invalidation and maybe even optimistic updates
I solved my issue by invalidating the query affected by the mutation using the helpers tRPC provides: https://trpc.io/docs/reactjs/usecontext#helpers
Thanks @Sturlen @cje
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...