@vue/apollo-composable / useSubscription

Function: useSubscription()

useSubscription(subscription, options?): Result

A composable for executing GraphQL subscriptions with full reactivity.

Parameters

subscription

MaybeRefOrGetter<DocumentNode>

A GraphQL subscription document.

options?

MaybeRefOrGetter<Options>

Options to control how the subscription is executed.

Returns

Result

Subscription result object with reactive refs.

Example

<script setup lang="ts">
import { useSubscription } from '@vue/apollo-composable'
import gql from 'graphql-tag'

const OnMessage = gql`subscription OnMessage($channelId: ID!) {
  newMessage(channelId: $channelId) { id text author }
}`

const { result, error, onResult, onError } = useSubscription(OnMessage, {
  variables: { channelId: '1' }
})

onResult((data) => {
  console.log('New message:', data)
})

onError((error) => {
  console.error('Subscription error:', error.message)
})
</script>

<template>
  <div v-if="error">
    Error: {{ error.message }}
  </div>
  <div v-else>
    Last result: {{ result }}
  </div>
</template>