Blog>
Snippets

Queueing Mutations and Synchronizing upon Reconnection

Provide an example of how to queue mutation requests made while offline and automatically synchronize them with the server once the application goes back online.
import AsyncStorage from '@react-native-async-storage/async-storage';
import NetInfo from '@react-native-community/netinfo';
Import required packages for storage and network information.
const addToRequestQueue = async (mutation) => {
  const queue = JSON.parse(await AsyncStorage.getItem('mutationQueue')) || [];
  queue.push(mutation);
  await AsyncStorage.setItem('mutationQueue', JSON.stringify(queue));
};
Function for adding mutations to a persistent queue when offline.
const processRequestQueue = async () => {
  const queue = JSON.parse(await AsyncStorage.getItem('mutationQueue')) || [];
  for (const mutation of queue) {
    // Execute mutation,
    // e.g. axios.post(mutation.url, mutation.data)
    // Remove successful mutations from the queue
  }
  await AsyncStorage.setItem('mutationQueue', JSON.stringify(queue));
};
Function to process and empty the queue once back online.
NetInfo.addEventListener(state => {
  if (state.isConnected) {
    processRequestQueue();
  }
});
Event listener to trigger queue processing upon regaining connectivity.