Offline caching and resuming paused mutations.

[7ammer]

Hello

I've been looking at createCollection and queryCollectionOptions. These look really useful for when a user is online and has the app open. However, coming from a react native perspective I'm a bit unsure how one might be able to persist uncompleted mutations in the event the app is fully closed and then re-opened. Or, if a user opens the app and doesn't immediately have internet access. How might one cache the response from queryFn or populate an initial state?

With Tanstack Query we've been able to use createSyncStoragePersister as well as the ability to resumePausedMutations on app restart.

I think this issue kind of touches on what I'm concerned with : #82. Is it the case that this area is a work in progress?

[7ammer]

An update to this:

I'm wondering if I should be implementing a storage layer to store all of the migrations for onInsert, onUpdate, onDelete. I've taken the example from https://tanstack.com/db/latest/docs/collections/query-collection#persistence-handlers-1 and combined it with the stored mutations.

const todosCollection = createCollection(
  queryCollectionOptions({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    queryClient,
    getKey: (item) => item.id,
    
    onInsert: async ({ transaction }) => {
      const newItems = transaction.mutations
          .map(m => m.modified)
          
      newItems.forEach((i)=>{
          // save new items to storage
      })
          
      const storedItems = getAllInsertMutationsFromStorage('todos')
      
      await api.createTodos(storedItems)
      
      // delete all insert mutations from storage
    },
    
    onUpdate: async ({ transaction }) => {
      const updates = transaction.mutations
          .map(m => ({ id: m.key, changes: m.changes }))
      
      updates.forEach((i)=>{
          // save updated items to storage
      })
      
     const storedItems = getAllUpdateMutationsFromStorage('todos')
     
     await api.updateTodos(storedItems)
     
     // delete all update mutations from storage
    },
    
    onDelete: async ({ transaction }) => {
      const ids = transaction.mutations
          .map(m => m.key)
          
      ids.forEach(i => {
          // save deleted items to storage
      });
      
     const storedIIds = getAllDeleteMutationsFromStorage('todos')
      
      await api.deleteTodos(storedIIds)
      
      // delete all delete mutations from storage
    }
  })
)

Something like this feels like it could work. One issue I see with this though is that it doesn't attempt to send changes from storage until the user makes a change 🤔