I am still learning and I am trying to set up an Apollo Graph QL query imported from a .gql file within a Vuex action. I have Nuxt Store set up in Module mode.

The documentation seems to suggest that I can access apolloProvider via this.app.apolloProvider.defaultClient. But this returns an 'undefined' error. I have tried looking in context and this.app for apollo instead but neither contain it.

My question is, how do I access the apollo object within a store namespaced module, and get this action to work as it should?

my code

store/index.js

import Vuex from 'vuex';
import product from './product';

const createStore = () => {
  return new Vuex.Store({
    modules: {
      product
    }
  });
};

export default createStore

store/product.js

import GET_PRODUCT from '~/apollo/queries/getProduct.gql';

export const state = () => ({
  product: {},
  loading:false,
  error:null
})

export const mutations = {
  setProduct: (state, payload) => {
    state.product = payload;
  },
  setLoading: (state, payload) => {
    state.loading = payload;
  }
}

export const actions = {
  getProduct: (context, payload) => {
    console.log(context);
    const apolloClient = this.app.apolloProvider.defaultClient; // This returns null
    apolloClient.query({
      query:GET_PRODUCT,
      variables:payload
    }).then(({data}) => {
      context.commit("setProduct", data);
    }).catch(err => {
      context.commit("setLoading", false);
      console.log(err);
    })
  }
}


export const getters = {
  product: state => {
    state.product
  },
  loading:state => {
    state.loading
  }
}

export default {
  state,
  actions,
  mutations,
  getters
}

I've configured my apollo with the following

import { HttpLink } from 'apollo-link-http'
import { setContext } from 'apollo-link-context'
import { from } from 'apollo-link'
import { InMemoryCache } from 'apollo-cache-inmemory'

export default ({ app, store, $config: { baseUrlGraphql } }) => {
  const headersConfig = setContext(() => ({
    credentials: 'same-origin',
    headers: {
      'x-company-id': 'xxx-yyy', // example language header
    },
  }))

  const httpLink = new HttpLink({ uri: baseUrlGraphql })

  const link = from([headersConfig, httpLink])
  const cache = new InMemoryCache()

  return {
    link,
    cache,
    defaultHttpLink: false,
  }
}

Now, I want to access the headers into a vuex action and add some headers to it (and only to that specific header)

await this.app.apolloProvider.defaultClient.query({
  query: myFancyQuery,
  context: {
    headers: {
      ...headers, // where can I found those ? 
      Authorization: this.app.$cookies.get('auth._token.local'),
    },
  },
})

Tried to inspect this.app.apolloProvider but it doesn't have my header…

I am trying to create a login functionality using nuxtjs with the nuxtjs apollo-module and nodejs in the backend using apollo-server. I would like to pass the token from the frontend (nuxtjs/apollo-client) to the backend (nodejs/apollo-server).

Signin Function

async signin () {
  const email = this.email
  const password = this.password
  try {
    const res = await this.$apollo.mutate({
      mutation: signIn,
      variables: {
        email,
        password
      }
    }).then(({ data }) => data && data.signIn)
    const token = res.token
    await this.$apolloHelpers.onLogin(token)
    this.$router.push('/')
  } catch (err) {
    // Error message
  }
}

nuxtjs.config

import Cookies from 'js-cookie'
const token = Cookies.get('apollo-token')

apollo: {  
  clientConfigs: {
    httpEndpoint: 'http://localhost:8000/graphql',
    httpLinkOptions: {
      credentials: 'include',
      headers: {
        'authorization': token ? token : '' // passing the token on this line fails it returns '' 
      }
    }
  }
},

Cookie in Browser DevTools

