GraphQL subscriptions with SWR

api.ts

import useSWRSubscription, { SWRSubscriptionOptions } from 'swr/subscription'
import { createClient } from 'graphql-ws'

export function useSubscription<TResult, TVariables extends Variables | undefined>(subscription: TypedDocumentNode<TResult, TVariables>, variables?: TVariables) {
	return useSWRSubscription<TResult, any, GraphQLRequestInput<TResult, TVariables>>({
		query: subscription,
		variables,
	} as GraphQLRequestInput<TResult, TVariables>, subscribe)
}

export function subscribe<TResult, TVariables extends Variables | undefined>(input: GraphQLRequestInput<TResult, TVariables>, options: SWRSubscriptionOptions) {
	return wsClient.subscribe({
		query: print(input.query),
		variables: input.variables,
	}, {
		next: value => options.next(null, value.data),
		error: error => options.next(error, null),
		complete: () => {},
	})
}
  
type GraphQLRequestInput<TResult, TVariables extends Variables | undefined> = {
	query: TypedDocumentNode<TResult, TVariables>
	variables: TVariables
}