Apollo Subscription 으로 GraphQL 서버와 WebSocket 통신하기

구독

백엔드 데이터의 변경 사항에 대해 클라이언트에 실시간으로 알리는데 유용합니다.

Query,Mutation 과 달리 지속적인 연결을 유지해야 하기 때문에 graphql-ws 라이브러리를 통해 WebSocket으로 통신합니다.

 

구독은 이럴 때 사용합니다.

이 경우가 아니라면 쿼리를 사용하여 간헐적 폴링을 하거나 필요한 순간에만 쿼리 하세요.

또한 구독은 외부 데이터의 변경 사항을 구독하는 것입니다. 로컬 클라이언트 캐시의 변경사항 구독에 사용할 수 없습니다!

• 큰 개체에 대한 작은 증분 변경
  • 큰 덩어리 객체에서 필요한 개별 필드의 업데이트가 발생했을때 가져오는 경우를 뜻합니다.
• 대기 시간이 짧은 실시간 업데이트
  • 예를 들면 채팅 앱에서 실시간 메시지를 주고 받는 경우

 

Apollo Client 에서 지원하는 라이브러리

• graphql-ws (권장)
• subscriptions-transport-ws (구 방식)

 

구독 정의

서버, 클라이언트 측 모두에서 구독을 정의해야 합니다.

 

서버 측

- GraphQL 스키마에서 사용 가능한 구독을 유형의 필드로 정의합니다.

type Subscription {
  commentAdded(postID: ID!): Comment
}

 

클라이언트 측

- Apollo 클라이언트가 실행할 각 구독의 모양을 정의합니다.

const COMMENTS_SUBSCRIPTION = gql`
  subscription OnCommentAdded($postID: ID!) {
    commentAdded(postID: $postID) {
      id
      content
    }
  }
`;

 

일반적인 쿼리와는 다릅니다. 서버에서 즉시 응답을 반환할 거란 기대 없습니다.

특정 이벤트가 발생했을 때에만 응답을 받습니다.

 

 

Setup

WebSocket 사용을 위한 라이브러리를 설치합니다.

npm install graphql-ws

이떄 Apollo Link 라는 것을 사용해야 합니다.

 

 

Apollo Link 란?

Apollo 클라이언트의 네트워크 통신을 사용자 지정하는 데 도움이 되는 라이브러리 입니다.

일반적으로 알고있는 middleware 와 같은 역할을 합니다. axios 로 따지면 axios intercepter 같은 녀석입니다.

import { ApolloLink } from '@apollo/client';

const timeStartLink = new ApolloLink((operation, forward) => {
  operation.setContext({ start: new Date() }); // 무언가 수행
  return forward(operation); // 다음으로 링크를 호출
});

그리고 이러한 링크를 연결 (체인)

import { ApolloLink } from '@apollo/client';

const roundTripLink = new ApolloLink((operation, forward) => {
  // Called before operation is sent to server
  operation.setContext({ start: new Date() });

  return forward(operation).map((data) => {
    // Called after server responds
    const time = new Date() - operation.getContext().start;
    console.log(`Operation ${operation.operationName} took ${time} to complete`);
    return data;
  });
});

Apollo Client 인스턴스에 link 추가하면 완료

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import { RetryLink } from '@apollo/client/link/retry';

const directionalLink = new RetryLink().split(
  (operation) => operation.getContext().version === 1,
  new HttpLink({ uri: "http://localhost:4000/v1/graphql" }),
  new HttpLink({ uri: "http://localhost:4000/v2/graphql" })
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: directionalLink
});

 

네 Apollo Link 를 사용하여 네트워크 통신 사이에 WebSocket 을 끼워넣는다는 의미로 이해할 수 있겠네요.

아주 간단하게 GraphQLWsLink 링크 체인에 추가만 해주면 됩니다.

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

const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://localhost:4000/subscriptions',
}));

 

그런데 의문인 것은 이렇게 하면 모든 네트워크 통신들이 WebSocket 으로 되는게 아닌가 싶습니다.