The token is saved in a cookie called 'apollo-token'. However the Authoriation header in the format 'Bearer token' is not set. According to the apollo-client documentation this should be set automatically (https://github.com/nuxt-community/apollo-module#authenticationtype-string-optional-default-bearer).


I would be very very thankful for any kind of help!

I am wondering how would one go about using batching with Nuxt Apollo?

https://www.apollographql.com/blog/batching-client-graphql-queries-a685f5bcd41b/

Hi there, I am trying to install the latest version of this module, which I believe is 4.0.1-rc.18 from looking at the release log. The latest version I'm seeing on npm however is 4.0.1-rc.5. If this is intentional for some reason, then apologies for opening a ticket. Are there plans to update the version pushed to npm?

Found the solution: https://github.com/nuxt-community/apollo-module/issues/220

I am using Nuxt in SSR mode and using smart queries. If I request a page from the server, the query works. If I navigate to a page via a nuxt-link, I get the error that data is undefined. At first I thought it is a CSP issue but it isn't. There is no warning in the console of the browser, and I can see the network response comes back from graphql as expected.

TypeError: _vm.doctor[0] is undefined render index.vue:25 VueJS 52 init vue-router.esm.js:2932 init vue-router.esm.js:2931 updateRoute vue-router.esm.js:2352 transitionTo vue-router.esm.js:2206 confirmTransition vue-router.esm.js:2340 step vue-router.esm.js:1944 step vue-router.esm.js:1951 runQueue vue-router.esm.js:1955 confirmTransition vue-router.esm.js:2335 step vue-router.esm.js:1944 step vue-router.esm.js:1948 iterator vue-router.esm.js:2322 resolveAsyncComponents vue-router.esm.js:2105 iterator vue-router.esm.js:2300 step vue-router.esm.js:1947 step vue-router.esm.js:1951 step vue-router.esm.js:1948 iterator vue-router.esm.js:2322 _callee6$ NuxtJS tryCatch runtime.js:63 invoke runtime.js:293 defineIteratorMethods runtime.js:118 asyncGeneratorStep Babel client.js:97

Tell me a tool for logging / outputting requests?
So that you can see the request body, response, headers, etc.

Version

v4.0.0-rc.5

Reproduction link

Nothing

Steps to reproduce

yarn dev

visit http://localhost:3000/ in IE11

What is expected ?

Working application without error in IE11

What is actually happening?

The error is logged in the console, in the nuxt/vendors/app.js file, only in IE11:

It seems that the src folder is used for vue-cli-plugin-apollo/graphql-client instead of dist which is transpiled.

It occurred after this commit.
https://github.com/nuxt-community/apollo-module/commit/05fccfe6d6bbfe583bd720029276d81c615047b0#diff-5acbea5e90939d8ded320a17e74b9fe35c66ef8543384b023054c69570cf81f7R4

Transpiled code is here

/***/
"./node_modules/vue-cli-plugin-apollo/graphql-client/src/index.js":
/*!************************************************************************!*\
 !*** ./node_modules/vue-cli-plugin-apollo/graphql-client/src/index.js ***!
 \************************************************************************/
/*! exports provided: createApolloClient, restartWebsockets */
/***/
(function(module, __webpack_exports__, __webpack_require__) {

  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createApolloClient\", function() { return createApolloClient; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"restartWebsockets\", function() { return restartWebsockets; });\n/* harmony import */ var apollo_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! apollo-client */ \"./node_modules/apollo-client/bundle.esm.js\");\n/* harmony import */ var apollo_link__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! apollo-link */ \"./node_modules/vue-cli-plugin-apollo/node_modules/apollo-link/lib/bundle.esm.js\");\n/* harmony import */ var apollo_upload_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! apollo-upload-client */ \"./node_modules/apollo-upload-client/lib/index.js\");\n/* harmony import */ var apollo_upload_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(apollo_upload_client__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var apollo_cache_inmemory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! apollo-cache-inmemory */ \"./node_modules/apollo-cache-inmemory/lib/bundle.esm.js\");\n/* harmony import */ var subscriptions_transport_ws__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! subscriptions-transport-ws */ \"./node_modules/subscriptions-transport-ws/dist/client.js\");\n/* harmony import */ var subscriptions_transport_ws__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(subscriptions_transport_ws__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var subscriptions_transport_ws_dist_message_types__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! subscriptions-transport-ws/dist/message-types */ \"./node_modules/subscriptions-transport-ws/dist/message-types.js\");\n/* harmony import */ var subscriptions_transport_ws_dist_message_types__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(subscriptions_transport_ws_dist_message_types__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var apollo_link_ws__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! apollo-link-ws */ \"./node_modules/apollo-link-ws/lib/bundle.esm.js\");\n/* harmony import */ var apollo_utilities__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! apollo-utilities */ \"./node_modules/vue-cli-plugin-apollo/node_modules/apollo-utilities/lib/bundle.esm.js\");\n/* harmony import */ var apollo_link_persisted_queries__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! apollo-link-persisted-queries */ \"./node_modules/apollo-link-persisted-queries/lib/index.js\");\n/* harmony import */ var apollo_link_context__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! apollo-link-context */ \"./node_modules/apollo-link-context/lib/bundle.esm.js\");\n/* harmony import */ var apollo_link_state__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! apollo-link-state */ \"./node_modules/apollo-link-state/lib/index.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n// Create the apollo client\nfunction createApolloClient ({\n  // Client ID if using multiple Clients\n  clientId = 'defaultClient',\n  // URL to the HTTP API\n  httpEndpoint,\n  // Url to the Websocket API\n  wsEndpoint = null,\n  // Token used in localstorage\n  tokenName = 'apollo-token',\n  // Enable this if you use Query persisting with Apollo Engine\n  persisting = false,\n  // Is currently Server-Side Rendering or not\n  ssr = false,\n  // Only use Websocket for all requests (including queries and mutations)\n  websocketsOnly = false,\n  // Custom starting link.\n  // If you want to replace the default HttpLink, set `defaultHttpLink` to false\n  link = null,\n  // Custom pre-auth links\n  // Useful if you want, for example, to set a custom middleware for refreshing an access token.\n  preAuthLinks = [],\n  // If true, add the default HttpLink.\n  // Disable it if you want to replace it with a terminating link using `link` option.\n  defaultHttpLink = true,\n  // Options for the default HttpLink\n  httpLinkOptions = {},\n  // Custom Apollo cache implementation (default is apollo-cache-inmemory)\n  cache = null,\n  // Options for the default cache\n  inMemoryCacheOptions = {},\n  // Additional Apollo client options\n  apollo = {},\n  // apollo-link-state options\n  clientState = null,\n  // Function returning Authorization header token\n  getAuth = defaultGetAuth,\n  // Local Schema\n  typeDefs = undefined,\n  // Local Resolvers\n  resolvers = undefined,\n  // Hook called when you should write local state in the cache\n  onCacheInit = undefined,\n}) {\n  let wsClient, authLink, stateLink\n  const disableHttp = websocketsOnly && !ssr && wsEndpoint\n\n  // Apollo cache\n  if (!cache) {\n    cache = new apollo_cache_inmemory__WEBPACK_IMPORTED_MODULE_3__[\"InMemoryCache\"](inMemoryCacheOptions)\n  }\n\n  if (!disableHttp) {\n    const httpLink = Object(apollo_upload_client__WEBPACK_IMPORTED_MODULE_2__[\"createUploadLink\"])({\n      uri: httpEndpoint,\n      ...httpLinkOptions,\n    })\n\n    if (!link) {\n      link = httpLink\n    } else if (defaultHttpLink) {\n      link = Object(apollo_link__WEBPACK_IMPORTED_MODULE_1__[\"from\"])([link, httpLink])\n    }\n\n    // HTTP Auth header injection\n    authLink = Object(apollo_link_context__WEBPACK_IMPORTED_MODULE_9__[\"setContext\"])(async (_, { headers }) => {\n      const Authorization = await getAuth(tokenName)\n      const authorizationHeader = Authorization ? { Authorization } : {}\n      return {\n        headers: {\n          ...headers,\n          ...authorizationHeader,\n        },\n      }\n    })\n\n    // Concat all the http link parts\n    link = authLink.concat(link)\n\n    if (preAuthLinks.length) {\n      link = Object(apollo_link__WEBPACK_IMPORTED_MODULE_1__[\"from\"])(preAuthLinks).concat(authLink)\n    }\n  }\n\n  // On the server, we don't want WebSockets and Upload links\n  if (!ssr) {\n    // If on the client, recover the injected state\n    if (typeof window !== 'undefined') {\n      // eslint-disable-next-line no-underscore-dangle\n      const state = window.__APOLLO_STATE__\n      if (state && state[clientId]) {\n        // Restore state\n        cache.restore(state[clientId])\n      }\n    }\n\n    if (!disableHttp) {\n      let persistingOpts = {}\n      if (typeof persisting === 'object' && persisting != null) {\n        persistingOpts = persisting\n        persisting = true\n      }\n      if (persisting === true) {\n        link = Object(apollo_link_persisted_queries__WEBPACK_IMPORTED_MODULE_8__[\"createPersistedQueryLink\"])(persistingOpts).concat(link)\n      }\n    }\n\n    // Web socket\n    if (wsEndpoint) {\n      wsClient = new subscriptions_transport_ws__WEBPACK_IMPORTED_MODULE_4__[\"SubscriptionClient\"](wsEndpoint, {\n        reconnect: true,\n        connectionParams: () => {\n          const Authorization = getAuth(tokenName)\n          return Authorization ? { Authorization, headers: { Authorization } } : {}\n        },\n      })\n\n      // Create the subscription websocket link\n      const wsLink = new apollo_link_ws__WEBPACK_IMPORTED_MODULE_6__[\"WebSocketLink\"](wsClient)\n\n      if (disableHttp) {\n        link = link ? link.concat(wsLink) : wsLink\n      } else {\n        link = Object(apollo_link__WEBPACK_IMPORTED_MODULE_1__[\"split\"])(\n          // split based on operation type\n          ({ query }) => {\n            const { kind, operation } = Object(apollo_utilities__WEBPACK_IMPORTED_MODULE_7__[\"getMainDefinition\"])(query)\n            return kind === 'OperationDefinition' &&\n              operation === 'subscription'\n          },\n          wsLink,\n          link,\n        )\n      }\n    }\n  }\n\n  if (clientState) {\n    console.warn('clientState is deprecated, see https://vue-cli-plugin-apollo.netlify.com/guide/client-state.html')\n    stateLink = Object(apollo_link_state__WEBPACK_IMPORTED_MODULE_10__[\"withClientState\"])({\n      cache,\n      ...clientState,\n    })\n    link = Object(apollo_link__WEBPACK_IMPORTED_MODULE_1__[\"from\"])([stateLink, link])\n  }\n\n  const apolloClient = new apollo_client__WEBPACK_IMPORTED_MODULE_0__[\"ApolloClient\"]({\n    link,\n    cache,\n    // Additional options\n    ...(ssr ? {\n      // Set this on the server to optimize queries when SSR\n      ssrMode: true,\n    } : {\n      // This will temporary disable query force-fetching\n      ssrForceFetchDelay: 100,\n      // Apollo devtools\n      connectToDevTools: \"development\" !== 'production',\n    }),\n    typeDefs,\n    resolvers,\n    ...apollo,\n  })\n\n  // Re-write the client state defaults on cache reset\n  if (stateLink) {\n    apolloClient.onResetStore(stateLink.writeDefaults)\n  }\n\n  if (onCacheInit) {\n    onCacheInit(cache)\n    apolloClient.onResetStore(() => onCacheInit(cache))\n  }\n\n  return {\n    apolloClient,\n    wsClient,\n    stateLink,\n  }\n}\n\nfunction restartWebsockets (wsClient) {\n  // Copy current operations\n  const operations = Object.assign({}, wsClient.operations)\n\n  // Close connection\n  wsClient.close(true)\n\n  // Open a new one\n  wsClient.connect()\n\n  // Push all current operations to the new connection\n  Object.keys(operations).forEach(id => {\n    wsClient.sendMessage(\n      id,\n      subscriptions_transport_ws_dist_message_types__WEBPACK_IMPORTED_MODULE_5___default.a.GQL_START,\n      operations[id].options,\n    )\n  })\n}\n\nfunction defaultGetAuth (tokenName) {\n  if (typeof window !== 'undefined') {\n    // get the authentication token from local storage if it exists\n    const token = window.localStorage.getItem(tokenName)\n    // return the headers to the context so httpLink can read them\n    return token ? `Bearer ${token}` : ''\n  }\n}\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvdnVlLWNsaS1wbHVnaW4tYXBvbGxvL2dyYXBocWwtY2xpZW50L3NyYy9pbmRleC5qcz9mN2I0Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBNEM7QUFDSDtBQUNjO0FBQ0Y7QUFDVTtBQUNTO0FBQzFCO0FBQ007QUFDb0I7QUFDeEI7QUFDRzs7QUFFbkQ7QUFDTztBQUNQO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLHNCQUFzQjtBQUN0QjtBQUNBO0FBQ0E7QUFDQSwyQkFBMkI7QUFDM0I7QUFDQSxhQUFhO0FBQ2I7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxDQUFDO0FBQ0Q7QUFDQTs7QUFFQTtBQUNBO0FBQ0EsZ0JBQWdCLG1FQUFhO0FBQzdCOztBQUVBO0FBQ0EscUJBQXFCLDZFQUFnQjtBQUNyQztBQUNBO0FBQ0EsS0FBSzs7QUFFTDtBQUNBO0FBQ0EsS0FBSztBQUNMLGFBQWEsd0RBQUk7QUFDakI7O0FBRUE7QUFDQSxlQUFlLHNFQUFVLFlBQVksVUFBVTtBQUMvQztBQUNBLG1EQUFtRCxnQkFBZ0I7QUFDbkU7QUFDQTtBQUNBO0FBQ0E7QUFDQSxTQUFTO0FBQ1Q7QUFDQSxLQUFLOztBQUVMO0FBQ0E7O0FBRUE7QUFDQSxhQUFhLHdEQUFJO0FBQ2pCO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGVBQWUsOEZBQXdCO0FBQ3ZDO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLHFCQUFxQiw2RUFBa0I7QUFDdkM7QUFDQTtBQUNBO0FBQ0Esa0NBQWtDLDBCQUEwQixnQkFBZ0IsRUFBRTtBQUM5RSxTQUFTO0FBQ1QsT0FBTzs7QUFFUDtBQUNBLHlCQUF5Qiw0REFBYTs7QUFFdEM7QUFDQTtBQUNBLE9BQU87QUFDUCxlQUFlLHlEQUFLO0FBQ3BCO0FBQ0EsWUFBWSxRQUFRO0FBQ3BCLG1CQUFtQixrQkFBa0IsR0FBRywwRUFBaUI7QUFDekQ7QUFDQTtBQUNBLFdBQVc7QUFDWDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLGdCQUFnQiwwRUFBZTtBQUMvQjtBQUNBO0FBQ0EsS0FBSztBQUNMLFdBQVcsd0RBQUk7QUFDZjs7QUFFQSwyQkFBMkIsMERBQVk7QUFDdkM7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsS0FBSztBQUNMO0FBQ0E7QUFDQTtBQUNBLHlCQUF5QixhQUFvQjtBQUM3QyxLQUFLO0FBQ0w7QUFDQTtBQUNBO0FBQ0EsR0FBRzs7QUFFSDtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBRU87QUFDUDtBQUNBLHFDQUFxQzs7QUFFckM7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsTUFBTSxvRkFBWTtBQUNsQjtBQUNBO0FBQ0EsR0FBRztBQUNIOztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSw2QkFBNkIsTUFBTTtBQUNuQztBQUNBIiwiZmlsZSI6Ii4vbm9kZV9tb2R1bGVzL3Z1ZS1jbGktcGx1Z2luLWFwb2xsby9ncmFwaHFsLWNsaWVudC9zcmMvaW5kZXguanMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBcG9sbG9DbGllbnQgfSBmcm9tICdhcG9sbG8tY2xpZW50J1xuaW1wb3J0IHsgc3BsaXQsIGZyb20gfSBmcm9tICdhcG9sbG8tbGluaydcbmltcG9ydCB7IGNyZWF0ZVVwbG9hZExpbmsgfSBmcm9tICdhcG9sbG8tdXBsb2FkLWNsaWVudCdcbmltcG9ydCB7IEluTWVtb3J5Q2FjaGUgfSBmcm9tICdhcG9sbG8tY2FjaGUtaW5tZW1vcnknXG5pbXBvcnQgeyBTdWJzY3JpcHRpb25DbGllbnQgfSBmcm9tICdzdWJzY3JpcHRpb25zLXRyYW5zcG9ydC13cydcbmltcG9ydCBNZXNzYWdlVHlwZXMgZnJvbSAnc3Vic2NyaXB0aW9ucy10cmFuc3BvcnQtd3MvZGlzdC9tZXNzYWdlLXR5cGVzJ1xuaW1wb3J0IHsgV2ViU29ja2V0TGluayB9IGZyb20gJ2Fwb2xsby1saW5rLXdzJ1xuaW1wb3J0IHsgZ2V0TWFpbkRlZmluaXRpb24gfSBmcm9tICdhcG9sbG8tdXRpbGl0aWVzJ1xuaW1wb3J0IHsgY3JlYXRlUGVyc2lzdGVkUXVlcnlMaW5rIH0gZnJvbSAnYXBvbGxvLWxpbmstcGVyc2lzdGVkLXF1ZXJpZXMnXG5pbXBvcnQgeyBzZXRDb250ZXh0IH0gZnJvbSAnYXBvbGxvLWxpbmstY29udGV4dCdcbmltcG9ydCB7IHdpdGhDbGllbnRTdGF0ZSB9IGZyb20gJ2Fwb2xsby1saW5rLXN0YXRlJ1xuXG4vLyBDcmVhdGUgdGhlIGFwb2xsbyBjbGllbnRcbmV4cG9ydCBmdW5jdGlvbiBjcmVhdGVBcG9sbG9DbGllbnQgKHtcbiAgLy8gQ2xpZW50IElEIGlmIHVzaW5nIG11bHRpcGxlIENsaWVudHNcbiAgY2xpZW50SWQgPSAnZGVmYXVsdENsaWVudCcsXG4gIC8vIFVSTCB0byB0aGUgSFRUUCBBUElcbiAgaHR0cEVuZHBvaW50LFxuICAvLyBVcmwgdG8gdGhlIFdlYnNvY2tldCBBUElcbiAgd3NFbmRwb2ludCA9IG51bGwsXG4gIC8vIFRva2VuIHVzZWQgaW4gbG9jYWxzdG9yYWdlXG4gIHRva2VuTmFtZSA9ICdhcG9sbG8tdG9rZW4nLFxuICAvLyBFbmFibGUgdGhpcyBpZiB5b3UgdXNlIFF1ZXJ5IHBlcnNpc3Rpbmcgd2l0aCBBcG9sbG8gRW5naW5lXG4gIHBlcnNpc3RpbmcgPSBmYWxzZSxcbiAgLy8gSXMgY3VycmVudGx5IFNlcnZlci1TaWRlIFJlbmRlcmluZyBvciBub3RcbiAgc3NyID0gZmFsc2UsXG4gIC8vIE9ubHkgdXNlIFdlYnNvY2tldCBmb3IgYWxsIHJlcXVlc3RzIChpbmNsdWRpbmcgcXVlcmllcyBhbmQgbXV0YXRpb25zKVxuICB3ZWJzb2NrZXRzT25seSA9IGZhbHNlLFxuICAvLyBDdXN0b20gc3RhcnRpbmcgbGluay5cbiAgLy8gSWYgeW91IHdhbnQgdG8gcmVwbGFjZSB0aGUgZGVmYXVsdCBIdHRwTGluaywgc2V0IGBkZWZhdWx0SHR0cExpbmtgIHRvIGZhbHNlXG4gIGxpbmsgPSBudWxsLFxuICAvLyBDdXN0b20gcHJlLWF1dGggbGlua3NcbiAgLy8gVXNlZnVsIGlmIHlvdSB3YW50LCBmb3IgZXhhbXBsZSwgdG8gc2V0IGEgY3VzdG9tIG1pZGRsZXdhcmUgZm9yIHJlZnJlc2hpbmcgYW4gYWNjZXNzIHRva2VuLlxuICBwcmVBdXRoTGlua3MgPSBbXSxcbiAgLy8gSWYgdHJ1ZSwgYWRkIHRoZSBkZWZhdWx0IEh0dHBMaW5rLlxuICAvLyBEaXNhYmxlIGl0IGlmIHlvdSB3YW50IHRvIHJlcGxhY2UgaXQgd2l0aCBhIHRlcm1pbmF0aW5nIGxpbmsgdXNpbmcgYGxpbmtgIG9wdGlvbi5cbiAgZGVmYXVsdEh0dHBMaW5rID0gdHJ1ZSxcbiAgLy8gT3B0aW9ucyBmb3IgdGhlIGRlZmF1bHQgSHR0cExpbmtcbiAgaHR0cExpbmtPcHRpb25zID0ge30sXG4gIC8vIEN1c3RvbSBBcG9sbG8gY2FjaGUgaW1wbGVtZW50YXRpb24gKGRlZmF1bHQgaXMgYXBvbGxvLWNhY2hlLWlubWVtb3J5KVxuICBjYWNoZSA9IG51bGwsXG4gIC8vIE9wdGlvbnMgZm9yIHRoZSBkZWZhdWx0IGNhY2hlXG4gIGluTWVtb3J5Q2FjaGVPcHRpb25zID0ge30sXG4gIC8vIEFkZGl0aW9uYWwgQXBvbGxvIGNsaWVudCBvcHRpb25zXG4gIGFwb2xsbyA9IHt9LFxuICAvLyBhcG9sbG8tbGluay1zdGF0ZSBvcHRpb25zXG4gIGNsaWVudFN0YXRlID0gbnVsbCxcbiAgLy8gRnVuY3Rpb24gcmV0dXJuaW5nIEF1dGhvcml6YXRpb24gaGVhZGVyIHRva2VuXG4gIGdldEF1dGggPSBkZWZhdWx0R2V0QXV0aCxcbiAgLy8gTG9jYWwgU2NoZW1hXG4gIHR5cGVEZWZzID0gdW5kZWZpbmVkLFxuICAvLyBMb2NhbCBSZXNvbHZlcnNcbiAgcmVzb2x2ZXJzID0gdW5kZWZpbmVkLFxuICAvLyBIb29rIGNhbGxlZCB3aGVuIHlvdSBzaG91bGQgd3JpdGUgbG9jYWwgc3RhdGUgaW4gdGhlIGNhY2hlXG4gIG9uQ2FjaGVJbml0ID0gdW5kZWZpbmVkLFxufSkge1xuICBsZXQgd3NDbGllbnQsIGF1dGhMaW5rLCBzdGF0ZUxpbmtcbiAgY29uc3QgZGlzYWJsZUh0dHAgPSB3ZWJzb2NrZXRzT25seSAmJiAhc3NyICYmIHdzRW5kcG9pbnRcblxuICAvLyBBcG9sbG8gY2FjaGVcbiAgaWYgKCFjYWNoZSkge1xuICAgIGNhY2hlID0gbmV3IEluTWVtb3J5Q2FjaGUoaW5NZW1vcnlDYWNoZU9wdGlvbnMpXG4gIH1cblxuICBpZiAoIWRpc2FibGVIdHRwKSB7XG4gICAgY29uc3QgaHR0cExpbmsgPSBjcmVhdGVVcGxvYWRMaW5rKHtcbiAgICAgIHVyaTogaHR0cEVuZHBvaW50LFxuICAgICAgLi4uaHR0cExpbmtPcHRpb25zLFxuICAgIH0pXG5cbiAgICBpZiAoIWxpbmspIHtcbiAgICAgIGxpbmsgPSBodHRwTGlua1xuICAgIH0gZWxzZSBpZiAoZGVmYXVsdEh0dHBMaW5rKSB7XG4gICAgICBsaW5rID0gZnJvbShbbGluaywgaHR0cExpbmtdKVxuICAgIH1cblxuICAgIC8vIEhUVFAgQXV0aCBoZWFkZXIgaW5qZWN0aW9uXG4gICAgYXV0aExpbmsgPSBzZXRDb250ZXh0KGFzeW5jIChfLCB7IGhlYWRlcnMgfSkgPT4ge1xuICAgICAgY29uc3QgQXV0aG9yaXphdGlvbiA9IGF3YWl0IGdldEF1dGgodG9rZW5OYW1lKVxuICAgICAgY29uc3QgYXV0aG9yaXphdGlvbkhlYWRlciA9IEF1dGhvcml6YXRpb24gPyB7IEF1dGhvcml6YXRpb24gfSA6IHt9XG4gICAgICByZXR1cm4ge1xuICAgICAgICBoZWFkZXJzOiB7XG4gICAgICAgICAgLi4uaGVhZGVycyxcbiAgICAgICAgICAuLi5hdXRob3JpemF0aW9uSGVhZGVyLFxuICAgICAgICB9LFxuICAgICAgfVxuICAgIH0pXG5cbiAgICAvLyBDb25jYXQgYWxsIHRoZSBodHRwIGxpbmsgcGFydHNcbiAgICBsaW5rID0gYXV0aExpbmsuY29uY2F0KGxpbmspXG5cbiAgICBpZiAocHJlQXV0aExpbmtzLmxlbmd0aCkge1xuICAgICAgbGluayA9IGZyb20ocHJlQXV0aExpbmtzKS5jb25jYXQoYXV0aExpbmspXG4gICAgfVxuICB9XG5cbiAgLy8gT24gdGhlIHNlcnZlciwgd2UgZG9uJ3Qgd2FudCBXZWJTb2NrZXRzIGFuZCBVcGxvYWQgbGlua3NcbiAgaWYgKCFzc3IpIHtcbiAgICAvLyBJZiBvbiB0aGUgY2xpZW50LCByZWNvdmVyIHRoZSBpbmplY3RlZCBzdGF0ZVxuICAgIGlmICh0eXBlb2Ygd2luZG93ICE9PSAndW5kZWZpbmVkJykge1xuICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXVuZGVyc2NvcmUtZGFuZ2xlXG4gICAgICBjb25zdCBzdGF0ZSA9IHdpbmRvdy5fX0FQT0xMT19TVEFURV9fXG4gICAgICBpZiAoc3RhdGUgJiYgc3RhdGVbY2xpZW50SWRdKSB7XG4gICAgICAgIC8vIFJlc3RvcmUgc3RhdGVcbiAgICAgICAgY2FjaGUucmVzdG9yZShzdGF0ZVtjbGllbnRJZF0pXG4gICAgICB9XG4gICAgfVxuXG4gICAgaWYgKCFkaXNhYmxlSHR0cCkge1xuICAgICAgbGV0IHBlcnNpc3RpbmdPcHRzID0ge31cbiAgICAgIGlmICh0eXBlb2YgcGVyc2lzdGluZyA9PT0gJ29iamVjdCcgJiYgcGVyc2lzdGluZyAhPSBudWxsKSB7XG4gICAgICAgIHBlcnNpc3RpbmdPcHRzID0gcGVyc2lzdGluZ1xuICAgICAgICBwZXJzaXN0aW5nID0gdHJ1ZVxuICAgICAgfVxuICAgICAgaWYgKHBlcnNpc3RpbmcgPT09IHRydWUpIHtcbiAgICAgICAgbGluayA9IGNyZWF0ZVBlcnNpc3RlZFF1ZXJ5TGluayhwZXJzaXN0aW5nT3B0cykuY29uY2F0KGxpbmspXG4gICAgICB9XG4gICAgfVxuXG4gICAgLy8gV2ViIHNvY2tldFxuICAgIGlmICh3c0VuZHBvaW50KSB7XG4gICAgICB3c0NsaWVudCA9IG5ldyBTdWJzY3JpcHRpb25DbGllbnQod3NFbmRwb2ludCwge1xuICAgICAgICByZWNvbm5lY3Q6IHRydWUsXG4gICAgICAgIGNvbm5lY3Rpb25QYXJhbXM6ICgpID0+IHtcbiAgICAgICAgICBjb25zdCBBdXRob3JpemF0aW9uID0gZ2V0QXV0aCh0b2tlbk5hbWUpXG4gICAgICAgICAgcmV0dXJuIEF1dGhvcml6YXRpb24gPyB7IEF1dGhvcml6YXRpb24sIGhlYWRlcnM6IHsgQXV0aG9yaXphdGlvbiB9IH0gOiB7fVxuICAgICAgICB9LFxuICAgICAgfSlcblxuICAgICAgLy8gQ3JlYXRlIHRoZSBzdWJzY3JpcHRpb24gd2Vic29ja2V0IGxpbmtcbiAgICAgIGNvbnN0IHdzTGluayA9IG5ldyBXZWJTb2NrZXRMaW5rKHdzQ2xpZW50KVxuXG4gICAgICBpZiAoZGlzYWJsZUh0dHApIHtcbiAgICAgICAgbGluayA9IGxpbmsgPyBsaW5rLmNvbmNhdCh3c0xpbmspIDogd3NMaW5rXG4gICAgICB9IGVsc2Uge1xuICAgICAgICBsaW5rID0gc3BsaXQoXG4gICAgICAgICAgLy8gc3BsaXQgYmFzZWQgb24gb3BlcmF0aW9uIHR5cGVcbiAgICAgICAgICAoeyBxdWVyeSB9KSA9PiB7XG4gICAgICAgICAgICBjb25zdCB7IGtpbmQsIG9wZXJhdGlvbiB9ID0gZ2V0TWFpbkRlZmluaXRpb24ocXVlcnkpXG4gICAgICAgICAgICByZXR1cm4ga2luZCA9PT0gJ09wZXJhdGlvbkRlZmluaXRpb24nICYmXG4gICAgICAgICAgICAgIG9wZXJhdGlvbiA9PT0gJ3N1YnNjcmlwdGlvbidcbiAgICAgICAgICB9LFxuICAgICAgICAgIHdzTGluayxcbiAgICAgICAgICBsaW5rLFxuICAgICAgICApXG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgaWYgKGNsaWVudFN0YXRlKSB7XG4gICAgY29uc29sZS53YXJuKCdjbGllbnRTdGF0ZSBpcyBkZXByZWNhdGVkLCBzZWUgaHR0cHM6Ly92dWUtY2xpLXBsdWdpbi1hcG9sbG8ubmV0bGlmeS5jb20vZ3VpZGUvY2xpZW50LXN0YXRlLmh0bWwnKVxuICAgIHN0YXRlTGluayA9IHdpdGhDbGllbnRTdGF0ZSh7XG4gICAgICBjYWNoZSxcbiAgICAgIC4uLmNsaWVudFN0YXRlLFxuICAgIH0pXG4gICAgbGluayA9IGZyb20oW3N0YXRlTGluaywgbGlua10pXG4gIH1cblxuICBjb25zdCBhcG9sbG9DbGllbnQgPSBuZXcgQXBvbGxvQ2xpZW50KHtcbiAgICBsaW5rLFxuICAgIGNhY2hlLFxuICAgIC8vIEFkZGl0aW9uYWwgb3B0aW9uc1xuICAgIC4uLihzc3IgPyB7XG4gICAgICAvLyBTZXQgdGhpcyBvbiB0aGUgc2VydmVyIHRvIG9wdGltaXplIHF1ZXJpZXMgd2hlbiBTU1JcbiAgICAgIHNzck1vZGU6IHRydWUsXG4gICAgfSA6IHtcbiAgICAgIC8vIFRoaXMgd2lsbCB0ZW1wb3JhcnkgZGlzYWJsZSBxdWVyeSBmb3JjZS1mZXRjaGluZ1xuICAgICAgc3NyRm9yY2VGZXRjaERlbGF5OiAxMDAsXG4gICAgICAvLyBBcG9sbG8gZGV2dG9vbHNcbiAgICAgIGNvbm5lY3RUb0RldlRvb2xzOiBwcm9jZXNzLmVudi5OT0RFX0VOViAhPT0gJ3Byb2R1Y3Rpb24nLFxuICAgIH0pLFxuICAgIHR5cGVEZWZzLFxuICAgIHJlc29sdmVycyxcbiAgICAuLi5hcG9sbG8sXG4gIH0pXG5cbiAgLy8gUmUtd3JpdGUgdGhlIGNsaWVudCBzdGF0ZSBkZWZhdWx0cyBvbiBjYWNoZSByZXNldFxuICBpZiAoc3RhdGVMaW5rKSB7XG4gICAgYXBvbGxvQ2xpZW50Lm9uUmVzZXRTdG9yZShzdGF0ZUxpbmsud3JpdGVEZWZhdWx0cylcbiAgfVxuXG4gIGlmIChvbkNhY2hlSW5pdCkge1xuICAgIG9uQ2FjaGVJbml0KGNhY2hlKVxuICAgIGFwb2xsb0NsaWVudC5vblJlc2V0U3RvcmUoKCkgPT4gb25DYWNoZUluaXQoY2FjaGUpKVxuICB9XG5cbiAgcmV0dXJuIHtcbiAgICBhcG9sbG9DbGllbnQsXG4gICAgd3NDbGllbnQsXG4gICAgc3RhdGVMaW5rLFxuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiByZXN0YXJ0V2Vic29ja2V0cyAod3NDbGllbnQpIHtcbiAgLy8gQ29weSBjdXJyZW50IG9wZXJhdGlvbnNcbiAgY29uc3Qgb3BlcmF0aW9ucyA9IE9iamVjdC5hc3NpZ24oe30sIHdzQ2xpZW50Lm9wZXJhdGlvbnMpXG5cbiAgLy8gQ2xvc2UgY29ubmVjdGlvblxuICB3c0NsaWVudC5jbG9zZSh0cnVlKVxuXG4gIC8vIE9wZW4gYSBuZXcgb25lXG4gIHdzQ2xpZW50LmNvbm5lY3QoKVxuXG4gIC8vIFB1c2ggYWxsIGN1cnJlbnQgb3BlcmF0aW9ucyB0byB0aGUgbmV3IGNvbm5lY3Rpb25cbiAgT2JqZWN0LmtleXMob3BlcmF0aW9ucykuZm9yRWFjaChpZCA9PiB7XG4gICAgd3NDbGllbnQuc2VuZE1lc3NhZ2UoXG4gICAgICBpZCxcbiAgICAgIE1lc3NhZ2VUeXBlcy5HUUxfU1RBUlQsXG4gICAgICBvcGVyYXRpb25zW2lkXS5vcHRpb25zLFxuICAgIClcbiAgfSlcbn1cblxuZnVuY3Rpb24gZGVmYXVsdEdldEF1dGggKHRva2VuTmFtZSkge1xuICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcbiAgICAvLyBnZXQgdGhlIGF1dGhlbnRpY2F0aW9uIHRva2VuIGZyb20gbG9jYWwgc3RvcmFnZSBpZiBpdCBleGlzdHNcbiAgICBjb25zdCB0b2tlbiA9IHdpbmRvdy5sb2NhbFN0b3JhZ2UuZ2V0SXRlbSh0b2tlbk5hbWUpXG4gICAgLy8gcmV0dXJuIHRoZSBoZWFkZXJzIHRvIHRoZSBjb250ZXh0IHNvIGh0dHBMaW5rIGNhbiByZWFkIHRoZW1cbiAgICByZXR1cm4gdG9rZW4gPyBgQmVhcmVyICR7dG9rZW59YCA6ICcnXG4gIH1cbn1cbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/vue-cli-plugin-apollo/graphql-client/src/index.js\n");

  /***/
}),

