Create query for result returned from a mutation
I am using React-Query and Supabase to build a multi-step form. In the first step of the form performs an insert into a table and then returns the row. I want to cache this returned row but ensure that this row isn't duplicated if the same user wishes to fill out this form again. How would I achieve this? Apologies if I haven't articulated the issue clearly enough.
11 Replies
flat-fuchsia•3y ago
This might require putting the resulting row in your own state/context (outside of react query). Unless you have a GET API that would return that row (like
getTodo after createTodo).blank-aquamarineOP•3y ago
Was considering doing that. I'm using zustand to manage global state where react query is insufficient.
That you for the response @julien and apologies for the delayed reply.
I am using Next.js, so it wouldn't be too difficult create a route to do that. However, I'm struggling to wrap my head around how I would ensure that the row that was just created is the one that is returned.
like-gold•3y ago
You probably don't need to derive additional state to do this. Assuming you're updating a cache entry as part of the form submission mutation, you can iterate over the rows in the cache to determine if the new row a user is attempting to add is a duplicate
blank-aquamarineOP•3y ago
The idea is that a mutation occurs when the user clicks the "Next" button in the wizard, but not when they click back. On the first step, an insert is performed, upon which the row that is returned from the supabase insert function would be cached. All subsequent mutations as the user progresses through the form would indeed be updating the cache entry.
Sorry if this is a stupid question, but it isn't clear to me how I would do this.
I am a fairly novice programmer that is still learning the library
Further assistance would be greatly appreciated
like-gold•3y ago
You can either look at the query data directly if it's in scope or call
queryClient.getQueryData and then Array.some over it to check if it's a duplicateblank-aquamarineOP•3y ago
in the event of multiple incomplete entries, how would I figure out which one to update? The scenario I'm getting at here is one where the user makes two passes through the form after accidentally closing browser window/tab midway through the first pass perhaps. Would it be as simple as checking a created_at and/or updated_at field in all cache entries for the most recent one?
like-gold•3y ago
You wouldn't update anything, you'd just check if the row they're attempting to add is a duplicate at submission
blank-aquamarineOP•3y ago
Ok, makes sense.
One last thing
How would I cache the return value from the initial mutation? Do I call useQuery on onSuccess?
like-gold•3y ago
blank-aquamarineOP•3y ago
thank you very much
like-gold•3y ago
No worries :reactquery: