Apollo-module: Can an example be made for Nuxt with subscriptions?

Created on 14 Nov 2017 · 9Comments · Source: nuxt-community/apollo-module

Can someone please make an official example using subscriptions with the new v3 :)

Can't seem to get it working with v2.1.1 :( Thank you

_{This question is available on Nuxt.js community (#c31)}

question

Source

dmitryyankowski

Most helpful comment

This is my clientDefault config file:

import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { WebSocketLink } from 'apollo-link-ws'
import { SubscriptionClient } from 'subscriptions-transport-ws'

export default (ctx) => {
  let link = null

  if (ctx.isServer) {
    link = new HttpLink({ uri: 'http://localhost:3000/graphql' })
  } else {
    const client = new SubscriptionClient('ws://localhost:3001/graphql', {
      reconnect: true
    })

    link = new WebSocketLink(client)
  }

  const cache = new InMemoryCache()

  return {
    link,
    cache
  }
}

Server side uses HTTP Link, Client uses Websocket link.

rnenjoy on 26 Dec 2017

👍2

All 9 comments

@lolcoolkat your question should be better posted in https://github.com/Akryum/vue-apollo, this package is just the wrapper for vue-apollo code

dohomi on 21 Nov 2017

👎1

Personally I don't use subscriptions but happy if someone would provide some code to extend the README

dohomi on 21 Nov 2017

Yes this only has the httpLink. How would it look like with a subscription ws link?

https://www.apollographql.com/docs/link/links/ws.html

rnenjoy on 23 Dec 2017

This is my clientDefault config file:

import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { WebSocketLink } from 'apollo-link-ws'
import { SubscriptionClient } from 'subscriptions-transport-ws'

export default (ctx) => {
  let link = null

  if (ctx.isServer) {
    link = new HttpLink({ uri: 'http://localhost:3000/graphql' })
  } else {
    const client = new SubscriptionClient('ws://localhost:3001/graphql', {
      reconnect: true
    })

    link = new WebSocketLink(client)
  }

  const cache = new InMemoryCache()

  return {
    link,
    cache
  }
}

Server side uses HTTP Link, Client uses Websocket link.

rnenjoy on 26 Dec 2017

👍2

@rnenjoy does your code work in your application?

dohomi on 26 Dec 2017

Yes dude. Works great! Fixed it last night. Need more help?

rnenjoy on 26 Dec 2017

@rnenjoy nope just asking I might extend our README with your ws example so great that you make it work

dohomi on 26 Dec 2017

By the way, here a current example for Angular 2 just in case someone wants to adopt some code: https://alligator.io/angular/graphql-subscriptions/

dohomi on 26 Dec 2017

Example is updated in the README