redux-graphql-subscriptions

A Redux middleware for handling GraphQL subscriptions.

This repo leverages subscriptions-transport-ws which is the awesome work of the Apollo guys over here and is intended to be coupled with a backend server that also uses subscriptions-transport-ws.

This is totally work in progress so all comment, critique help welcomed!

Getting Started

• Import the package npm install --save redux-graphql-subscriptions
• Instantiate the middleware, passing in the url of your websocket server.
• Pass the middleware instance into your redux store.

import { createStore, combineReducers, applyMiddleware } from 'redux'
import reducers from 'ducks'
import createGraphQLSubscriptionsMiddleware from 'redux-graphql-subscriptions'

const graphQLSubscriptionsMiddleware = createGraphQLSubscriptionsMiddleware('ws://localhost:8001/subscriptions')

let todoApp = combineReducers(reducers)
let store = createStore(
  todoApp,
  applyMiddleware(logger, graphQLSubscriptionsMiddleware)
)

• Import the subscribe and unsubscribe functions and use them in action creators.

import { subscribe, unsubscribe } from 'redux-graphql-subscriptions'

export const subscribeToNewComments = () => subscribe({ ...newComment, { channel: 'one' } })
export const unsubscribeFromNewComments = () => unsubscribe('one')

// Subscription object
const newComment = {
    query: newCommentSubscription,
    success: receivedNewComment,
    failure: receivedNewCommentWithErrors,
}

• You can use those action creators in your lifecycle hooks to subscribe and unsubscribe from subscriptions that a component is dependent upon like this...

    componentWillMount() {
        this.props.subscribeToNewComments()
        this.props.fetchingCommentHistory()
    }

    componentWillUnMount() {
        this.props.unsubscribeFromNewComments()
    }

API

createGraphQLSubscriptionsMiddleware(url, options)

• url: string : url that the client will connect to, starts with ws:// or wss://
• options?: Object : optional, object to modify default client behavior
  • timeout?: number : how long the client should wait in ms for a keep-alive message from the server (default 10000 ms), this parameter is ignored if the server does not send keep-alive messages. This will also be used to calculate the max connection time per connect/reconnect
  • lazy?: boolean : use to set lazy mode - connects only when first subscription created, and delay the socket initialization
  • connectionParams?: Object | Function : object that will be available as first argument of onConnect (in server side), if passed a function - it will call it and send the return value
  • reconnect?: boolean : automatic reconnect in case of connection error
  • reconnectionAttempts?: number : how many reconnect attempts
  • connectionCallback?: (error) => {} : optional, callback that called after the first init message, with the error (if there is one)

subscribe(subscription)

• subscription: Object : the required fields for a subscription
  • query: string : GraphQL subscription
  • variables?: Object : GraphQL subscription variables, requires channel value to be set to denote the channel to listen to.
  • success: function : The action creator to be dispatched when the subscription response contains no errors
  • failure: function : The action creator to be dispatched when the subscription response does contain errors

unsubscribe(id)

• channel: string : channel to unsubscribe from