Zenn
📚

React + GraphQL + Apolloを触ってみる ~ 3. Firebaseの準備とGraphQLとの連携部分まで ~

2023/03/09に公開
Firebase
GraphQL
React
JavaScript
Apollo
tech

前回からの続き

FirebaseでCloudFirestoreを使う準備をしてGraphQLとの連携部分を書いていきます

目次

  1. GraphQLの環境構築まで
  2. ToDoリストの読み込みまで
  3. Firebaseの準備とGraphQLとの連携部分まで
  4. ToDoの追加・編集・削除まで

Firebaseの準備

FirebaseコンソールでCloudFirestoreの作成

ざっくりと下記の手順でCloudFirestoreを使えるようにしておく

  1. firebaseコンソールからプロジェクトを作成
  2. プロジェクトの概要からFirestore Databaseを選択し作成
  3. 適当にtodos的な名前のコレクションを作成
  4. プロジェクトの概要からアプリの追加→Webを選択し適当なアプリを追加
  5. 表示された認証情報をコピー

サーバ側でFirebaseの設定

ライブラリのインストール

yarn add firebase

初期化設定

src/utils/firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore/lite'
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  /**
   * ここにコピーした認証情報を追加
   */
}


// Initialize Firebase
const app = initializeApp(firebaseConfig)

const db = getFirestore(app)

export { db }

GraphQLとFirebaseの接続

クエリ部分を下記のように修正

src/resolvers/query.js
+ import { collection, getDocs } from 'firebase/firestore/lite'
+ import { db } from '../utils/firebase.js'

export const Query = {
-   getTodos (parent, args, context) {
-     return context.todos
+   getTodos: async (parent, args, context) => {
+     const s = await getDocs(collection(db, 'todos'))
+     let todos = []
+     s.forEach((doc) => {
+       todos = [ ...todos, { id: doc.id, ...doc.data() } ]
+     })
+     return todos
  },
}

const s = await getDocs(collection(db, 'todos'))の'todos'にはFirebaseコンソールで作成したコレクション名を設定する

モックデータはお役御免なので削除

src/index.mjs
app.use(
  cors(),
  bodyParser.json(),
-   expressMiddleware(server, {
-     context: async ({ req }) => ({
-       todos: [
-         {
-           id: '1',
-           text: 'hoge',
-           isCompleted: false,
-         },
-         {
-           id: '2',
-           text: 'fuga',
-           isCompleted: false,
-         },
-         {
-           id: '3',
-           text: 'piyo',
-           isCompleted: true,
-         },
-       ]
-     })
-   })
+   expressMiddleware(server),
)

これでFirebaseとGraphQLの接続は完了
コンソールから適当にドキュメントを追加してプレイグラウンドやフロントから表示できるか確認できればOK

次はToDoの追加や削除周りを実装する

Discussion