React Native + Apollo Client - Offline Mutations (Blog post: https://teamairship.com/offline-first-approach-for-mobile-apps-react-native-and-apollo/)

apolloClient.js

import AsyncStorage from '@react-native-community/async-storage';
import { persistCache } from 'apollo-cache-persist';
import {
  ApolloClient,
  ApolloLink,
  createHttpLink,
  InMemoryCache,
} from '@apollo/client';
import Config from 'react-native-config';
import { setContext } from '@apollo/client/link/context';

const uri = Config.API_URL;

export const getApolloClient = async (token, queueLink) => {
  const cache = new InMemoryCache({});

  const httpLink = createHttpLink({
    uri,
  });

  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : '',
      },
    };
  });

  const link = ApolloLink.from([
    queueLink,
    authLink,
    httpLink,
  ]);

  await persistCache({
    cache,
    storage,
  });

  return new ApolloClient({ cache, link });
};

App.jsx

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { ApolloProvider } from '@apollo/client';
import NetInfo from '@react-native-community/netinfo';
import QueueLink from 'apollo-link-queue';
import AsyncStorage from '@react-native-community/async-storage';
import { getApolloClient } from '../apollo/apolloClient';

import NoteView from './NoteView';

const getToken = async () => {
  return await AsyncStorage.getItem('@auth_token');
};

const queueLink = new QueueLink();

const App = () => {
  const [client, setClient] = useState(null);

  const initializeApolloClient = async () => {
    await getToken().then(async (authToken) => {
      if (authToken) {
        await getApolloClient(authToken, queueLink).then((apolloClient) => {
          setClient(apolloClient);
        });
      }
    });
  };

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      if (state.isConnected) {
        queueLink.open();
      } else {
        queueLink.close();
      }
    });

    return () => unsubscribe();
  }, []);

  useEffect(() => {
    initializeApolloClient();
  }, []);

  if (!client) {
    return (
      <View>
        <Text>Loading...</Text>
      </View>
    );
  }

  return (
    <ApolloProvider client={client}>
      <NoteView />
    </ApolloProvider>
  );
};

export default App;

NoteView.jsx

// Imports

const GET_NOTES = gql`
  query GetNotes($employeeId: ID!) {
    notes(employeeId: $employeeId) {
      nodes {
        content
        id
        name
      }
    }
  }
`;

const NoteView = () => {
  // ...
  
  const [
    createNote,
    { error: createError, data: createData, loading: createLoading },
  ] = useMutation(CREATE_NOTE, {
    // The note variable is defined by the server I am connected to.
    // Input your variables here
    variables: {
      note: {
        employeeId: employee.id,
        name: noteName,
        content: noteContent,
      },
    },
    optimisticResponse: {
      __typeName: 'Mutation',
      createNote: {
        __typename: 'CreateNotePayload',
        note: {
          __typeName: 'Note',
          // Input your variables here
          id: getUniqueId(),
          name: noteName,
          content: noteContent,
        },
        errors: [],
      },
    },
    update: (cache, { data }) => {
      try {
        const readData: any = cache.readQuery({
          query: GET_NOTES,
          variables: { employeeId: employee.id },
        });

        let mergedNotes = [];

        if (readData.notes.nodes.length <= 0) {
          mergedNotes = [data.createNote.note];
        } else {
          mergedNotes = [
            data.createNote.note,
            ...readData.notes.nodes,
          ];
        }

        cache.writeQuery({
          query: GET_NOTES,
          variables: { employeeId: employee.id },
          data: {
            // this data object is the same as the one in the gql query above
            ...readData,
            notes: {
              nodes: mergedNotes,
            },
          },
        });
      } catch (e) {
        console.log({ e });
      }
    },
  });
  
  // ...
}

export default NoteView;

Blog post: https://teamairship.com/offline-first-approach-for-mobile-apps-react-native-and-apollo/

thank u very much!