useSubscription을 활용한 실시간 구독

구독으로 실시간 데이터 받기

WebSocket 전송

npm install graphql-ws

WebSocket 링크 만들기

import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'

const wsLink = new GraphQLWsLink(createClient({
  url: 'wss://api.example.com/graphql'
}))

전송 방식의 문제

링크 분할

import { split, HttpLink } from '@apollo/client/core'
import { getMainDefinition } from '@apollo/client/utilities'

const httpLink = new HttpLink({ uri: '/graphql' })

const link = split(
  ({ query }) => {
    const def = getMainDefinition(query)
    return def.kind === 'OperationDefinition' && def.operation === 'subscription'
  },
  wsLink,
  httpLink
)

분할 링크를 클라이언트에 연결하기

const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache()
})

useSubscription 기초

import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { result } = useSubscription(gql(
  'subscription { messageAdded { id text } }'
))

각 푸시 처리하기

const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
  console.log('New message', res.data.messageAdded)
})

반응형 배열에 추가하기

const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
  messages.value.push(res.data.messageAdded)
})

구독 변수

useSubscription(
  gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
  { room: 'general' }
)

구독과 폴링 비교

빠른 확인

복습