And then, IE11 crushes down because const is still used there.

Hi, I'm trying to make a smart request with this module in order to grab my routes for the nuxt-sitemaps-module in order to create my sitemap. I need to make this request from within nuxt.config.js I have tried this way with no luck (as app doesn't exist in this context). What would be the right way to do this?
Thanks in advance!

The relevant part of my nuxt.config.js

import gql from 'graphql-tag'

module.exports = {

sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.com/',
    generate: true,
    cacheTime: 86400,
    trailingSlash: true,
    routes: async ({ app }) => {
        const myRoutes = ['/one-random-path/']
        let client = app.apolloProvider.defaultClient
        let myProductsQuery = gql`query {
              products {
                slug
              }
            }`
          let myBrandsQuery = gql`query {
              brands {
                slug
              }
            }`
          const myProducts = await client.query({ query: myProductsQuery })
          const myBrands = await client.query({ query: myBrandsQuery })

          return [myRoutes, ...myProducts, ...myBrands]
        }
    }
}

I have an app with connections to multiple back-end services, so I have clientA and clientB.

I am authenticating via clientA, since that is the service that provides this functionality. I want to make authenticated requests only to clientA.

I get a token from my clientA service and set it as described in the docs this.$apolloHelpers.onLogin(token, this.$apolloProvider.clients.clientA)

