Apollo-client: Apollo v3 Beta not working with RetryLink and onError

Created on 27 Jun 2020  路  2Comments  路  Source: apollographql/apollo-client

Hi again,

Sorry if this is a wrong place to ask this question, new to this community. already asked same question here https://github.com/apollographql/apollo-link/issues/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 }
picture yeomann

Most helpful comment

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]),
    ...
});
picture robertvorthman on 26 Jul 2020
👍5

All 2 comments

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.
bopfer picture bopfer on 14 Jul 2020

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]),
    ...
});
robertvorthman picture robertvorthman on 26 Jul 2020
👍5
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dispix picture dispix  路  3Comments
canercandan picture canercandan  路  3Comments
omatrot picture omatrot  路  3Comments
NeoPhi picture NeoPhi  路  3Comments
MichaelDeBoey picture MichaelDeBoey  路  3Comments