Version

v4.0.0-rc.1

Reproduction link

https://github.com/chanlito/nuxt-apollo-link-state-bug

Steps to reproduce

1. Run the app.
2. Reload the page to see issue.

What is expected ?

Expect default state to change.

What is actually happening?

Default state changed, then changed back to default.

When I add '@nuxtjs/apollo' in my nuxt.config.js file, it crashes with:
TypeError
Cannot read property 'middleware' of undefined

On examination of generated .nuxt/server.js file I find the following:

/*
  ** Call global middleware (nuxt.config.js)
  */
  let midd = ["i18n"]
  midd = midd.map((name) => {
    if (typeof name === 'function') return name

Manually changing server.js to:
let midd = ["i18n","apollo"]

and reloading the page leads to a normal Nuxt error page:
Unexpected token .

…but I can see the graphql response in console - so it's being processed!

Is this a bug? I've locally changed /node_modules/nuxt/lib/app/server.js to do this all the time - but that's a total hack….

What problem does this feature solve?

Cookies set by the onLogin helper do not expire.

js-cookie supports setting the number of days before expiry like this: Cookies.set('name', 'value', { expires: 7 });.

What does the proposed changes look like?

A tokenExpires or cookieExpires option in clientConfigs, which is passed to js-cookie.

Version

v4.0.0-rc.1

Reproduction link

https://github.com/AndrewBogdanovTSS/nuxt-apollo-element-ui-test

Steps to reproduce

• Add Element UI dependency
• Create an element UI plugin to only include specific components
• Change theme color by overriding custom scss variables in order to customize default theme
• Specify $--font-path variable as required https://element.eleme.io/#/en-US/component/custom-theme
• run the project

What is expected ?

Element UI library is building from its source code due to Nuxt 2 new transpile property that exists in nuxt config

What is actually happening?

× error F:\Projects\Study\Nuxt\nuxt-apollo-element-ui-test\node_modules\element-ui\lib\theme-chalk\fonts\element-icons.woff:1
  (function (exports, require, module, __filename, __dirname) { wOFF


  SyntaxError: Invalid or unexpected token
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:616:28)
  at Object.Module._extensions..js (module.js:663:10)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  at Function.Module._load (module.js:497:3)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  at r (F:\Projects\Study\Nuxt\nuxt-apollo-element-ui-test\node_modules\vue-server-renderer\build.js:8341:16)
  at Object.element-ui/lib/theme-chalk/fonts/element-icons.woff (server-bundle.js:3165:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object../node_modules/css-loader/index.js?!./node_modules/postcss-loader/lib/index.js?!./node_modules/sass-loader/lib/loader.js?!./assets/scss/
index.scss (assets/scss/index.scss:7:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Object../assets/scss/index.scss (assets/scss/index.scss?0905:4:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

Additional comments?

This error is happening only once apollo module is connected to the project. It seems like nuxt/apollo interfere with the build process in is some way that prevents it from working properly.
cc: @dohomi

Version

v4.0.0-rc.1

Reproduction link

https://github.com/AndrewBogdanovTSS/nuxt-bt-vue-apollo

Steps to reproduce

• Add Bootstrap-Vue dependencie
• Create a bt-vue plugin to only include specific components
• Add @nuxt/apollo plugin
• Connect apollo module in nuxt.config.js
• npm run dev

What is expected ?

Bootstrap Vue library is building from it's source code due to Nuxt 2 new transpile property that exists in nuxt config

What is actually happening?

× error F:\Projects\Study\Nuxt\nuxt-bt-vue-apollo\node_modules\bootstrap-vue\es\components\button\index.js:1
  (function (exports, require, module, __filename, __dirname) { import bButton from './button';
  ^^^^^^

  SyntaxError: Unexpected token import
  at createScript (vm.js:80:10)
  at Object.runInThisContext (vm.js:139:10)
  at Module._compile (module.js:616:28)
  at Object.Module._extensions..js (module.js:663:10)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  at Function.Module._load (module.js:497:3)
  at Module.require (module.js:596:17)
  at require (internal/module.js:11:18)
  at r (F:\Projects\Study\Nuxt\nuxt-bt-vue-apollo\node_modules\vue-server-renderer\build.js:8341:16)
  at Object.bootstrap-vue/es/components/button (server-bundle.js:2963:18)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../plugins/bootstrap-vue.js (plugins/bootstrap-vue.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)
  at Module../.nuxt/index.js (.nuxt/index.js:1:0)
  at __webpack_require__ (webpack/bootstrap:25:0)

Additional comments?

This error is happening only once apollo module is connected to the project. It seems like nuxt/apollo overrides transpile property in is some way that prevents it from working properly.
cc: @dohomi

So this is how I'm using:

...
   extend(config, { isDev, isServer }) {
      if (isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/],
          }),
        ];
      }
    },
...

And the apollo-module is replacing it, which is causing me issue.

https://github.com/nuxt-community/apollo-module/blob/6345b8b5323e51bc1553b9d55de782a785003654/lib/module.js#L63

So this is how I'm using:

...
   extend(config, { isDev, isServer }) {
      if (isServer) {
        config.externals = [
          nodeExternals({
            whitelist: [/^vuetify/],
          }),
        ];
      }
    },
...

And the apollo-module is replacing it, which is causing me issue.

https://github.com/nuxt-community/apollo-module/blob/6345b8b5323e51bc1553b9d55de782a785003654/lib/module.js#L63

What problem does this feature solve?

Docs/config for setting up apollo-link-state with nuxt

Version

v4.0.0-rc.1

Reproduction link

https://github.com/jon-ht/dnc-pwa

Steps to reproduce

$ npm install # Or yarn install

$ npm run dev

Open http://localhost:3000

If you comment @nuxtjs/apollo under nuxt.config.js modules, it all works as expected

What is expected ?

Default page should show up

What is actually happening?

Console logs :

  nuxt:render Rendering url / +0ms
{ Error: Cannot find module 'es6-promise/auto' from 'P:\wamp64\www\dnc-pwa'
    at Function.module.exports [as sync] (P:\wamp64\www\dnc-pwa\node_modules\resolve\lib\sync.js:43:15)
    at r (P:\wamp64\www\dnc-pwa\node_modules\vue-server-renderer\build.js:8332:44)
    at Object.<anonymous> (server-bundle.js:1730:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 7b32f49b9a66c9f5156c:25:0)
    at Object.<anonymous> (.nuxt/index.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7b32f49b9a66c9f5156c:25:0)
    at Object.<anonymous> (.nuxt/server.js:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 7b32f49b9a66c9f5156c:25:0)
    at server-bundle.js:92:18
    at Object.<anonymous> (server-bundle.js:95:10)
    at evaluateModule (P:\wamp64\www\dnc-pwa\node_modules\vue-server-renderer\build.js:8338:21)
    at P:\wamp64\www\dnc-pwa\node_modules\vue-server-renderer\build.js:8396:18
    at new Promise (<anonymous>)
    at P:\wamp64\www\dnc-pwa\node_modules\vue-server-renderer\build.js:8388:14
    at Object.renderToString (P:\wamp64\www\dnc-pwa\node_modules\vue-server-renderer\build.js:8564:9)
    at Renderer.renderRoute (P:\wamp64\www\dnc-pwa\node_modules\nuxt\lib\core\renderer.js:344:41)
  code: 'MODULE_NOT_FOUND',
  statusCode: 500,
  name: 'NuxtServerError' }

Historically I stashed my authentication token in either Vuex or local Apollo state. Since 4.0 offers to handle this automatically, I'd like to use that if possible. But I do have areas in my app that expect the token to be reactive. For instance:

<template>
...
            <b-navbar-nav>
              <b-nav-item :to="{name: 'settings'}" v-if="isAuthenticated">{{username}}</b-nav-item>
              <b-nav-item href="#" v-if="isAuthenticated" @click.prevent="logout">Logout</b-nav-item>
              <b-nav-item :to="{name: 'login'}" v-if="!isAuthenticated">Login</b-nav-item>
...
</template>

<script>
...
  computed: {
    isAuthenticated() {
      return this.$apolloHelpers.getToken() != null
    },
...
</script>

Because the token is stored in localStorage and a cookie, I'm guessing it won't be reactive. And, indeed, if my token is cleared, it takes a refresh of the app to render my menubar as if I'm not authenticated.

I'm not currently using Vuex, and dropped Apollo local state since all I was using it for was storing my token. Seems like this module should use a reactive data source if it's going to store its token, otherwise folks are going to be very surprised when they use the methods in the README but discover that nothing reacts to token changes. :) (Unless there's some better way to do this that I've just missed for years.)

Thanks.

I am trying to upload the file in nuxt using apollo-upload-client!!
but am not able to setup apollo-upload-client in my nuxt project!!
can anybody help me setup the module in Nuxt!!
as well as graphql query for the upload!!

Version

v4.0.0-rc.0

Reproduction link

https://gist.github.com/timhanlon/58822149b6c528ad42b8e44fd9762f81

Steps to reproduce

Both client configs and the generated apollo-module.js are in this gist: https://gist.github.com/timhanlon/58822149b6c528ad42b8e44fd9762f81

In the generated apollo-module.js, defaultGetAuth is being defined twice, once for each client.

It's causing this error: ReferenceError: defaultTokenName is not defined.

If I change the first definition of defaultGetAuth in the generated apollo-module.js to gamesGetAuth, and then change:

      if (!gamesClientConfig.getAuth) {
        gamesClientConfig.getAuth = defaultGetAuth
      }

to:

      if (!gamesClientConfig.getAuth) {
        gamesClientConfig.getAuth = gamesGetAuth
      }

…then things work as expected.

What is expected ?

Both clients function

What is actually happening?

ReferenceError: defaultTokenName is not defined

I have a GraphQL server with endpoints for 2 locales and need to change which one all component queries are going to, based on the user's language setting, stored in the app.i18n object. (Because I'm using Contentful's cf-graphql package, which doesn't implement multiple locales in the schema.)

I've tried configuring an 'en' and 'pt' client with each endpoint, and using a function to return the appropriate one on the apollo object's $client key, as well as the client key on single tags. This appears to break everything, giving a 'client.query is not a function' error.

Is there another approach here?
Cheers!

TLDR; I need to select GraphQL endpoints based on the app's nuxt-i18n locale setting, and re-run queries if data is already cached.

What problem does this feature solve?

The httpEndpoint configuration property must be specified with an absolute path at time of build.

This change will allow this to be done at runtime, note it depends on https://github.com/nuxt-community/apollo-module/issues/130 being implemented as well.

What does the proposed changes look like?

In module.js:24

} else if (typeof clientConfig.httpEndpoint !== 'string' || !IS_LINK_RE.test(clientConfig.httpEndpoint)) {

Replace with

} else if ((typeof clientConfig.httpEndpoint !== 'string' || !IS_LINK_RE.test(clientConfig.httpEndpoint))
      && typeof clientConfig.transformConfig !== 'function') {

In plugin.js:60

if (typeof <%= key %>ClientConfig.transformConfig === 'function') {
  <%= key %>ClientConfig = <%= key %>ClientConfig.transformConfig(<%= key %>ClientConfig);
}

// Create apollo client

What problem does this feature solve?

The documentation on https://github.com/nuxt-community/apollo-module states

apollo: {
  clientConfigs: {
    default: {
      httpEndpoint: 'https://graphql.datocms.com',
      getAuth: () => 'Bearer your_token_string'
    },
  }
},

Unfortunately the getAuth property is always set to the default function as JSON.stringify does not include functions.

What does the proposed changes look like?

At plugin.js:34
<%= key %>ClientConfig = <%= JSON.stringify(options.clientConfigs[key], null, 2) %>

    <% Object.keys(options.clientConfigs[key]).forEach((prop) => { %>
        <% if (typeof options.clientConfigs[key][prop] === 'function') { %>
          <%= key %>ClientConfig.<%= prop %> = <%= options.clientConfigs[key][prop] %>;
        <% } %>
    <% }) %>

When I use prefetch, and pass a non-valid hash/id. My backend returns error, what is exactly what I expected. But my front-end, also give me an 500 eror page. Instead go to a 404 page, for example.

How I can handle errors when I'm prefetching data with Apollo?

I've resolved this by providing a custom HttpLink to the module. Code provided here in case it helps anyone else.

~/apollo/config.js

import fetch from 'cross-fetch'
import { createHttpLink } from 'apollo-link-http'

export default function(context) {
  const link = createHttpLink({
    uri: `https://${process.env.SHOPIFY_DOMAIN}.myshopify.com/api/graphql`,
    fetch,
    headers: {
      'X-Shopify-Storefront-Access-Token': process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN
    }
  })

  return { link }
}

~/nuxt.config.js

module.exports = {
  apollo: {
    clientConfigs: {
      default: '~/apollo/config.js'
    }
  }
}

I am unable to skip query loading when prefetch option is set to true (in ssr mode). I try skip(), $skipAllQueries(), $skipAll() and they are not event called unlike when prefetch is disabled. Is it an expected behavior? What I am trying to achieve is prevent certain queries to be invoked when a user is not authenticated.