[WIP] Automatically handle apollo client with setToken intergrated

[kieusonlam]

Follow #103, I want to make things easier like axios. Instead of creating apollo client in a js file, now you can just need to do this in nuxt.config.js

{
  // Add apollo module
  modules: ['@nuxtjs/apollo'],

  // Give apollo module options
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:4000',
        // You can use `wss` for secure connection (recommended in production)
        // Use `null` to disable subscriptions
        wsEndpoint: 'http://localhost:4000',
        // LocalStorage token
        tokenName: 'apollo-token',
        // Enable Automatic Query persisting with Apollo Engine
        persisting: false, // Optional
        // Use websockets for everything (no HTTP)
        // You need to pass a `wsEndpoint` for this to work
        websocketsOnly: false // Optional
      },
      test: {
        httpEndpoint: 'http://localhost:5000'
      }
    }
  }
}

And you guys can handle token by using this:

this.$apolloHelpers.setToken('your token')

or if you using multiple clients

const testClient = this.$apollo.provider.clients.test
this.$apolloHelpers.setToken('your token', testClient)

By this maybe we can intergrate apollo schema into https://github.com/nuxt-community/auth-module as well.

What do you guys think?

And wait there I need some help:

1. After intergrated vue-cli-plugin-apollo. I can't import css into component in nuxt project anymore.
   
   project will not work, I don't know much about eslint or webpack :(
2. Should we use js-cookie, or is there another way better.

[dohomi]

Thanks @kieusonlam as vue-cli-plugin is tailored for the usage with the new vue-cli I don't think it should be used as a dependency. Rather extract the functionality that this Nuxt module receives similar behaviour as the vue-cli-plugin

[kieusonlam]

@dohomi as your advice I took what we need from vue-cli-plugin-apollo to nuxt module. But I think it should not be a problem, it's a separate function and it's not related to the vue-cli generator. In the vue-apollo demo folder, he also use it as dependency.

[dohomi]

@kieusonlam one more thing I have in mind (just to be 100% backwards compatible)

• check if clientConfigs.default === pathToConfigFile
  so if clientConfigs is simply a path to the config the old behaviour will be delivered so every user can use his own configuration.
• if clientConfigs.default === Object
  new behaviour to wire up everything with best practices.

[dohomi]

@kieusonlam lets see if @Akryum can give us green light to use the apollo-client config directly. This would revert my previous statement and would make the maintenance of this plugin even easier.

[dohomi]

@kieusonlam what is nodeExternals whitelist actually doing (I never used it so far)

[kieusonlam]

I removed it on 8fce5b3

[dohomi]

@kieusonlam I use for lumen-cms following setToken / getToken function that it works either on client and on server side. Important is to pass the req based on server request. Vue.ls might be simply replaced with localStorage setter and getter as it is the default on vue-cli-plugin-apollo
https://github.com/lumen-cms/lumen-cms/blob/master/lib/templates/util/authHelpers.js

[dohomi]

@kieusonlam can you align the plugin code similar to:
https://github.com/Akryum/vue-cli-plugin-apollo/blob/master/generator/templates/vue-apollo/default/src/vue-apollo.js
So best would be to provide onLogin onLogout function on $apolloHelper as well.

[Akryum]

I think it's a good idea to use vue-cli-plugin-apollo, the client part is similar to apollo-boost and doesn't depend on vue-cli.

[kieusonlam]

@dohomi I think it's not ready to be merged :D

There are several things I don't know how to solve yet.

1. Now I remember why I used webpack-node-externals, if I put vue-cli-plugin-apollo into addVendor
   I get this error

 ERROR  Failed to compile with 1 errors                                                                                                                13:27:44
 error  in ./node_modules/vue-cli-plugin-apollo/index.js

Module parse failed: Unexpected token (45:10)
You may need an appropriate loader to handle this file type.
|         .use('eslint-loader')
|         .tap(options => ({
|           ...options,
|           cacheIdentifier: options.cacheIdentifier + id,
|         }))

 @ multi vue vue-router vue-meta vuex vue-apollo apollo-client apollo-cache-inmemory vue-cli-plugin-apollo js-cookie

2. After use vue-cli-plugin-apollo I cannot import css, scss,... in a component.

{ TypeError: Cannot read property 'middleware' of undefined
    at module.exports.__webpack_exports__.default (.nuxt/server.js:133:0)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7) statusCode: 500, name: 'TypeError' }

3. Handle the token for multible clients, right now everything is const AUTH_TOKEN = 'apollo-token' I plan to setToken by the client key name in nuxt config instead of the current way.

<% Object.keys(options.clientConfigs).forEach((key, index) => { %>
  const <%= key %>AuthToken = '<%= options.clientConfigs[key].tokenName %>'
<% }) %>
setToken: async (token, apolloClient = 'defaultClients') => {
   Cookie.set(apolloClient+'AuthToken', token)
}