Apollo v3 Beta not working with RetryLink and onError

[yeomann]

Hi again,

Sorry if this is a wrong place to ask this question, new to this community. already asked same question here apollographql/apollo-link#1289

ApolloLink not working for me properly. I'm getting error while adding

• RetryLink
• errorLink
  in the Apollo Client V3 beta

Error is:

Type 'RetryLink' is not assignable to type 'ApolloLink | RequestHandler'.
  Type 'RetryLink' is not assignable to type 'ApolloLink'.
    Types of property 'split' are incompatible.
      Type '(test: (op: import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink")...' is not assignable to type '(test: (op: import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx...'.
        Types of parameters 'left' and 'left' are incompatible.
          Type 'import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/types").RequestHandler' is not assignable to type 'import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/types").RequestHandler'.
            Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
              Type 'import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
                Types of property 'split' are incompatible.
                  Type '(test: (op: import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx...' is not assignable to type '(test: (op: import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink")...'.
                    Types of parameters 'left' and 'left' are incompatible.
                      Type 'import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/types").RequestHandler' is not assignable to type 'import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/types").RequestHandler'.
                        Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
                          Type 'import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.
                            Types of property 'split' are incompatible.
                              Type '(test: (op: import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink")...' is not assignable to type '(test: (op: import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/types").Operation) => boolean, left: import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx...'.
                                Types of parameters 'left' and 'left' are incompatible.
                                  Type 'import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx/node_modules/@apollo/client/link/core/types").RequestHandler' is not assignable to type 'import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink | import("/home/directory/project-xxxx/node_modules/@apollo/link-error/node_modules/@apollo/client/link/core/types").RequestHandler'.
                                    Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.ts(2322)

My packages are following:

  "dependencies": {
    "@ant-design/icons": "^4.1.0",
    "@apollo/client": "^3.0.0-rc.6",
    "@apollo/link-error": "^2.0.0-beta.3",
    "@apollo/link-retry": "^2.0.0-beta.3",

tried resolution solution as per many google searches inside the package.json as

"resolutions": {
    "@apollo/client": "^3.0.0-rc.6"
  },

but error stays same.

My code is following:

import { ApolloClient, ApolloLink, createHttpLink, InMemoryCache, from } from '@apollo/client'
import { onError } from '@apollo/link-error'
import { RetryLink } from '@apollo/link-retry'
// api constants
import { ENDPOINT } from 'apiConstant'

// https://www.apollographql.com/docs/react/v3.0-beta/api/link/apollo-link-retry/
const retryLink = new RetryLink({
  delay: {
    initial: 300,
    max: Infinity,
    jitter: true,
  },
  attempts: {
    max: 5,
    retryIf: (error, _operation) => !!error,
  },
})

// https://www.apollographql.com/docs/react/v3.0-beta/api/link/apollo-link-error/
const errorLink = onError(({ graphQLErrors, networkError, operation /* forward */ }) => {
  if (graphQLErrors) {
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
    )
    /* for (let err of graphQLErrors) {
      switch (err.extensions!.code) {
        case 'UNAUTHENTICATED':
          // error code is set to UNAUTHENTICATED
          // when AuthenticationError thrown in resolver

          // modify the operation context with a new token
          const oldHeaders = operation.getContext().headers
          operation.setContext({
            headers: {
              ...oldHeaders,
              // authorization: getNewToken(), TODO: should be done for new Token
            },
          })
          // retry the request, returning the new observable
          return forward(operation)
        default:
          return forward(operation)
      }
    }*/
  }

  if (networkError) {
    console.log(`[Network error at Operation: ${operation.operationName}]: ${networkError}`)
  }
})

const consoleLink = new ApolloLink((operation, forward) => {
  ------------------
------------
-----
})

const timeStartLink = new ApolloLink((operation, forward) => {
  operation.setContext({ start: new Date() })
  return forward(operation)
})

const logTimeLink = new ApolloLink((operation, forward) => {
 ------------------
------------
-----
})

const headerAuth = new ApolloLink((operation, forward) => {
  const TOKEN = localStorage.getItem('accessToken') || null
  operation.setContext({
    headers: {
      // Authorization: TOKEN,
    },
  })
  return forward(operation)
})

// const logTimeMiddleware = timeStartLink.concat(logTimeLink)
// const headerMiddleware: ApolloLink = headerAuth.concat(httpLink)

const httpLink: ApolloLink = createHttpLink({
  // uri: TestEndpoint,
  uri: ENDPOINT,
})

const link = from([
  // retryLink.concat(errorLink), <--- produce error tried this
  // retryLink, <--- produce error
  // errorLink, <--- produce error
  consoleLink,
  timeStartLink,
  logTimeLink,
  headerAuth,
  // errorLink, <--- produce error tried different positions
  // retryLink, <--- produce error tried different positions
  // errorLink.concat(httpLink), <--- produce error tried this
  httpLink,
])

const client = new ApolloClient({
  cache: new InMemoryCache({
    // dataIdFromObject: (o) => o.id,
  }),
  link,
  connectToDevTools: true,
})

export { client }

[bopfer]

I am seeing the same thing after updating from 3.0.0-rc.12 to the official 3.0.0 release. I only have an errorLink, but I get the same error:

Type 'ApolloLink' is not assignable to type 'ApolloLink | RequestHandler'.
  Types of property 'split' are incompatible.
    Types of parameters 'left' and 'left' are incompatible.

[robertvorthman]

I am using RetryLink and onError without issue using @apollo/client 3.0.2. My link imports look different from yours, things must have changed now that v3 is out of beta.

For other readers, make sure you chain your links together in the correct order. The terminating link must be last, so onError and RetryLink should be first in the array passed to ApolloLink.from. See Terminating Links in the Apollo Link documentation.

import { ApolloClient, ApolloLink } from '@apollo/client';
import { RetryLink } from '@apollo/client/link/retry';
import { onError } from '@apollo/client/link/error';

import authLink from './authLink'; //exports a BatchHttpLink object from '@apollo/client/link/batch-http';

const retryLink = new RetryLink();

//log query errors
const errorLink = onError(error => {
    const { graphQLErrors, networkError } = error;

    if (graphQLErrors)
        graphQLErrors.map(({ message, locations, path }) =>
            console.log(
                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
            ),
        );
    if (networkError) console.log(`[Network error]: ${networkError}`, networkError);
});


const client = new ApolloClient({
    link: ApolloLink.from([errorLink, retryLink, authLink]),
    ...
});

[hwillson]

This should no longer be an issue in @apollo/client@latest - let us know otherwise, thanks!