ReactでGraphCMSのリッチテキストを表示する方法

#GraphQL

#GraphCMS

北川慶太

2022.06.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。データアナリティクス事業本部サービスソリューション部の北川です。

GraphCMSはGraphQLクエリを使用できるヘッドレスCMSになります。

リッチテキストをReactプロジェクトで表示する方法は、react-markdownを使用するなど様々ありますが、今回はGraphCMS用のrich-text-react-rendererを使用したいと思います。

プロジェクト作成

graphCMSにログインし、new projectから新しいプロジェクトを作成します。

ちなみに、リージョンの指定方法が以前よりシンプルになりました。

サイドバーから、「Scheeme」に移動し、新しくモデルを作成します。

スキーマを作成します。今回は「text」と「richText」を、それぞれ「title」と「content」という名前で作成しました。

サイドバーから、「Content」に移動し、作成したモデルを選択します。

右上の「+ create entry」から、新しくコンテンツを作成します。

サイドバーから「Setting」に移動し、「Public content API」を選択します。

Permissionを以下のように設定します。

Enviromentを選択し、APIをコピーしておきます。

Next.jsプロジェクトの作成

プロジェクトを作成します。

$ yarn create-next-app

.env.localファイルを作成し、コピーしたURLを追加します。

NEXT_PUBLIC_GRAPHCMS_API=コピーしたAPI

libs/apollo-clients.tsファイルを作成し、ApolloClientを初期化します。

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_GRAPHCMS_API,
  cache: new InMemoryCache(),
});

rich-text-react-rendererの使用

rich-text-react-rendererをインストールします。

yarn add @graphcms/rich-text-react-renderer

# または
npm i @graphcms/rich-text-react-renderer

rich-text-typesはリッチテキストの型を定義します。

RichTextをインポートし、contentにリッチテキストの内容を指定します。

index.tsxを以下のように変更します。

import { gql } from "@apollo/client";
import { GetServerSideProps } from "next";
import { client } from "../libs/apollo-client";
import { RichText } from '@graphcms/rich-text-react-renderer';
import { RichTextContent } from "@graphcms/rich-text-types";

export const getServerSideProps: GetServerSideProps = async () => {
  const { data } = await client.query({
    query: gql`
      query MyQuery {
        sampleModels {
          id
          content {
            raw
          }
        }
      }
    `,
  });

  return {
    props: {
      data: data.sampleModels,
    },
  };
};

const Home = (props: { data: { content: { raw: RichTextContent; }; }[]; }) => {
  return (
    <>
      <RichText
        content={props.data[0].content.raw}
      />
    </>
  );
};

export default Home;

スタイルの変更

RichTextにrenderersを渡すことでスタイルの変更ができます。

<RichText
  content={props.data[0].content.raw}
  renderers={{
    h1: ({ children }) => <h1 style={{color: "red"}}>{children}</h1>,
    h2: ({ children }) => <h2 style={{background: "lime"}}>{children}</h2>,
  }}
/>

NextLinkの使用

Next.jsでは、リッチテキストのリンクが内部リンクの場合に、NextLinkを使用するよう変更できます。

<RichText
  content={props.data[0].content.raw}
  renderers={{
    a: ({ children, openInNewTab, href, rel, ...rest }) => {
      if (href?.match(/^https?:\/\/|^\/\//i)) {
        return (
          <a href={href} {...rest}>
            {children}
          </a>
        );
      }

      return (
        <Link href={href ? href : ""}>
          <a {...rest}>{children}</a>
        </Link>
      );
    },
  }}
/>