How do I setup my nuxt in a way that with @nuxt/apollo subscribeToMore works

Question

When using @nuxt/apollo in our nuxt project. For some reason I keep getting

Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql

As a error message from Nuxt. I use the following syntax:

apollo: {
  items: {
    $subscribeToMore: {
        // below is the subscription query.
        document: gql`
         subscription($Group: String!){
           agents(Group: $Group){
             _id
             name
            }
          } 
        `,
        variables () {
          return {
            Group: Object.keys(this.$auth.user.app_access)[0],
          }
        },
        updateQuery: (previousResult, { subscriptionData }) => {
          console.log(subscriptionData);
          return subscriptionData.data; 
        }
      },
   }
},

And my apollo config looks like this:

module.exports = function (ctx) {
  const httpEndpoint = ctx.route.path.includes('/app/cmb') ? process.env.GRAPHQL_HTTP_ENDPOINT : process.env.GRAPHQL_HTTP_ENDPOINT_IAM
  const wsEndpoint = ctx.route.path.includes('/app/cmb') ? process.env.GRAPHQL_WS_ENDPOINT : process.env.GRAPHQL_WS_ENDPOINT_IAM
  return {
    httpEndpoint,
    wsEndpoint,
    tokenName: 'auth._token.keycloak',
    inMemoryCacheOptions: {
      addTypename: false,
    },
    fetchOptions: { mode: 'no-cors' },
    authenticationType: 'Bearer',
    getAuth: (tokenName) => {
      if (process.client) {
        return localStorage.getItem(tokenName)
      } else {
        // get token from cookie in server side request
        return this.__VUE_SSR_CONTEXT__.req.headers.cookie.split('; ').reduce((acc, item) => {
          const split = item.split('=')

          if (split[0] === tokenName) {
            acc = decodeURIComponent(split[1]) // decode cookie value
          }

          return acc
        }, '')
      }
    },
    credentials: 'include'
  }
}

And in nuxt.config I have the following:

apollo: {
    clientConfigs: {
      default: '~/apollo.config.js'
    },
    authenticationType: 'Bearer',
    tokenName: 'auth._token.keycloak'
  },

The nuxt apollo in package.json: "@nuxtjs/apollo": "^4.0.1-rc.5",

Can somebody please tell me how to set this up the right way to have multiple subscriptions. With only one subscription works fine but when I want to add multiple with subscribeToMore, things go mayhem.

kissu kissu · Accepted Answer · 2021-05-27T13:04:30

Did you imported gql with

import gql from 'graphql-tag'

As shown here in the vue-apollo docs: https://apollo.vuejs.org/guide/apollo/queries.html#simple-query

How do I setup my nuxt in a way that with @nuxt/apollo subscribeToMore works

1 Answers