Next.js: Anyone have an example of how to implement subscriptions?

[dmitryyankowski]

Hi i'm trying to implement subscriptions into next.js with graphcool :) Anyone have any examples of how this can be done.. using the new version of ApolloClient!

Thanks

[tgdn]

With graphql? Try subscriptions-transport-ws

[dmitryyankowski]

I mean't more of a full example :D

[mcevskb]

+1

[agustif]

Have you seen the npmjs links to GitHunt Api/React? https://github.com/apollostack/GitHunt-API https://github.com/apollostack/GitHunt-React

[mcevskb]

This worked for me

~~~js
import { ApolloClient } from 'apollo-client'
import { split } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'
import { InMemoryCache } from 'apollo-cache-inmemory'
import fetch from 'isomorphic-fetch'
import ws from 'websocket'

let apolloClient = null
const ssrMode = !process.browser

const GRAPHQL_URL = 'https://api.graph.cool/simple/v1/cjeuwkokg3lkm016474bx4h46'
const WS_URL = 'wss://subscriptions.us-west-2.graph.cool/v1/cjeuwkokg3lkm016474bx4h46'

// Polyfill fetch() on the server (used by apollo-client)
if (ssrMode) {
global.fetch = fetch
}

function create(initialState) {
// Create an http link:
const httpLink = new HttpLink({
uri: GRAPHQL_URL,
credentials: 'same-origin', // Additional fetch() options like credentials or headers
})

let link = httpLink
if (!ssrMode) {
// Create a WebSocket link:
const wsLink = new WebSocketLink({
uri: WS_URL,
options: {
reconnect: true,
},
webSocketImpl: ws.client,
})

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  httpLink
)

}

return new ApolloClient({
connectToDevTools: process.browser,
ssrMode: ssrMode, // Disables forceFetch on the server (so queries are only run once)
link: link,
cache: new InMemoryCache().restore(initialState || {}),
})
}

export default function initApollo(initialState) {
// Make sure to create a new client for every server-side request so that data
// isn't shared between connections (which would be bad)
if (!process.browser) {
return create(initialState)
}

// Reuse client on the client-side
if (!apolloClient) {
apolloClient = create(initialState)
}

return apolloClient
}
~~~

[lfades]

This package will help you to create an ApolloClient including subscriptions: next-with-apollo

[vinay72]

Here is an example of using subscriptions with graphcool :
subscription newPosts { Post( filter: { mutation_in: [CREATED] } ) { mutation node { description imageUrl } } }
you can learn more about subscriptions by viewing this link : https://www.graph.cool/docs/reference/graphql-api/subscription-api-aip7oojeiv/