Gatsby + microCMS + Firestore エラー・不具合集

# Gatsby + microCMS + Firestore エラー・不具合集


## microCMSからGraphQLでもらってくる記事コンテンツが…
10を超えるとそれ以上取得できない。

### 原因
microCMSのGET APIはデフォルトで10件まで取得となっている。

### 解決方法
limitパラメータを与えることで取得件数を増やすことができる。
Gatsbyの場合は、gatsby-config.jsでオプションで変更する。

```js
// gatsby-config.js
   resolve: "gatsby-source-microcms",
    options: {
      apiKey: "xxxxxxx-xxxx-xxxx-xxxxx-xxxxxxxxxxx",
      serviceId: "hogehoge",
      endpoint: "articles",
      query: {
        limit: 100, // ←ここで100件に変更
      }
   },
```

## 同一ページをリロードすると中身が表示されない

gatsby developの開発環境では問題ない。しかしgatsby buildの本番環境でページ再読み込みするとコンテンツが表示されない。エラーもなし。

### 原因
Gatsbyの問題。以下のコード、dangerouslySetInnerHTMLのバグ。

```js
<p
         dangerouslySetInnerHTML={{
           __html: `${article.body}`,
         }}
></p>
```

### 解決方法
まだIssue上がりっぱなしだが、回避策として＜div＞を使う。＜ｐ＞タグだと起きる問題なのであった。

```js
<div
         dangerouslySetInnerHTML={{
           __html: `${article.body}`,
         }}
></div>
```

参考：[dangerouslySetInnerHTML does not work on production builds](https://github.com/gatsbyjs/gatsby/issues/11108)

<br />

## Firestoreのタイムスタンプ型フィールドの表示方法

Firestoreの日付フィールドに現在時間を書き込むとき、
`createdat : new Date()`
とか
`createdat : firebase.firestore.Timestamp.fromDate(new Date())`
とかやって書き込むと思うが自動的にタイムスタンプ型（Timestamp型）で書き込まれる。これを読むとき、{item.created}とやってもエラー。

### 原因
Firestoreの日付型フィールドの仕様が変わった。

### 解決方法
つぎのようにして読む。

```jsx
{new Date(item.createdat.seconds * 1000).toLocaleDateString("ja-JP")} {new Date(item.createdat.seconds * 1000).toLocaleTimeString("ja-JP")}
```
これでこんな風になる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/e39495af-f05f-71a9-cda3-b28c72e404c3.png)

##TypeError: unsubscribe is not a function

Firestoreからデータを読み込むとき、必ず`useEffect()`の中でunsubscribe();すると思う。以下はコード例。

```jsx
// components/comments.js
import React, { useEffect, useState } from 'react'
import firebase from '../../utils/firebase'

const useComments = () => {
      const [items, setItems] = useState([]);

      useEffect(() => {
          const unsubscribe = firebase
          firebase
            .firestore()
            .collection("comments")
            .onSnapshot(snapshot => {
              const data = []
              snapshot.forEach(d => data.push({
                  id: d.id,
                  ...d.data(),
                }));
                setItems(data)
            });
          return () => unsubscribe(); // ← ここ
      }, []); 
      return items;
};

const CommentList = () => {
・・・表示処理・・・
}
```

常套句だと思う。このコンポーネントを例えば全ページに埋め込んで表示させたいとする。例えばこのように。

```jsx
//すべてのページ.js
import React from "react"
import CommentList from '../components/Comment'

const AllPages = () => {
 return (
・・・略・・・
　<CommentList /> ← ここ
 )
}
```

これですべてのページにコメントリストコンポーネントが表示される。しかしこれで他のページに遷移すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/af448a93-a863-d8e9-8c52-dda4db58624d.png)


### 原因
わからない。静的サイトだから？

### 解決方法
unsubscribe()しない。
`return () => unsubscribe();`の一文をコメントアウト。

これでいいのだろうか…。結論から言うとGatsbyで動的機能は原則きびしい。

# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

**前編**の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と**後編**の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ **https://yah-space.work**
<hr />


静的サイトジェネレーターGatsby**最新バージョン５**の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《**Slicy API**》《**Script API**》《**Head API**》を紹介、実装方法も。《**Gatsby Functions**》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

**最新Gatsby５**とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《**サイト内検索機能**》をGatsbyバージョン４からの新機能《**Gatsby Functions**》と《**microCMSのqパラメータ**》で実装。また、**SEOコンポーネントをカスタマイズ**して**microCMS APIをツイッターカードに表示**させる**OGPタグ**実装方法も解説。

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />

<br />