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の秘密鍵生成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/25431ef3-14ba-ae6f-d386-66e448f08ca5.png)

適当な名前をつけてあとは適当に進む
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/df8f8f2c-bbb7-5cec-0efe-2dc63998e08a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/123798d0-7d8d-d1f4-1b43-aad95090259d.png)

本番環境のままデータベースを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/5c98397a-e4a2-4e8f-6d2e-f5c55d777cc2.png)

以下はコレクションを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/08a7bd4f-f77f-77b7-e10e-ce1915a5ddb9.png)

ドキュメントIDは自動生成で今回はシンプルにするためフィールドは"name"と"email"だけにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/42d791f7-2aad-2d7a-606c-3e38cad129c0.png)

次にFirebase Admin SDKの秘密鍵生成を生成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/998ea55e-e30f-e8ad-858b-c12b9f6e1c51.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/be518ad2-25f3-5ebd-eb7b-2316f223c90c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/21ab5f81-6c64-1543-2690-02300ad77de7.png)

DLした秘密鍵をgatsby-firebaseのpackage.jsonと同階層の親ディレクトリに格納して名前を「firebase.json」へ改名します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/dac1cd06-dfdc-dbb8-5085-f16e3b907024.png)

これで準備完了です。

## 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側のドキュメントに誤りがある可能性があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/99e0a1f9-82a1-5e7b-0355-b830e5c7b024.png)

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