Client reaching the wrong httpEndpoint URL when using external config file.

[jminguely]

Hello there,

I'm building a nuxt2 website getting all data from a headless Wordpress using wp-graphql and apollo.

As I need possibleTypes data, I've externalized the clientConfigs to another files, here's the info:

nuxt.config.js

...
  apollo: {
    includeNodeModules: true,
    clientConfigs: {
      default: '@/apollo/client-configs/default.js',
    },
  },
...

apollo/client-configs/default.js

import {
  InMemoryCache,
  IntrospectionFragmentMatcher,
} from 'apollo-cache-inmemory'
import introspectionQueryResultData from './schema.json'

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData,
})

export default (context) => {
  return {
    httpEndpoint: process.env.API_URL,
    cache: new InMemoryCache({ fragmentMatcher }),
  }
}

When doing that , the SSR is working great, but as soon as I click on a NuxtLink to reach another page, the website crashes with a "Network error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON" error. Looking to the nextwork access, I can see that it's trying to reach the wrong client endpoint:

When I switch back my clientConfigs without the external modules, using:

nuxt.config.js

...
  apollo: {
    includeNodeModules: true,
    clientConfigs: {
      default: {
        httpEndpoint: process.env.API_URL,
      },
    },
  },
...

The server and client side rendering are both okay now. The network panels of the chrome dev tools can give me the confirmation the good url is reached:

Do someone of you knows why the correct endpoint cannot be reached when using external modules? I'm using "@nuxtjs/apollo": "^4.0.0-rc.19" and "nuxt": "^2.15.8"