기존 Query/Mutation 은 HTTP 를 그대로 사용해야 하는데요.

 

그래서 boolean 검사 결과에 따라 HttpLink 또는 GraphQLWsLink 를 사용하도록 분할 기능을 제공합니다.

분할 기능을 이용하여 실행 중인 작업 유형에 알맞은 링크를 결합합니다.

import { split, HttpLink } from '@apollo/client';
import { getMainDefinition } from '@apollo/client/utilities';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://localhost:4000/subscriptions',
  connectionParams: {
    authToken: user.authToken, // 통신에 인증이 필요한 경우 이렇게 추가해야 합니다.
  },
}));

// The split function takes three parameters:
//
// * A function that's called for each operation to execute
// * The Link to use for an operation if the function returns a "truthy" value
// * The Link to use for an operation if the function returns a "falsy" value
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink,
);

const client = new ApolloClient({
  link: splitLink, // 링크 연결
  cache: new InMemoryCache()
});

 

 

구독 실행

리액트에서 useSubscription hook 을 사용하여 구독합니다.

useQuery hook과 거의 동일하게 동작하므로 어렵지 않습니다. 매우 간단합니다.

useSubscription hook 의 응답값의 data 에는 항상 최신 데이터가 들어가게 됩니다.

 

const COMMENTS_SUBSCRIPTION = gql`
  subscription OnCommentAdded($postID: ID!) {
    commentAdded(postID: $postID) {
      id
      content
    }
  }
`;

function LatestComment({ postID }) {
  const { data, loading } = useSubscription(
    COMMENTS_SUBSCRIPTION,
    { variables: { postID } }
  );
  return <h4>New comment: {!loading && data.commentAdded.content}</h4>;
}

 

블로그의 게시물에 대한 기존 댓글을 모두 가져오는 쿼리인 COMMENTS_QUERY 가 있고

새 댓글 추가 COMMENTS_SUBSCRIPTION 에 대한 구독을 하고 싶은 경우

useQuery 도 쓰고 useSubscription 도 써야 할까요?

 

이럴땐 useQuery 응답값 중 하나인 subscribeToMore 함수를 사용하면 됩니다.

이 함수는 무한스크롤 또는 페이지네이션 작업 시 사용되는 fetchMore 과 유사합니다.

• document : 실행할 구독을 나타냅니다.
• variables : 구독을 실행할 때 포함할 변수를 나타냅니다.
• updateQuery : 이전 쿼리의 현재 캐시된 결과와 subscriptionData를 GraphQL 서버에서 푸시한 결과와 결합하는 방법을 Apollo 클라이언트에 알려주는 기능입니다. 이 함수의 반환 값은 쿼리에 대해 현재 캐시된 결과를 완전히 대체합니다 .

function CommentsPageWithData({ params }) {
  const { subscribeToMore, ...result } = useQuery(
    COMMENTS_QUERY,
    { variables: { postID: params.postID } }
  );

  return (
    <CommentsPage
      {...result}
      subscribeToNewComments={() =>
        subscribeToMore({
          document: COMMENTS_SUBSCRIPTION,
          variables: { postID: params.postID },
          updateQuery: (prev, { subscriptionData }) => {
            if (!subscriptionData.data) return prev;
            const newFeedItem = subscriptionData.data.commentAdded;

            return Object.assign({}, prev, {
              post: {
                comments: [newFeedItem, ...prev.post.comments]
              }
            });
          }
        })
      }
    />
  );
}

아래와 같이 컴포넌트 마운트시 한번 수행시켜놓으면 구독 됩니다.

즉, 새로운 댓글이 추가될 때마다 업데이트 받아볼 수 있게 됩니다.

export function CommentsPage({subscribeToNewComments}) {
  useEffect(() => subscribeToNewComments(), []);
  return <>...</>
}

 

적절하게 연계해서 사용하는게 쉽지는 않아 보이네요.

계속 사용해 보면서 사용법에 익숙해져야 될 것 같습니다.