Apollo v3 Beta not working with RetryLink and onError

[yeomann]

Expected Behavior
ApolloLink to just work fine

Actual Behavior
Get 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 }

[vvakame]

I got same error with @apollo/link-context.

error TS2322: Type 'import("/home/runner/work/xxx/yyy/node_modules/@apollo/link-context/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink' is not assignable to type 'import("/home/runner/work/xxx/yyy/node_modules/@apollo/client/link/core/ApolloLink").ApolloLink'.

related #1158
"@apollo/client": "^3.0.0-beta.23", should be "@apollo/client": "^3.0.0-rc.9",

[kaladinlight]

Seeing the same issue with @apollo/link-context.

Package versions:

    "@apollo/client": "^3.0.0-rc.7",
    "@apollo/link-context": "^2.0.0-beta.3",