tRPC, query invalidation is not working
This is the code I have inside the component
const utils = trpc.useContext()
const students = trpc.student.getAll.useQuery()
const addStudentTRPC = trpc.student.add.useMutation({
onSuccess() {
utils.student.getAll.invalidate()
},
})
The mutation works fine but it doesn't invalidate the queries on success. I tried fetch(), refetch() and they don't work either. What am I missing?
Thanks!9 Replies
have you awaited?
Yes, still doesn't work :/
const utils = trpc.useContext()
const students = trpc.student.getAll.useQuery()
const addStudentTRPC = trpc.student.add.useMutation({
onSuccess() {
utils.student.getAll.invalidate()
},
})
const handleAddStudent = async (values: any) => {
await addStudentTRPC.mutate({
studentFirstName: values.studentFirstName,
studentLastName: values.studentLastName,
studentDateOfBirth: values.studentDateOfBirth,
userId: values.teacher,
})
}you can add the devtools and check what is going on
if the query is at least being called
Devtools | TanStack Query Docs
Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳
When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!
Yes, the query is being fetched. Oddly enough, it always shows as "Stale"
its the correct behaviour
rq by default have some aggressive caching
you can trigger the mutation and check if the query is being invalidated and refetched
It looks like the invalidate() is being called
Probably you just need to wait then
thanks for this! read it, checked my code, facepalmed 🙂