🐐GoatGuy🐐•3w ago

Optimistic updates for endpoints

Yes but this is for mutations and queries, for example if I make a request to an endpoint in convex how do I handle an optimistic update. There’s no way to access the local cache.

8 Replies

ballingt•3w ago

@🐐GoatGuy🐐 so like a Convex HTTP endpoint?

🐐GoatGuy🐐OP•3w ago

Yes

ballingt•3w ago

What would you want to do? That endpoint is going to cause a change in a query in a predictable way, and you'll like to modify the local value?

🐐GoatGuy🐐OP•3w ago

I want to send a request that sends the message to OpenAI but on my frontend I want to show the user message in the messages area even though it may not have been added to the db yet. Otherwise there’s some latency between hitting send and your message appearing in the messages section of the chat app.

ballingt•3w ago

The nice thing about mutations is we know when they fail, so we know how to roll back the optmistic update Whereas the HTTP endpoint could fail in any possible way I'd do this local optimisic update manually, something like

const [aiMessageInFlight, setAiMessageInFlight] = useState(false);
const serverMessages = useQuery(api.messages.list, {});
const messages = useMemo(() => [...serverMessages, {body: 'hello'}], [serverMessages, aiMessageInFlight]);

const [aiMessageInFlight, setAiMessageInFlight] = useState(false);
const serverMessages = useQuery(api.messages.list, {});
const messages = useMemo(() => [...serverMessages, {body: 'hello'}], [serverMessages, aiMessageInFlight]);

Convex can't understand the semantics of an HTTP endpoints, so it's not in a privledged place to implement the optimistic update; you can track it yourself and show whatever UI you need So I'd implement optimistic updates like you normally would in React without Convex, not by trying to get inside the convex query cache

🐐GoatGuy🐐OP•3w ago

I see I mean I usually use react query for that but alright I’ll give it a shot.

ballingt•3w ago

If you're a big React Query fan, note you can keep using React Query with Convex: https://docs.convex.dev/client/tanstack-query but its helpful to hear this feels like a missing feature, sounds like you'd like to be able to apply temporary changes to the query cache? So far we haven't provided a way to add your own modifications to the query cache with lifetimes different than mutations, but making optimistic updates more plugable is something we've thought about, especially alongside potential future changes to more local-first-style syncing It's tricky because optimistic updates associated with mutations stack up and then are removed one by one, vs with your own optimistic update you'd be more responsible for its lifecycle

🐐GoatGuy🐐OP•2w ago

Sorry for the late response. Yea i feel liek this is a missing feature. In my current react query code i do this where in the onMutate i automatically add the message to the message box even though it hasn't been added to the DB yet. Not sure how to do that here without using react state since i access the TanStack query cache to do this.

Optimistic updates for endpoints

Did you find this page helpful?