custom link doesn't work when declared in apollo.config.js

[leviwheatcroft]

Version

v4.0.0-rc.19

Reproduction link

https://codesandbox.io/s/romantic-volhard-oz2dd?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

Run repro. See error.

What is expected ?

link to be loaded as apollo link

What is actually happening?

type error: x.concat is not a function

Additional comments?

After much consternation, I've tracked this down to this part of templates/plugin.js.

Essentially, if you provide a clientConfig as an object within nuxt.config.js, then it will be JSON.stringified. ApolloLink.prototype.toString() returns {}, so after stringification & parsing you get a plain empty object. Later when this is passed to ApolloLink.from, it will try to the link's concat method which doesn't exist because it's just a plain object.

In your nuxt.config.js if you define clientConfigs as a reference to another file like:

  clientConfigs: {
    default: '~/plugins/apollo/apollo.default.js'
  }

it will work as expected, because the config doesn't get stringified.

_{This bug report is available on Nuxt community (#c292)}

[leviwheatcroft]

I just noticed that this is kind of covered in the readme, surprised I didn't noticed when I was beating my head against it before!

Maybe throw an error if any of the config values in nuxt.config.js are functions ?

[kieusonlam]

I weird because I believe this it's already being handled https://github.com/nuxt-community/apollo-module/blob/70fb62864764a72c5f11d23ea4c9ce99d0f9fa57/lib/module.js#L14-L29

[leviwheatcroft]

Hmm... that just checks whether the configuration is an object or a string, something like this would pass this check but fail being stringified, because the config is an object, but contains a property with a value which can't be stringified:

{
  apollo: {
    clientConfigs: {
      default: {
        link: () => { ... }
      }
    }
  }
}

The only solutions I can think of involve either flattening the config object and testing all the values, or using a replacer in JSON.stringify() something like this:

JSON.stringify(clientConfig, (_, value) => {
  // check for unstringifyables here
  if (...) throw new Error('...') 
  return value
})

[gibkigonzo]

@leviwheatcroft as I understood from docs you have to set defaultHttpLink: false when using custom link. https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/graphql-client/src/index.js#L34 but then I have other error: Cannot read property 'length' of undefined

    }
    return LinkError;
}(Error));
exports.LinkError = LinkError;
function isTerminating(link) {
    return link.request.length <= 1; // here is error
}
exports.isTerminating = isTerminating;
function toPromise(observable) {
    var completed = false;
    return new Promise(function (resolve, reject) {

[ochanje210]

I am having same issue with @gibkigonzo that says: Cannot read property 'length' of undefined Any solutions yet..?