How to properly use optimistic updates to create an offline app?

[brunohkbx]

Hey everyone.

I've been trying for a while to create a simple todos crud with offline support but there are still some missing points that I couldn't figure out. So basically I'm using createAsyncStoragePersistor in react-native to persist the data.

Then for example, when the user does not have internet, onMutate works great to optimistically add the new todo in the query as in

useMutation(updateTodo, {
  onMutate: async newTodo => {
     const newTodo = {
        ...props,
        id: uuidv4(),
     };
 
     // Optimistically add
     queryClient.setQueryData('todos', old => [...old, newTodo]);
   },

I'm wondering how should I delete this todo when the user does not have internet.
Since the user is not connected, it would throw an error, but I realize that returning a resolved promise and removing it in the onSuccess does the trick.

export const remove = async ({ id, inserted_at }) =>
  inserted_at ? axios.delete(`/todos/${id}`) : Promise.resolve();

useMutation(todosAPI.remove, {
  onSuccess: (_, { id }) => {
      queryClient.setQueryData('todos', (old) =>
        old.filter((todo) => todo.id !== id)
      );
    },
})

What do you think? Does it make sense?
Another approach I guess could be directly accessing queryClient.setQueryData

I appreciate any help. Thanks in advance 😄

[TkDodo]

Since the user is not connected, it would throw an error, but I realize that returning a resolved promise and removing it in the onSuccess does the trick.

why not keep the error and remove it in onError ?

Also, if you add retry to your mutation, and the user has no internet, the mutation will be paused and continued if there is internet. you can then even persist the mutation if the user quits the page and continue it later with hydration. have a loo here: https://react-query.tanstack.com/guides/mutations#persist-mutations

[brunohkbx]

@TkDodo I'd like to keep the optimistic todo even if the mutation fails when there's no internet so the user would still be able to use it offline. One thing that I noticed is that the optimistic todo would be removed next time the user connects to the internet because the query will be stale and refresh.
I wonder if would be better to keep the local changes in another state management tool like redux / zustand / etc . What do you think??

[TkDodo]

this seems like a different problem altogether: if you want to not refetch the optimistically updated query on reconnect, you have to either turn off refetchOnReconnect for that query, or set a higher staleTime so that this query is not considered stale and thus refetched. This should keep the optimistically added todo in the cache.