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

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

를 사용한다.

태그라면 일어나는 문제였다.

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

참고 : dangerouslySetInnerHTML does not work on production builds

Firestore 타임스탬프 필드를 표시하는 방법

Firestore의 날짜 필드에 현재 시간을 쓸 때,createdat : new Date()토카createdat : firebase.firestore.Timestamp.fromDate(new Date())어쨌든 쓸 것이라고 생각하지만 자동적으로 타임 스탬프형(Timestamp형)으로 쓰여진다. 이것을 읽을 때 {item.created} 와도 오류.

원인

Firestore의 날짜형 필드의 사양이 바뀌었다.

해결 방법

다음과 같이 읽는다.

{new Date(item.createdat.seconds * 1000).toLocaleDateString("ja-JP")} {new Date(item.createdat.seconds * 1000).toLocaleTimeString("ja-JP")}

이것으로 이런 식으로 된다.

TypeError: unsubscribe is not a function

Firestore에서 데이터를 읽을 때 항상 useEffect()에서 unsubscribe();라고 생각합니다. 다음은 코드 예.

// 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 = () => {
・・・表示処理・・・
}

상구라고 생각한다. 이 컴포넌트를 예를 들어 모든 페이지에 삽입하여 표시하고 싶습니다. 예를 들어, 이렇게.

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

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

이제 모든 페이지에 주석 목록 구성 요소가 표시됩니다. 그러나 이것으로 다른 페이지로 전환하면

원인

모르겠어요. 정적 사이트이기 때문에?

해결 방법

unsubscribe() 하지 않습니다.return () => unsubscribe(); 의 문장을 코멘트 아웃.

이것으로 좋은 것일까… 결론부터 말하면 Gatsby에서 동적 기능은 원칙 끔찍하다.

홍보

microCMS는 제외하고, Gatsby의 기본과 node API의 취급에 대해서 밟아 해설·핸즈온 한 전자 서적을 상급했으므로, 좋으면 손에 들여 보세요.

JAMStack을 배우자 Gatsby, React bootstrap, Netlify로 만드는 기업 사이트: 더 이상 렌탈 서버 필요 없음 Gatsby와 microCMS를 조합하여 기업 사이트 작성 절차를 해설 핸즈온 한 속편을 상처했습니다. 아무쪼록 손에 들여보세요.
JAMStack을 배우자 Gatsby와 microCMS로 만드는 기업 사이트 ~WordPress는 이미 오래된~