Apollo: You are calling concat on a terminating link, which will have no effect

Question

I am working in Apollo, GraphQL and Nuxtjs project, when setting up Apollo configuration I got this Warning:

link.js:38 Error: You are calling concat on a terminating link, which will have no effect
at new LinkError (linkUtils.js:41)
at concat (link.js:38)
at ApolloLink.webpackJsonp../node_modules/apollo-link/lib/link.js.ApolloLink.concat (link.js:65)
at link.js:13
at Array.reduce (<anonymous>)
at from (link.js:13)
at createApolloClient (index.js:58)
at webpackJsonp../.nuxt/apollo-module.js.__webpack_exports__.a (apollo-module.js:66)
at _callee2$ (index.js:140)
at tryCatch (runtime.js:62)

Here is my code:

import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';
import { ApolloLink } from 'apollo-link';

export default ({ store, env  }) => {
  const httpLink = new createHttpLink({ uri: env.GRAPH_BASE_URL });

  // middleware
  const middlewareLink = new ApolloLink((operation, forward) => {
    const token = store.getters['user/GET_TOKEN'];

    if (token) {
      operation.setContext({
        headers: { authorization: `Bearer ${token}` }
      });
    }

    return forward(operation);
  });

  const link = middlewareLink.concat(httpLink);

  return {
    link,
    cache: new InMemoryCache()
  }
};

I Searched on Google for any similar issue, I found this one https://github.com/Akryum/vue-cli-plugin-apollo/issues/47 but it did not help me. I tried to change:

const link = middlewareLink.concat(httpLink);

to:

const link = Apollo.from([middlewareLink, httpLink]);

but it still gives me the same warning, any help please

Answer 1

The solution for me is putting Http Link at the end of the Apollo Link array (used when you're creating the Apollo Client).

...
const param = {
  link: ApolloLink.from([
    onError(...) =>...,
    authLink...,
    new HttpLink({
      uri: '/graphql',
      credentials: 'same-origin'
    })
  ]),
  cache: ...,
  connectToDevTools: ...
}

new ApolloClient(param);

---

I'm using these libraries:

• apollo-client
• apollo-cache-inmemory
• apollo-link
• apollo-link-http
• apollo-link-context
• apollo-link-error

Answer 2

In my case, i solved the issue, changing the order in array, example:

Before:

const links = [...middlewares, localLink, authLink, httpLink, errorLink]

After:

const links = [...middlewares, localLink, authLink, errorLink, httpLink]

Answer 3

I noticed that in the vue-apollo readme there is some docs for the apolloClient configs and it says you can turn off defaultHttpLink to use terminating links.

return {
  link,
  cache: new InMemoryCache()
  defaultHttpLink: false, // this should do the trick
}

Answer 4

The httplink should be a the end of the link array.