Repository apollo-module

dfee

dfee posted a new bug report

apollo-module • 6 days ago

bug wsEndpoint requires the `ws` protocol

Version

v4.0.0-rc.1

Reproduction link

https://github.com/nuxt/nuxt.js/tree/dev/examples/vue-apollo

Steps to reproduce

Use the default configuration in the tutorial (and assuming that you've got a ws endpoint on localhost:4000):

    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:4000',
        httpLinkOptions: {
          credentials: 'same-origin'
        },
        wsEndpoint: 'http://localhost:4000', // *** here is the bug
        tokenName: 'apollo-token',
        persisting: false,
        websocketsOnly: false
      },
  }

You'll get the following error

[nuxt] Error while initializing app DOMException: "An invalid or illegal string was specified"

The solution is to use the ws (or wss) protocol instead of http or wsEndpoint.

What is expected ?

don't get an error on page load

What is actually happening?

get an error on page load

chanlito

chanlito posted a new bug report

apollo-module • 8 days ago

bug Problem with Nuxt Apollo with clientState

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.

sbastias

sbastias posted a new question

apollo-module • 15 days ago

nuxt.config.js '@nuxtjs/apollo' module not passed to global middleware (server.js)?

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….

timhanlon

timhanlon posted a new feature request

apollo-module • 15 days ago

idea Set expiration date of cookie

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.

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new bug report

apollo-module • 18 days ago

bug Apollo module brakes compilation of Element UI library when custom scss variables are used

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

AndrewBogdanovTSS

AndrewBogdanovTSS posted a new bug report

apollo-module • 18 days ago

bug Apollo module brakes transpiling of 3rd party libraries

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

chanlito

chanlito posted a new question

apollo-module • 20 days ago

Problem with nodeExternals usage in apollo-module

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

chanlito

chanlito posted a new question

apollo-module • 20 days ago

Problem with nodeExternals usage

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

DanielLourie

DanielLourie posted a new feature request

apollo-module • 22 days ago

idea Example project for apolllo-link-state with nuxt

What problem does this feature solve?

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

jon-ht

jon-ht posted a new bug report

apollo-module • a month ago

bug Cannot find module 'es6-promise/auto'

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' }
ndarilek

ndarilek posted a new question

apollo-module • a month ago

Easiest way to make authentication token reactive?

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.

razorabhu1995

razorabhu1995 posted a new question

apollo-module • a month ago

File Upload with apollo-module

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!!

timhanlon

timhanlon posted a new bug report

apollo-module • a month ago

bug Auth issue with multiple clients

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

papertokyo

papertokyo posted a new question

apollo-module • a month ago

Switching clients dynamically and re-running same query

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.

hoon-dialog

hoon-dialog posted a new feature request

apollo-module • a month ago

idea Allow for relative path in httpEndpoint configuration

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
hoon-dialog

hoon-dialog posted a new feature request

apollo-module • a month ago

idea Clone function properties in configuration

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] %>;
        <% } %>
    <% }) %>
kavalcante

kavalcante posted a new question

apollo-module • a month ago

404 Error Handling SSR

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?

mattlenz

mattlenz resolved the question #c111

apollo-module • a month ago

Add custom header to graphql http endpoint?

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'
    }
  }
}
dmrz

dmrz posted a new question

apollo-module • a month ago

Skipping queries when ssr and prefetch are enabled

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.

lindesvard

lindesvard posted a new feature request

apollo-module • a month ago

idea Support for adding options for HttpLink

What problem does this feature solve?

Would be nice to be able to set if apollo should use GET or POST for queries. Default behavior is POST.

apollo-http-link have a option called useGETForQueries

Read more here: https://www.apollographql.com/docs/link/links/http.html#options