Subscriptions

Real-time GraphQL subscriptions with WebSocket support.

Define Subscription Schema

type Subscription {
  messageAdded(channelId: ID!): Message!
  userTyping(channelId: ID!): User!
}

type Message {
  id: ID!
  content: String!
  userId: ID!
}

Implement Subscription Resolvers

export const messageSubscriptions = defineSubscription({
  messageAdded: {
    subscribe: (_, { channelId }, context) => {
      return context.pubsub.asyncIterator([`MESSAGE_${channelId}`])
    },
    resolve: payload => payload,
  },

  userTyping: {
    subscribe: (_, { channelId }, context) => {
      return context.pubsub.asyncIterator([`TYPING_${channelId}`])
    },
  },
})

Publish Events

export const messageMutations = defineMutation({
  sendMessage: async (_, { input }, context) => {
    const message = await context.db.message.create({
      data: input
    })

    // Publish to subscribers
    await context.pubsub.publish(`MESSAGE_${input.channelId}`, message)

    return message
  },
})

Client Usage

const { data } = await useAsyncData(
  () => $fetch('/api/graphql', {
    method: 'POST',
    body: {
      query: `
        subscription {
          messageAdded(channelId: "1") {
            id
            content
          }
        }
      `
    }
  })
)

Next Steps

• Resolvers
• GraphQL Yoga