microCMS 미리보기 기능을 Gatsby.js에서 사용

Gatsby.js는 말하지 않고 알려진 React제의 정적 사이트 제너레이터입니다만, 빌드시에 페이지를 생성한다고 하는 성질 때문에, microCMS의 프리뷰 기능을 사용하려면 한마디 궁리 필요했기 때문에 공유하고 싶습니다.
이 기능을 아시는 분은 코드 부분에서 봐 주세요.

microCMS 기사 미리보기 기능 정보

microCMS의 미리보기 기능에 대해 조금 설명하면 기사 작성 화면에서

공개 버튼의 왼쪽에 있는 화면 미리보기를 눌렀을 때, 쓰기 중인 기사가 실제로 어떻게 표시되는지 확인할 수 있는 기능입니다. 작동 방식으로,

"화면 미리보기"를 클릭하십시오

미리 설정한 URL의 변수 부분(contentsId와 draftKey)이 클릭한 기사의 것으로 치환된 URL에 액세스

라는 느낌입니다.
자세한 것은 htps : // 미 c로 cms. 이오/bぉg/d등ft y_안 d_p레ゔぃ에w/ 에 게재되고 있습니다.

무엇이 문제로 어떻게 하면 좋을까?

이 기능을 Gatsby에서 사용할 때 생각해야 할 것은 Gatsby.js의 기사 데이터는 기본 빌드시에 생성된 것이므로,
「화면 미리보기」클릭시에 보내져 온 contentId 와 draftKey 를 근거로 기사 데이터를 실시간으로 취득해, 표시하는 구조를 만들어야 한다. 라는 것입니다.

라는 것으로 코드

전치는 그 정도로 코드는 이렇게 되었습니다.

pages/previewPage.jsx

import React, { useState, useEffect } from "react";
import { getSearchParams } from "gatsby-query-params";
//...その他コンポーネントなど

function previewPage() {
  //microCMS側に設定するurlはhttps://xxxxxx.com/previewPage/?contentId={CONTENT_ID}&draftKey={DRAFT_KEY}みたいな感じ
  const queryParams = getSearchParams();

  //queryParamsには
  //{contentId:"xxxx",
  //draftKey:"xxxx"}
  //というようなデータが入ります。

  const contentId = queryParams.contentId;
  const draftKey = queryParams.draftKey;

  const [postData, setPostData] = useState(null);//最初、postDataにはnullが入ります。

  useEffect(() => {
    if (!postData) {
      fetch(
        `https://xxxxxxxxx.microcms.io/api/v1/blogs/${contentId}?draftKey=${draftKey}`,
        {
          headers: {
            "X-API-KEY": "xxxxxxx-xxxx-xxxxx-xxxx-xxxxxxxx",
          },
        }
      )
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
        })
        .then((json) => {
          postData = setPostData(json);//ここで、postDataに取得したコンテンツが格納されます。
        });
    } else {
      return function cleanup() {
        console.log("done");
      };
    }
  });
  return (
        <div
          dangerouslySetInnerHTML={{
            __html: postData ? postData.sentence : "",
          }}
        ></div>
  );
}

export default previewPage;

이러한 페이지를 작성하는 것으로, 액세스했을 때에 url 쿼리 파라미터의 정보를 바탕으로 컨텐츠를 취해 줍니다.
이하, 상세하게 설명해 갑니다.

API 부분 정보

microCMS는 POST와 GET의 API-KEY가 다르기 때문에 GET의 API가 노출되어도 크게 문제는 없지만, 어쩐지 기분이 나쁘기 때문에,
X-API-KEY: "xxxxx-xxxx"로 하는 부분과 microCMS의 url 부분은 실제로 환경 변수로 대체하는 것이 바람직합니다. 환경 변수의 사용법에 대해서는 여기 의 기사 중에서도 설명하고 있으므로 꼭 봐 주세요.

gatsby-query-params 정보

2행째에 등장하는 gatsby-query-params 는 여기 입니다.
사용하려면 터미널에서 npm i gatsby-query-params하십시오.

코멘트 아웃 부분에도 있습니다만, getSearchParams 에 의해, url 쿼리 파라미터의 정보를 queryParams 에 객체 형식으로 포함하고 있습니다.

useState useEffect 정보

이것들은 React의 hook이며, 자세한 설명은 여기 에 있습니다.
,.

useEffect 정보

이것이 없으면 microCMS의 응답이 404 일 때 (useState가 null 사이) 반환되는 빈 문자열 postData를 처리하려고 시도하고 json 객체가 아니므로 오류가 발생합니다.

렌더링 부분에 대해

responce.ok 안의 "" 로 하고 있는 부분에서, postData에↑로 가져온 기사 데이터가 저장되면, 그것이 표시되게 되어 있습니다. return() 라고 쓰고 있습니다만, postData ? postData.sentence : '' 의 부분에는 microCMS 로 정의한 표시하고 싶은 데이터의 필드 ID 가 들어갑니다. 렌더링 부분은 다른 기사 페이지의 레이아웃에 맞추어 삶아 구워져 주세요!

요약

사이트를 보러 온 사람이.

여러가지 개선의 여지는 있을 것 같습니다만, 일단 이것으로 투고 전의 기사를 프리뷰로 확인할 수 있으므로, 꼭 활용해 보세요!