How to get Graphql Subscriptions working. A solution to start with it

[chregu]

Getting GraphQL subscriptions work in vendure (1.9.x) is not totally straightforward. Here's how I got the basics running within a plugin. Then you can access it via /subscription-api

Authentication doesn't really work (see the comments to maybe make it work)

yarn add subscriptions-transport-ws

plugin.ts

import { PluginCommonModule, VendurePlugin } from '@vendure/core'

import { GraphQLModule } from '@nestjs/graphql'
import { join } from 'path'
import { SubscriptionResolver } from './subscription-resolver'

@VendurePlugin({
    imports: [
        PluginCommonModule,
        GraphQLModule.forRootAsync({
            useFactory: () => ({
                typePaths: [join(__dirname, '/*.graphql')],
                include: [SubscriptionPlugin],
                path: '/subscription-api',
                context: ({ req, res, connection }) => {
                    if (!req) {
                        req = connection.context
                        req.get = () => null // our "req" doesn't have get for authentication headers, so maybe would be another point to get auth
                    }
                    return { req, res }
                },
                fieldResolverEnhancers: ['guards'],
                installSubscriptionHandlers: true,
                subscriptions: {
                    onConnect: (connectionParams, _, context) => {
                        // if you need authenticated request, this has to be somehow extended, maybe via connectionParams
                        // somehow we don't have a session here (couldn't figure out how to get it, but maybe it's possibe
                        return { req: context.request }
                    },
                },
            }),
        }),
    ],
    providers: [SubscriptionResolver],
})
export class SubscriptionPlugin {}

subscriptions.graphql

type Subscription {
    commentAdded: String
}

type Mutation {
    addComment(comment: String!): String!
}

type Query {
    somehowWeNeedAQuery: Boolean
}

resolver.ts

import { Args, Mutation, Resolver, Subscription } from '@nestjs/graphql'
import { PubSub } from 'graphql-subscriptions'
import { Ctx, RequestContext } from '@vendure/core'

const pubSub = new PubSub()

@Resolver('Pages')
export class SubscriptionResolver {
    @Subscription()
    commentAdded(@Ctx() ctx: RequestContext) {
        return pubSub.asyncIterator('commentAdded')
    }

    @Mutation(returns => String)
    async addComment(@Args('comment', { type: () => String }) comment: string) {
        pubSub.publish('commentAdded', { commentAdded: comment })
        return comment
    }
}

[williamrijksen]

When I try the solution above, I get the following error:

Error: Query.administrators defined in resolvers, but not in schema

I use vendure 1.9.1.

How could I solve this issue?

[chregu]

I updated the code, looks like include: [SubscriptionPlugin], was wrong

[williamrijksen]

Update for vendure v2 beta:

GraphQLModule.forRootAsync<ApolloDriverConfig>({
            driver: ApolloDriver,
            useFactory: () => ({
                typePaths: [join(__dirname, '/*.graphql')],
                path: '/subscription-api',
                installSubscriptionHandlers: true,
                fieldResolverEnhancers: ['guards'],
                include: [SubscriptionPlugin],
                context: ctx => {
                    if (ctx.extra) {
                        return {
                            req: {
                                ...ctx.extra.request,
                                headers: {
                                    ...ctx.extra.request.headers,
                                    ...ctx.connectionParams?.headers,
                                },
                                connectionParams: ctx.connectionParams,
                                get: () => null,
                            },
                        };
                    }

                    return { req: ctx.req };
                },
                subscriptions: {
                    'graphql-ws': true,
                },
            }),
        }),