GatsbyJS上からFirestoreのデータをGraphQLで引っ張ってくる方法

GatsbyJSとFirebaseを連携させる上でどのプラグインを使ってどのように引っ張ってれば良いのかわからなかったので調べたまとめ
GatsbyJSとFirebaseは現時点では英語であっても情報がほとんどないと思うので必要な人もいると思うので記事にしました。備忘録も兼ねています。

※対象とする人は以下のため説明を簡略化している部分もあり
・Firebaseを一度は触ってホスティング又は、auth認証やFirestoreのデータを引っ張ったことがある人
・GatsbyJSやGraphQLを多少なりとも触ったことがある人

準備するもの

①gatsbyのプロジェクト作成
②gatsby-firesourceのインストール
③Firebase側でプロジェクト作成とFirebase Admin SDKの秘密鍵生成

①gatsbyのプロジェクト作成

不要物が少なくシンプルなHello Worldのみのスターターキットを引っ張ります

gatsby new gatsby-firebase https://github.com/gatsbyjs/gatsby-starter-hello-world
cd gatsby-firebase

gatsby develop

以下がコンソールに出力されればOKです。

You can now view gatsby-starter-hello-world in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql

②gatsby-firesourceのインストール

yarn add gatsby-firesource (もしくはnpm)

gatsby-source-firestore はメンテされておらずフロントエンドのUdemy講座で人気のTom Phillipsさんが推奨していないためgatsby-firesource(Tom氏が作成)を使います。

③Firebase側でプロジェクト作成とFirebase Admin SDKの秘密鍵生成

適当な名前をつけてあとは適当に進む

本番環境のままデータベースを作成

以下はコレクションを作成

ドキュメントIDは自動生成で今回はシンプルにするためフィールドは"name"と"email"だけにします。

次にFirebase Admin SDKの秘密鍵生成を生成します。

DLした秘密鍵をgatsby-firebaseのpackage.jsonと同階層の親ディレクトリに格納して名前を「firebase.json」へ改名します。

これで準備完了です。

gatsby-config.jsのファイルを編集する

plugin: [] の中に以下の内容を入力します。

    {
      resolve: 'gatsby-firesource', //プラグイン名
      options: {
        credential: require("./firebase.json"), //認証情報
        types: [
          {
            type: 'User', // GraphQL上で表示される名前
            collection: 'users', // 作成したコレクション名
            map: doc => ({ // ドキュメントデータ
              name: doc.name, // ドキュメントデータのフィールドname
              email: doc.email, // ドキュメントデータのフィールドemail
            }),
          },
        ],
      }
    }

再度、立ち上げます

gatsby develop

GraphQLへアクセスします。

http://localhost:8000/___graphql

画像のようにデータが拾えていたらOKです。もしデータが拾えてなかった場合はgatsby-config.jsのどこかが間違っているかFirestore側のドキュメントに誤りがある可能性があります。

あとはgatsby-node.jsやそれぞれのページでGraphQLを引っ張ってくればデータを勝手に扱えるようになりました。