Subscription

React subscription usage examples need source copy before they can be completed.

List Operations

Subscription bodies can contain all of the list operations described in this document.

Configuring the client

Houdini can work with any websocket client as long as you can provide an a function that returns an object that satisfies the SubscriptionHandler interface to the subscriptions plugin you can import from $houdini/plugins.

Using graphql-ws

If your API supports the graphql-ws protocol, you can create a client and pass it directly:

src/client.ts

import { createClient } from 'graphql-ws'
import { subscription } from '$houdini/plugins'

// prettier-ignore
export default new HoudiniClient({
  url: "...",
  plugins: [
    subscription(() => createClient({
      url: 'ws://api.url'
    }))
  ]
})

src/client.js

import { createClient } from 'graphql-ws'
import { subscription } from '$houdini/plugins'

// prettier-ignore
export default new HoudiniClient({
    url: "...",
    plugins: [
        subscription(() => createClient({
            url: 'ws://api.url'
        }))
    ]
})

Server-Sent Events

If your server supports the latest Server-sent events, you can use them to power your subscriptions:

src/client.ts

import { createClient } from 'graphql-sse'
import { subscription } from '$houdini/plugins'

export default new HoudiniClient({
  url: "...",
  plugins: [
    subscription(() => createClient({url: '...'}))
  ]
})

src/client.js

import { createClient } from 'graphql-sse'
import { subscription } from '$houdini/plugins'

export default new HoudiniClient({
    url: "...",
    plugins: [
        subscription(() => createClient({ url: '...' }))
    ]
})

Authentication

Subscriptions integrate with the rest of the session logic provided by houdini. When your session value, fetchParams or metadata changes a new subscription client will be created based on that new information. You can use this information to pass connection parameters to your subscription client. For example, authenticating graphql-ws would look something like:

src/client.ts

import { createClient } from 'graphql-ws'
import { subscription } from '$houdini/plugins'

// prettier-ignore
export default new HoudiniClient({
  url: "...",
  plugins: [
    subscription(({ session }) => createClient({
      url: 'ws://api.url',
      connectionParams: () => {
        return {
          headers: {
            Authorization: `Bearer ${session.token}`,
          },
        }
      },
    }))
  ]
})

src/client.js

import { createClient } from 'graphql-ws'
import { subscription } from '$houdini/plugins'

// prettier-ignore
export default new HoudiniClient({
    url: "...",
    plugins: [
        subscription(({ session }) => createClient({
            url: 'ws://api.url',
            connectionParams: () => {
                return {
                    headers: {
                        Authorization: `Bearer ${session.token}`,
                    },
                }
            },
        }))
    ]
})