Note, that I am passing clientA as client in the second parameter.

What I expect is to have the authorization header present for requests made by clientA while clientB should not have any authorization.

However, what happens is that the token - that is valid obviously only for clientA - gets passed along with clientB requests too.

My question is: what can I do to prevent authorization to be sent along clientB requests?
That service uses token check too so my request fails due too malformed token - obviously.

Hi,

I am new to graphql and apollo. I am trying to implement firebase auth with the apollo-module. As we know that firebase provides a token which expires in 1 hr so I am looking for a solution where I can refresh token after 1 hr.

What problem does this feature solve?

The new vue-cli-plugin-apollo version contains new updates in this release like preAuthLinks & promisified getAuth.

https://github.com/Akryum/vue-cli-plugin-apollo/releases/tag/v0.22.2

Hi,
Can this module be used with Apollo Client 3.0? I can find that vue-apollo can be used with the latest apollo client, however I am not sure I this module can be used with the latest client. It would be great if someone can provide some example

I need an open WS subscription through all the pages that use the same layout (this layout is only accessible if authenticated)
So I added a subscription in the layout's created lifecycle hook. But when I navigate to another view with the same layout, the stop message is automatically sent to the WebSocket to close the connection. Neither created nor destroyed is called so it should work.

What is wrong with this idea? Which is the most elegant way to achieve what I want?
A middleware that runs in all the pages of the layout and creates the connection should work, but it would be creating subscriptions and ending subscriptions all the time :'(

