jamalsoueidan•4mo ago

OptimisticUpdate

I'm using action to first send a post to third party service and then inserting into DB, the question is how to use the optimistic on the frontend, to insert into the localstorage? //getData

const { results, status, loadMore } = usePaginatedQuery(
    api.message.paginate,
    { conversation: conversationId as Id<"conversation"> },
    { initialNumItems: 25 }
  );

const { results, status, loadMore } = usePaginatedQuery(
    api.message.paginate,
    { conversation: conversationId as Id<"conversation"> },
    { initialNumItems: 25 }
  );

//sendData (here how do i insert into the local storage for api.message.paginate)

const convex = useConvex();
convex.action(api.message.send, {
  conversation: conversationId,
  type: "text",
  text: {
    body: "hej med dig",
  },
  timestamp: 1,
});

const convex = useConvex();
convex.action(api.message.send, {
  conversation: conversationId,
  type: "text",
  text: {
    body: "hej med dig",
  },
  timestamp: 1,
});

Many thanks

2 Replies

sshader•4mo ago

Only mutations support optimistic updates, so one recommendation is to have your client call a mutation (which can have an optimistic update), and then schedule an action that calls to the third party service + writes back to the DB (https://docs.convex.dev/functions/actions#calling-actions-from-clients) As an example, if I were building a chat app that allowed sending GIFs that I source from a third party API (like GIPHY), I might have a api.messages.send mutation that writes a message like { author: "sshader", message: "hi", gifUrl: null } (which I can optimistically update on the client), and then ctx.scheduler.runAfter(0, internal.messages.attachGif, { messageId, searchText }).

Actions | Convex Developer Hub

Actions can call third party services to do things such as processing a payment

jamalsoueidanOP•4mo ago

that can work too, thank you