implement optimistic updates for a paginated query
How can we implement optimistic updates for a paginated query? Does anyone have an example?
9 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
This thread should be helpful: https://discord.com/channels/1019350475847499849/1222196131069558926
In the end, it turns out that you cannot add anything to a paginated query; you can only modify the existing data, and that's it.😕
Yeah currently
If you can share a little more on your use case or what you're trying to do, there may be a creative workaround.
A chatroom where you want to show a loading indicator for a new message being sent to the server, implement a load more feature, and other functionalities.
Pasginated queries already support load more and loading status. For optimistically updating, I would use react state to show sent messages while awaiting the mutation.
Yes, initially, I implemented a paginated query for loading more, but I faced issues with optimistic updates. So, I switched to a normal query that takes two arguments, take and limit, which made implementing optimistic updates easier. Regarding your suggestion, could you provide an example code? For instance, handling the case of sending multiple messages in a short period.
I quote abldxtr001, an example would be interesting. In particular I'd be interested in how to achieve that without flash of content
Off the top of my head, I might do something like:
- add a field to the messages table to hold a local key, created by the client (probably a uuid)
- when a new message is sent, add a copy to a separate react state array, including the message and the local key
- instead of rendering the paginated query results directly, create your own state array in the component and use a hook to update the state array when the paginated query result changes
- whenever the hook runs, also check the local sent messages array and remove any messages present in the paginated query result, matching against the local key
Then just always render the sent messages after the paginated query results, and they'll drop off as the actual sent messages appear in the results.