GraphQL Subscriptions를 이용한 자바스크립트 실시간 위치 기반 서비스 개발하기

10 Nov 2023

javascript

GraphQL Subscriptions는 GraphQL의 일부로 실시간 데이터 업데이트를 지원하는 기능입니다. 이를 통해 서버와 클라이언트 간에 양방향 통신을 할 수 있으며, 실시간으로 데이터를 업데이트할 수 있는 웹 애플리케이션을 개발할 수 있습니다.

자바스크립트로 실시간 위치 기반 서비스 개발하기

이제 우리는 GraphQL Subscriptions를 활용하여 자바스크립트로 실시간 위치 기반 서비스를 개발하는 방법에 대해 알아보겠습니다.

1. Prisma 서비스 설정하기

먼저, Prisma를 사용하여 데이터베이스를 설정합니다. Prisma는 GraphQL과 함께 사용할 수 있는 강력한 ORM(Object-Relational Mapping) 도구입니다.

// prisma.yml 파일

endpoint: YOUR_PRISMA_ENDPOINT
datamodel: datamodel.prisma

2. GraphQL 스키마 정의하기

다음으로, GraphQL 스키마를 정의합니다. 스키마는 API의 타입과 쿼리, 뮤테이션, 서브스크립션 등을 정의하는데 사용됩니다.

type User {
  id: ID!
  name: String!
  location: String!
}

type Query {
  getUser(id: ID!): User
}

type Mutation {
  updateUserLocation(id: ID!, location: String!): User
}

type Subscription {
  userLocationUpdated(id: ID!): User
}

위 스키마에서는 User 타입, Query 타입, Mutation 타입 및 Subscription 타입을 정의했습니다.

3. 서비스 로직 구현하기

이제 자바스크립트를 사용하여 서비스 로직을 구현합니다. 먼저, GraphQL Yoga와 Prisma Client를 설치합니다.

npm install graphql-yoga prisma --save

그리고 다음과 같이 구현합니다.

// index.js 파일

const { GraphQLServer } = require('graphql-yoga')
const { Prisma } = require('prisma-binding')

const resolvers = {
  Query: {
    getUser: (_, args, context, info) => {
      return context.prisma.query.user(
        { where: { id: args.id } },
        info
      )
    },
  },
  Mutation: {
    updateUserLocation: (_, args, context, info) => {
      return context.prisma.mutation.updateUser(
        {
          where: { id: args.id },
          data: { location: args.location },
        },
        info
      )
    },
  },
  Subscription: {
    userLocationUpdated: {
      subscribe: (_, args, context, info) => {
        return context.prisma.subscription.user(
          {
            where: { node: { id: args.id } },
          },
          info
        )
      },
      resolve: (payload, args, context, info) => {
        return payload
      },
    },
  },
}

const server = new GraphQLServer({
  typeDefs: './schema.graphql',
  resolvers,
  context: req => ({
    ...req,
    prisma: new Prisma({
      typeDefs: 'src/generated/prisma.graphql',
      endpoint: 'YOUR_PRISMA_ENDPOINT',
      secret: 'YOUR_PRISMA_SECRET',
      debug: true,
    }),
  }),
})
server.start(() => console.log(`Server is running on http://localhost:4000`))

위 코드에서는 Prisma 클라이언트를 사용하여 데이터베이스에 대한 쿼리와 뮤테이션 및 서브스크립션을 정의했습니다.

이제 서비스를 실행하고 테스트할 준비가 되었습니다!

결론

GraphQL Subscriptions를 이용하여 자바스크립트로 실시간 위치 기반 서비스를 개발하는 방법을 알아보았습니다. 이를 통해 실시간으로 데이터를 업데이트하고 클라이언트와 서버 간에 양방향 통신을 할 수 있습니다. 이는 위치 기반 서비스뿐만 아니라 다양한 실시간 애플리케이션 개발에 유용하게 활용될 수 있습니다. 문서를 읽고 익숙해지도록 노력해보세요!

参考 자료: