[typescript] 타입스크립트와 GraphQL을 함께 사용하는 파이어베이스 연동 방법

15 Dec 2023

typescript

파이어베이스는 백엔드를 구축하기 위한 강력한 플랫폼으로, 사용자 인증, 데이터베이스, 스토리지, 클라우드 기능 등을 제공합니다. 타입스크립트와 GraphQL을 함께 사용하여 파이어베이스를 연동하는 방법을 살펴보겠습니다.

1. Firebase 설정

먼저, Firebase 프로젝트를 설정합니다. Firebase 콘솔을 통해 새 프로젝트를 만들고, 프로젝트 설정에서 웹 앱을 추가합니다. Firebase 구성 객체를 가져오는 구성 파일을 다운로드하고 프로젝트에 추가합니다.

2. GraphQL 스키마 정의

GraphQL 스키마를 정의하기 위해 graphql 모듈을 설치합니다.

npm install graphql

그리고 스키마를 정의합니다.

import { gql } from 'graphql';

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

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

  type Mutation {
    addUser(name: String!, email: String!): User
  }
`;

export default typeDefs;

3. 데이터베이스 연결

Firebase 데이터베이스에 연결하기 위해 firebase-admin 패키지를 설치합니다.

npm install firebase-admin

그리고 데이터베이스 연결 설정을 구성합니다.

import * as admin from 'firebase-admin';

const serviceAccount = require('path/to/serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: 'https://<DATABASE_NAME>.firebaseio.com',
});

const db = admin.firestore();

export default db;

4. GraphQL 리졸버 작성

이제 GraphQL 쿼리 및 뮤테이션에 대한 리졸버 함수를 작성합니다.

import db from './firebase';
import { UserInputError } from 'apollo-server';

const resolvers = {
  Query: {
    async getUser(_, { id }) {
      const userSnapshot = await db.collection('users').doc(id).get();
      const userData = userSnapshot.data();
      return { id: userSnapshot.id, ...userData };
    },
  },
  Mutation: {
    async addUser(_, { name, email }) {
      if (!name || !email) {
        throw new UserInputError('Name and email are required.');
      }
      const newUser = await db.collection('users').add({ name, email });
      const userSnapshot = await newUser.get();
      return { id: newUser.id, ...userSnapshot.data() };
    },
  },
};

export default resolvers;

5. GraphQL 서버 설정

마지막으로, GraphQL 서버를 설정하고 실행합니다.

import { ApolloServer } from 'apollo-server';
import typeDefs from './graphql/schema';
import resolvers from './graphql/resolvers';

const server = new ApolloServer({ typeDefs, resolvers });

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

이제 타입스크립트와 GraphQL을 사용하여 파이어베이스를 연동하는 기본적인 방법에 대해 알아보았습니다. 더 많은 기능을 추가해 나가면서 강력한 웹 애플리케이션을 구축할 수 있습니다.

참고: Firebase Admin SDK for Node.js

위의 예시에서는 타입스크립트와 GraphQL을 사용하여 파이어베이스와 연동하는 간단한 방법에 대해 살펴보았습니다. 원하는 대로 확장하고 개선하여 실제 프로젝트에 적용해 보시기 바랍니다.