Best pattern for mutation after query
I'm simplifying my use case quite a bit but essentially on page load, I'd like to update the user's stats at specific intervals (week, month, etc).
I understand that I can't call a mutation within a query, and I've read another support ticket Mutations Inside Queries where the suggestion was to simply invoke a mutation.
This will work but given that a significant portion of the user's view will be dependent on the results from this mutation, this feels a little hacky as I'm incorporating useEffect + some state to fetch the data, while also having to setup a separate query in order to see the data in realtime. I'll also have to add some code to deal with a potential flicker since the order of operations is results from query, then results from mutation.
Not a big deal, but curious whether there's a better paradigm?
2 Replies
What do you mean by "a significant portion of the user's view will be dependent"? The query depends on this mutation having run / returns different data depending on the results of this mutation?
If this is the case, generally the simplest thing to do is to block loading the query + rendering the app on the mutation. With a good loading screen + good optimistic update, this is often a pretty reasonable experience for the end user.
This isn't the most performant pattern, so there are more complex options of returning some data in the mutation, then running the query, and swapping out the mutation's returned data for the result from
useQuery so you get the live updates (sounds like that's what you're doing already?).
The example coming to my mind is something like getOrCreateUser which would be a mutation you want to run before loading most of the data. In most cases, I've been pretty fine with just blocking on the mutation before rendering the rest of my app.Yeap no worries, i went with the same approach.
It just felt a bit hacky hence wanted to double check with the team/community whether I was approaching this optimally.
Thank you for the validation!