Nuxt Apollo websockets link options?

Question

I'm trying to get websocket subscriptions working with Nuxt Apollo. For my server (8base.com) I need to send along a connectionParams object with the subscription request.

It seems Nuxt Apollo has a httpLinkOptions but what I really need is a wssLinkOptions. Anyone know of a way to do this with Nuxt? Ideally I don't have to replace Nuxt Apollo, as I'm using it all throughout the app.

Hey Drew, did you end up finding a solution for this? I'm having exactly same issue but the answers don't work for me. — Katie Kim, Jan 18 '23 at 05:47
@KatieKim yeah see accepted answer. But ultimately we stopped using Nuxt Apollo as it was just really buggy. We use GraphQL Request now and have never had any problems with it. — Drew Baker, Jan 19 '23 at 12:12

JeremyM4n · Answer 1 · 2020-04-22T00:11:42.707

According to the docs, you can setup a subscription as a WebSocketLink.

https://www.npmjs.com/package/@nuxtjs/apollo/v/3.0.4#example-with-subscription-graphcool-as-example

  // Set up subscription
  const wsLink = new WebSocketLink({
    uri: `wss://subscriptions.graph.cool/v1/${process.env.GRAPHQL_ALIAS}`,
    options: {
      reconnect: true,
      connectionParams: () => {
        const token = process.server ? ctx.req.session : window.__NUXT__.state.session
        return {
          Authorization: token ? `Bearer ${token}` : null
        }
      }
    }
  })

And here's the full example:

Nuxt Config:

// nuxt.config.js
apollo:{
 clientConfigs:{
  default: '~/apollo/client-configs/default.js'
 }
}

Default Client Config:

// apollo/client-configs/default.js
import { ApolloLink, concat, split } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'
import 'subscriptions-transport-ws' // this is the default of apollo-link-ws

export default (ctx) => {
  const httpLink = new HttpLink({uri: 'https://api.graph.cool/simple/v1/' + process.env.GRAPHQL_ALIAS})
  const authMiddleware = new ApolloLink((operation, forward) => {
    const token = process.server ? ctx.req.session : window.__NUXT__.state.session
    operation.setContext({
      headers: {
        Authorization: token ? `Bearer ${token}` : null
      }
    })
    return forward(operation)
  })
  // Set up subscription
  const wsLink = new WebSocketLink({
    uri: `wss://subscriptions.graph.cool/v1/${process.env.GRAPHQL_ALIAS}`,
    options: {
      reconnect: true,
      connectionParams: () => {
        const token = process.server ? ctx.req.session : window.__NUXT__.state.session
        return {
          Authorization: token ? `Bearer ${token}` : null
        }
      }
    }
  })

  const link = split(
    ({query}) => {
      const {kind, operation} = getMainDefinition(query)
      return kind === 'OperationDefinition' && operation === 'subscription'
    },
    wsLink,
    httpLink
  )

  return {
    link: concat(authMiddleware, link),
    cache: new InMemoryCache()
  }
}

The Client Config subscription should work using the Vue Apollo model: https://apollo.vuejs.org/guide/apollo/subscriptions.html#setup

If you just need the basics, you may also be able to just specify your HTTP and WS endpints:

apollo:{
 clientConfigs:{
  default:{
    httpEndpoint: YOUR_ENDPOINT,
    wsEndpoint: YOUR_WS_ENDPOINT
  }
 }
}

Thanks good find, that is the old docs, so curious if it works, but I will try it out. — Drew Baker, Apr 15 '20 at 17:46
I'm unable to figure out how to merge this example with the current way Nuxt Apollo wants to setup Apollo: https://github.com/nuxt-community/apollo-module — Drew Baker, Apr 21 '20 at 21:16
I added some more detail, specifically, how the Nuxt config loads the Client Config Subscription. Hope it's more helpful :) — JeremyM4n, Apr 22 '20 at 00:13

score 3 · Accepted Answer · answered Apr 22 '20 at 20:00

So after trying a few different ways, this seems like the best way. Simply overwrite the wsClient using a plugin.

So in nuxt.config.js:

    plugins: [
        { src: "~/plugins/apollo-ws-client.js", mode: "client" }
    ],
    apollo: {
        clientConfigs: {
            default: "~/plugins/apollo-config-default.js"
        }
    },

In plugins/apollo-config-default.js:

export default function() {
    return {
        httpEndpoint: "https://api.8base.com/123456",
        wsEndpoint: "wss://ws.8base.com"
    }
}

Then in plugins/apollo-ws-client.js

export default ({ app }) => {
    const client = app.apolloProvider.defaultClient
    const token = app.$apolloHelpers.getToken()

    if (token) {
        client.wsClient.lazy = true
        client.wsClient.reconnect = true
        client.wsClient.connectionParams = () => {
            return {
                workspaceId: "123456",
                token: token
            }
        }
    }
}

Works great.

how do you add headers to that? mine are completely ignored – Marcin Buglewicz Nov 19 '20 at 12:46 — Marcin Buglewicz, Nov 19 '20 at 12:46

score -1 · Answer 3 · answered Jul 17 '20 at 02:57

-1

this is how i configure inside nuxt.config straight forward

  modules: [
    '@nuxtjs/apollo',
  ],
  apollo: {
    clientConfigs: {
      default: {
          httpEndpoint: 'your_graphql_url'
      }
    }
  },
  env: {
      WS_URL: 'ws://you_url/ws',
  }

answered Jul 17 '20 at 02:57

Kent Dela Cruz Fueconcillo

668
5
15

Yes, but how do you then set a headers on that? – Drew Baker Jul 17 '20 at 18:56
on nuxt.config just add these lines – Kent Dela Cruz Fueconcillo Jul 23 '20 at 00:08

Nuxt Apollo websockets link options?

3 Answers3