GraphQLApolloClient.js

import { ApolloClient, ApolloLink, Observable, InMemoryCache } from "@apollo/client";
import { onError } from "@apollo/client/link/error";
import { RetryLink } from "@apollo/client/link/retry";
import { createUploadLink } from 'apollo-upload-client'

const request = async (operation) => {
    const token = "yourToken"; // you can get token from persistent storage or redux store
    console.log('REQUESTING', operation.operationName, operation.variables);
    operation.setContext({
        headers: {
            authorization: `Bearer ${token}`,
        },
    });
};

const error = onError((error) => {
    const { graphQLErrors, networkError, operation } = error;
    if (graphQLErrors) {
        console.log('GRAPH QL ERROR', graphQLErrors);
        if (!graphQLErrors[0].message) {
            console.log('Something went wrong', graphQLErrors[0].name);
        } else {
            console.log("Error message", graphQLErrors[0].message);
        }
    } else if (networkError) {
        console.log('NETWORK ERROR', networkError);
        // Network issue like data or wifi is off or not connected
        console.log('Something went wrong in network error');
    }
});

const requestLink = new ApolloLink((operation, forward) => new Observable(observer => {
    let handle // ref variable to unsubscribe on dispose
    Promise.resolve(operation)
        .then(opr => request(opr))
        .then(() => {
            handle = forward(operation).subscribe({
                next: observer.next.bind(observer),
                error: observer.error.bind(observer),
                complete: observer.complete.bind(observer)
            })
        })
        .catch(observer.error.bind(observer))
    return () => {
        if (handle) {
            handle.unsubscribe()
        }
    }
}))

const uploadLink = createUploadLink({
    uri: "https://spacex-production.up.railway.app/", // Replace the URL with your server URL 
    fetchPolicy: 'cache-and-network', 
});

const retryLink = new RetryLink({
    delay: {
        initial: 5000, // milliseconds to wait before attempting the first retry
        max: 10000, // milliseconds that the link should wait for any retry.
    },
    attempts: {
        max: 10, // number of times to try a single operation before giving up
        retryIf: (error, _operation) => {
            console.log("Error in retry", error.message)
            if (error.message === 'Network request failed') {
                console.log('RETRYING..............');
                // return true will attempt retry
                return true;
            }
            // return false wil not attempt the request again
            return false;
        },
    },
});

const link = ApolloLink.from([retryLink, requestLink, error, uploadLink]);
const cache = new InMemoryCache();

const client = new ApolloClient({
    link,
    cache,
});

export default client;