Optimistic updates not working tRPC useQuery
So I'm currently trying to implement an optimistic data update with tRPC. I'm following the docs. So far if I just do
onSetteled it works fine and the data refetches after a second or two. Now I'm trying to implement the onMutate portion, and for some reason my queryClient.getQueryData() returns undefined, even though I'm passing it the same query that I pass invalidateQueries. Any insight on what I might be missing with the syntax?
42 Replies
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Hmm interesting, I did
And the console log is still undefined
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Sorry if it's obvious, but I don't understand the distinction between awaiting the query data and waiting for the data to come back
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
But the above example would be in the
../router/router.ts file, no?
I'm not exactly sure why queryClient.getQueryData(['userRouter.getUser']) would involve 2 queries. Aren't I just requesting the cached data from the query? And if so, why would awaiting on the .getQueryDate not be sufficient?Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Version 9.27.2
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Ya I'm looking at the docs
But isn't my client fine if
queryClient.invalidateQueries(['userRouter.getUser']) is working just fine?Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Setting query is kinda the entire point... it's intentional
https://tanstack.com/query/v4/docs/guides/optimistic-updates?from=reactQueryV3&original=https://react-query-v3.tanstack.com/guides/optimistic-updates
Optimistic Updates | TanStack Query Docs
When you optimistically update your state before performing a mutation, there is a chance that the mutation will fail. In most of these failure cases, you can just trigger a refetch for your optimistic queries to revert them to their true server state. In some circumstances though, refetching may not work correctly and the mutation error could ...
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Instead of setQueryData?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
But that behavior is already handled by onSettled: invalidateQuery.... onMutate should change it immediately and the invalidateQuery will make sure it's updated from the backend
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
XD
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
No that's just the syntax from the docs, I copy and pasted it. I'm trying to get the behavior to be correct then was gonna bother to rename everything
The problem is: why doesn't
const previousTodos = await queryClient.getQueryData(['userRouter.getUser']) return anything, just ignore the setQueryData line to make it simplerUnknown User•3y ago
Message Not Public
Sign In & Join Server To View
That's exactly it not sure how I didn't think of that lol
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
Long story short your mutation should look something like this(without the type errors ideally 😅 )
Make sure your variable names are consistent across your mutation/optimistic update and prisma model/backend, otherwise the data will obviously have different keys in your optimistic object vs the one you get back from your query
GitHub
stocks/transactions.tsx at e69c9db6f4a2b669717018b8f9c2f84ab9e92dd7...
Track all your stock purchases at one place. Contribute to juliusmarminge/stocks development by creating an account on GitHub.
That’s how I did it
I'm stumped on this one too
I have it exactly like julius now except for that I'm using v10
Here's the code
Yea there is a v10 bug with the inference there, Will be fixed next beta. For now just type it any or smth
GitHub
bug: utils.setData updaterFn has implicit any by juliusmarminge · P...
Closes #
🎯 Changes
What changes are made in this PR? Is it a feature or a bug fix?
Updates @tanstack/react-query peerDependency to ^4.3.0 and resolves a private import to fix utils.setData((prev) ...
oh that's not the issue
altho thanks
My issue is that both of those console logs show undefined
The
old in your code is implicit any
Oh thats weirdmy getData in there returns undefined yeah
and old as well
You need go give it an id right?
getLessonList.getData({ studyId })
OH
I was thinking in a totally different way about that
but that will be it I'm sure
Is the input optional or Else thats another bug that its not yelling at you
input could be an empty string
this has fixed it
Ok so it's half fixed it
GOT IT
in setData the query has to come after the callback function
Here's the final code for future reference
you can get better typing if you add a condition
like
if (prevData) { do optimistic update stuff }apparently this is not needed in v4, you can return undefined from setData and the queryCache wont be set
im not sure about trpc off the top of my head, but vanilla rq v4's getData is still typed as
TData | undefined so annoying stuff happens when you try to spread it
thats what the old: any is doing in that screenshotthe any is cause we have a bug in trpc
tk said this https://github.com/trpc/trpc/pull/2758#discussion_r976491445
but yea ofc it can be undefined in the function, but you are now able to return undefined so you dont need to do the
if (!old) return { someMockedStructure }
fyi its fixed in beta.2