How to use apollo-link-retry - 10 common examples

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const httpWsLink = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  wsLink,
  httpLink,
);

// This is the same cache you pass into new ApolloClient
const cache = new InMemoryCache();

const retryLink = new RetryLink();

// set up link state for local
const stateLink = withClientState({
  cache,
});

/**
 * Helper function to write fragment changes to cache
 * 
 * @param {object} client apollo client instance
 * @param {string} fragment gql fragment string 
 * @param {string} id id of the object without typename prefix
 * @param {string} __typename typename of the object in the cache
 * @param {data} data changes you want applied to object in cache
 */
export const writeFragment = ({ client, fragment, id, __typename, data }) => {

export const createClient = (options?: CreateClientOptions = {}) => {
  const cache = new InMemoryCache({
    fragmentMatcher: new IntrospectionFragmentMatcher({
      introspectionQueryResultData,
    }),
    ...getSharedApolloClientOptions(),
  });

  const headers = options.token
    ? {
        authorization: `Bearer ${options.token}`,
      }
    : undefined;

  const retryLink = new RetryLink({
    attempts: (count, operation, error) => {
      const isMutation =
        operation &&
        operation.query &&
        operation.query.definitions &&
        Array.isArray(operation.query.definitions) &&
        operation.query.definitions.some(
          def =>
            def.kind === 'OperationDefinition' && def.operation === 'mutation'
        );

      // Retry mutations for a looong time, those are very important to us so we want them to go through eventually
      if (isMutation) {
        return !!error && count < 25;
      }

function create(initialState, {getToken}) {
    // https://medium.com/twostoryrobot/a-recipe-for-offline-support-in-react-apollo-571ad7e6f7f4
    const retry = new RetryLink({attempts: {max: Infinity}});

    const httpLink = createHttpLink({
        uri: "https://api.graph.cool/simple/v1/cj5geu3slxl7t0127y8sity9r", // with-apollo-auth
        // uri: "https://api.graph.cool/simple/v1/cjdgba1jw4ggk0185ig4bhpsn", // Reason-Apollo
        // uri: publicRuntimeConfig.graphApi, // set as process.env.GRAPHQL_API
        credentials: "same-origin",
    });

    const link = concat(retry, httpLink);

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

const httpLink = createHttpLink({
      uri: this.httpEndpoint,
      fetch,
    });

    const subscriptionLink = new WebSocketLink({
      uri: this.webSocketEndpoint,
      options: {
        connectionParams: this.connectionParams,
        reconnect: true,
        lazy: true,
      },
      webSocketImpl: ws,
    });

    const retryLink = new RetryLink({
      delay: {
        initial: 100,
        max: 5000,
      },
      attempts: {
        max: 3,
        retryIf: async (error) => {
          if (error && error.result && error.result.status === 401) {
            await this.refreshToken(0, /* shouldRetry */ false);
          }

          return true;
        },
      },
    });

import { Observable } from 'rxjs/Observable'
import fetch from 'isomorphic-fetch'

import 'rxjs/add/observable/of'
import 'rxjs/add/observable/fromPromise'
import 'rxjs/add/operator/do'
import 'rxjs/add/operator/switchMap'
import 'rxjs/add/operator/merge'

import { makeDebugger, notEmpty } from '../../utils/functions'

/* eslint-disable no-unused-vars */
const debug = makeDebugger('Network')
/* eslint-enable no-unused-vars */

const retryLink = new RetryLink({
  delay: {
    initial: 300,
    max: Infinity,
    jitter: true,
  },
  attempts: {
    max: 3,
    retryIf: error => !error,
  },
})

const graphLink = new HttpLink({ uri: 'http://localhost:4001/graphiql' })

const errorLink = onError(({ graphQLErrors }) => {
  if (graphQLErrors) {
    graphQLErrors.map(

await AsyncStorage.setItem(SCHEMA_VERSION_KEY, SCHEMA_VERSION)
    }
  } catch (error) {
    console.log('ERROR on cache', error)
  }
  const wsLink = new WebSocketLink({
    uri: `ws://localhost:4000/subscriptions`,
    options: {
      reconnect: true
    }
  })
  const httpLink = new HttpLink({
    uri: 'http://localhost:4000/graphql'
  })
  
  const link = new RetryLink({
    delay: {
      initial: 500,
      max: Infinity,
      jitter: true
    },
    attempts: {
      max: Infinity,
      retryIf: (error, _operation) => error
    }
  }).split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query)
      return kind === 'OperationDefinition' && operation === 'subscription'
    },
    wsLink,
    httpLink,

},
  },
  spinner: {
    marginTop: 60,
  },
})
export default class App extends Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    return { error };
  }

  link = new RetryLink().split(
    operation => operation.getContext().client === 'github',
    new HttpLink({
      uri: 'https://api.github.com/graphql',
      headers: {
        authorization: `Bearer ${process.env.GITHUB_PERSONAL_API_TOKEN}`,
      },
    }),
    new HttpLink({ uri: process.env.BUGZILLA_ENDPOINT })
  );

  apolloClient = new ApolloClient({
    cache,
    link: this.link,
  });

  render() {

storage: localforage,
    });

    const wsLink = new WebSocketLink({
      uri: this.socketUrl,
      options: {
        reconnect: true,
        timeout: 30000,
        connectionParams: async () => ({
          authorization: await localforage.getItem('token'),
        }),
      },
    });

    const link = ApolloLink.from([
      new RetryLink({
        delay: {
          initial: 300,
          max: Infinity,
          jitter: true,
        },
        attempts: {
          max: 3,
          retryIf: (error, _operation) => !!error,
        },
      }),
      wsLink,
    ]);

    this.resolver(
      new ApolloClient({
        link,

export const createRetryLink = (origLink: ApolloLink) => {
    let delay;

    const retryLink = new RetryLink({
        attempts: (count, operation, error) => {
            const { [PERMANENT_ERROR_KEY]: permanent = false } = error;
            const { [SKIP_RETRY_KEY]: skipRetry = false } = operation.variables;

            if (permanent) {
                return false;
            }

            if (error.statusCode >= 400 && error.statusCode < 500) {
                return false;
            }

            if (graphQLResultHasError({ errors: error ? error.graphQLErrors : [] })) {
                return false;
            }

export default async () => {
  const retryLink = new RetryLink({
    delay: {
      initial: 1000
    },
    attempts: {
      max: 1000,
      retryIf: (error, _operation) => {
        if (error.message === 'Network request failed') {
          if (_operation.operationName === 'createPost') {
            return true;
          }
        }
        return false;
      }
    }
  });