Apollo Server와 Prisma를 이용한 자바스크립트 실시간 공유 문서 편집 애플리케이션 개발

10 Nov 2023

graphql

지난 몇 년 동안, 웹 애플리케이션에서 협업과 실시간 공유 문서 편집이 점점 중요해지고 있습니다. 실시간 공유 문서 편집 앱은 여러 사용자가 동시에 문서를 편집하고 변경 사항을 실시간으로 공유할 수 있도록 해주는 기능을 제공합니다. 아래에서는 Apollo Server와 Prisma를 사용하여 자바스크립트로 실시간 공유 문서 편집 애플리케이션을 개발하는 방법을 살펴보겠습니다.

1. Apollo Server 설정

먼저 Apollo Server를 설정해야 합니다. Apollo Server는 GraphQL API를 만들어주는 도구입니다. 다음과 같이 Apollo Server를 설치하고 설정합니다.

const { ApolloServer, gql } = require('apollo-server');
const { RedisPubSub } = require('graphql-redis-subscriptions');
const redis = require('redis');

const typeDefs = gql`
  type Document {
    id: ID!
    title: String!
    content: String!
  }

  type Query {
    documents: [Document!]!
  }

  type Mutation {
    createDocument(title: String!, content: String!): Document!
    updateDocument(id: ID!, title: String, content: String): Document!
  }

  type Subscription {
    documentUpdated: Document!
  }
`;

const resolvers = {
  Query: {
    documents: () => { ... },
  },
  Mutation: {
    createDocument: (_, { title, content }) => { ... },
    updateDocument: (_, { id, title, content }) => { ... },
  },
  Subscription: {
    documentUpdated: {
      subscribe: () => { ... },
    },
  },
};

const pubsub = new RedisPubSub({
  publisher: redis.createClient(),
  subscriber: redis.createClient(),
});

const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    path: '/subscriptions',
    onConnect: () => console.log('Connected to WebSocket'),
  },
  context: { pubsub },
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

2. Prisma 세팅

Prisma는 ORM(Object-Relational Mapping) 툴로, 데이터베이스와의 상호 작용을 도와줍니다. Prisma를 사용하여 데이터베이스에 접근하는 코드를 작성해봅시다.

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

3. Mutation 및 Subscription 구현

이제 Apollo Server의 Mutation과 Subscription을 구현해보겠습니다. Mutation을 사용하여 새로운 문서를 생성하고, 기존 문서를 업데이트할 수 있습니다. Subscription은 실시간으로 문서를 업데이트하는 데 사용됩니다.

Mutation: {
  createDocument: async (_, { title, content }, { pubsub }) => {
    const document = await prisma.document.create({
      data: {
        title,
        content,
      },
    });

    pubsub.publish('DOCUMENT_UPDATED', { documentUpdated: document });

    return document;
  },
  updateDocument: async (_, { id, title, content }, { pubsub }) => {
    const document = await prisma.document.update({
      where: { id },
      data: {
        title,
        content,
      },
    });

    pubsub.publish('DOCUMENT_UPDATED', { documentUpdated: document });

    return document;
  },
},
Subscription: {
  documentUpdated: {
    subscribe: (_, __, { pubsub }) => pubsub.asyncIterator('DOCUMENT_UPDATED'),
  },
},

4. React 클라이언트 구성

마지막으로 React 클라이언트를 구성해봅시다. Apollo Client를 사용하여 GraphQL API에 연결하고, Subscription을 구독하여 실시간으로 문서를 업데이트할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, ApolloClient, InMemoryCache, split } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { getMainDefinition } from '@apollo/client/utilities';
import App from './App';

const httpLink = createHttpLink({
  uri: 'http://localhost:4000',
});

const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/subscriptions',
  options: {
    reconnect: true,
  },
});

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(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

위의 코드를 사용하여 Apollo Server와 Prisma를 이용한 자바스크립트 실시간 공유 문서 편집 애플리케이션을 개발할 수 있습니다. Apollo Server를 통해 GraphQL API를 생성하고, Prisma를 사용하여 데이터베이스와 상호 작용하며, React 클라이언트를 활용하여 실시간으로 문서를 업데이트할 수 있습니다.

#graphql #javascript