I have a nuxtjs app that uses apollo module for graphql communication with FaunaDB.
I want to make multiple mutations in one transaction to FaunaDB. So I don't want to send a different request for every single mutation to FaunaDB, I want to make a single request that contains all the mutations. Is it possible?

The issue similar to this https://github.com/storybookjs/storybook/issues/9581
Do we have solution for nuxt?
Basically I am building nuxt with nuxt apollo and everything running well (no error on 'npm run dev')
After installing nuxt storybook (https://storybook.nuxtjs.org/setup) and run 'npm run storybook'
it comes error like

ERROR in ./pages/menus/index.vue?vue&type=script&lang=js& (./nodemodules/vue-docgen-loader/lib??ref--8!./nodemodules/babel-loader/lib??ref--0-0!./nodemodules/babel-loader/lib??ref--2-0!./nodemodules/@nuxt/components/dist/loader.js??ref--9-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/menus/index.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '~/apollo/queries/fetchMenus' in '/Users/xxxx/nuxt-app/pages/menus'

How can I make Apollo gql to be resolvable by the storybook?

Thank you!

The issue similar to this https://github.com/storybookjs/storybook/issues/9581
Do we have solution for nuxt?
Basically I am building nuxt with nuxt apollo and everything running well (no error on 'npm run dev')
After installing nuxt storybook (https://storybook.nuxtjs.org/setup) and run 'npm run storybook'
it comes error like

ERROR in ./pages/menus/index.vue?vue&type=script&lang=js& (./nodemodules/vue-docgen-loader/lib??ref--8!./nodemodules/babel-loader/lib??ref--0-0!./nodemodules/babel-loader/lib??ref--2-0!./nodemodules/@nuxt/components/dist/loader.js??ref--9-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/menus/index.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '~/apollo/queries/fetchMenus' in '/Users/xxxx/nuxt-app/pages/menus'

How can I make Apollo gql to be resolvable by the storybook?

Thank you!