ReactおよびOracle Content ManagementでのGraphQLの使用

イントロダクション

GraphQLは、APIの問合せ言語であり、既存のデータを使用してこれらの問合せを履行するためのランタイムです。

このチュートリアルでは、Oracle Content Managementに接続されているReactでGraphQLを使用する方法を示します。特に、GraphQLおよびApolloクライアントを使用して必要なデータを問い合せることで、最小限のサンプル・サイトを処理の既存の「人」ページに焦点を当てます。他のページ(「ホーム」および「問合せ先」)は現在REST APIを使用しています。

前提条件

このチュートリアルを進める前に、まず次の情報を確認することをお勧めします。

このチュートリアルに従うには、次のものが必要です。

オラクルが構築しているもの

Reactに組み込まれた最小限のサイトを使用すると、Oracle Content Managementリポジトリからイメージやその他のコンテンツを簡単に取得できます。

オラクルが構築している内容を確認するには、チュートリアルの終了状態、Oracle Content Managementのコンテンツを使用する基本的なReactの最小サイトを次に示します。

https://headless.mycontentdemo.com/samples/oce-react-minimal-sample

このチュートリアルでは、このサイトの「担当者」ページのみに焦点を当てます。

このチュートリアルの最後にある「People」ページは次のようになります:

この画像は、最小応答サイトの「連絡先」ページを示しています。

続行するには、Oracle Content Managementへのアクティブなサブスクリプションを持ち、コンテンツ管理者ロールでログインしている必要があります。

タスク1: Peopleページ分類の理解

ダウンロード可能なアセット・パックには、最小メインGraphQLというアセットがスラグ'minimalmainggraphql'とともに含まれています。

「最小メインGraphQL」アセットには、「個人」と呼ばれるPeoplePageタイプのページが含まれます。これは、次のような内容です。

このイメージは、メインのGraphQL分類の最小値を示しています。

「人」アセットのタイプはPeoplePageで、個人のサブタイプが含まれています。これは、次のような内容です。

この図は、「People」ページの分類を示しています。

peopleアセットの例を次に示します(「属性」パネルのすべてのメタデータに注意してください)。

このイメージは、Peopleタクソノミを示しています。

タスク2: Apolloクライアントの使用

GraphQLを使用してOracle Content Managementからこれらのアセットを問い合せるには、package.jsonファイルに@apollo/client依存性を追加する必要があります。

GraphQL APIのエンドポイントは、/content/published/api/v1.1/graphqlと連結されたサーバーURLであり、src/scripts/services-graphql.jsファイルで定義されます。

const SERVER_URL_GRAPHQL = `${process.env.SERVER_URL}/content/published/api/v1.1/graphql`;

タスク3: GraphQL問合せの実行と処理

src/pages/Routes.jsファイルは、アプリケーションのルートを定義します。/page/peopleパスは、Peopleコンポーネントに送信されます。

export default [
      {
        ...App,
        routes: [
          {
            ...People,
            path: '/page/people',
            exact: true,
            title: 'People',
          },
          {
            ...Page,
            path: '/page/:slug',
            exact: true,
            title: 'Page',
          },
        ],
      },
    ];

個人情報コンポーネントは、個人情報ページのレンダリングを担当します。src/pages/People.jsxにある「People」コンポーネントを開きます。

fetchInitialData関数は、サーバーからデータを取得するためにサーバー側レンダリング中にコールされます。

import fetchPeople from '../scripts/services-graphql';
    
    function fetchInitialData(req) {
      const pageslug = req.path.split('/').pop();
      return fetchPeople(pageslug);
    }

componentDidUpdateは、場所pathnameが変更されているかどうか(ナビゲーションの変更を示す)を確認し、それに応じてデータをフェッチします。

  componentDidUpdate() {
        const { pageSlug } = this.state;
        const { location } = this.props;
        const { pathname } = location;
        const newSlug = pathname.split('/').pop();
        if (pageSlug !== newSlug) {
          this.fetchData(newSlug);
        }
      }
      // Client Side Data Fetching: called from Client when doing client side routing/hydration
      async fetchData(slug) {
        const pageData = await fetchPeople(slug);
        document.title = pageData.name;
        this.setState(() => ({
          pageData,
          pageSlug: slug,
        }));
      }

Render()メソッドでは、レンダリングするデータがコンポーネントの状態から取得されることがわかります。このデータにはお知らせセクションと個人のリストがあるため、PeopleコンポーネントのRender()メソッドはリストを反復し、リスト内の個人ごとにPersonコンポーネントをコールします。

Peopleコンポーネントは、fetchInitialData関数およびコンポーネントを含むオブジェクトをエクスポートします。

export default {
      fetchInitialData,
      component:  People,
    };

fetchPeopleメソッドはsrc/scripts/services-graphql.jsファイルで定義され、Apolloクライアントを使用して、次の問合せを行い、「People」ページのすべてのデータを取得します。

Oracle Content Managementを使用したデータの問合せ方法の詳細は、ドキュメントを参照してください。

const GET_PEOPLE_PAGE = gql`
      query ($peopleSlug: String!, $channelToken: String!){
        getPeoplePage(slug: $peopleSlug, channelToken: $channelToken) {
          id
          slug
          name
          fields {
            announcement {
              id
              fields {
                type: fieldType
                heading
                body
                actions
                image {
                  ...sectionImages
                }
              }
            }
            people {
              id
              fields {
                fullname
                title
                biodata
                file {
                  metadata {
                    width
                    height
                  }
                }
                renditions {
                  name
                  format
                  file {
                    url
                    metadata {
                      height
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
      fragment sectionImages on image {
        id
        fields {
          file {
            metadata {
              width
              height
            }
          }
          renditions {
            name
            format
            file {
              url
              metadata {
                height
                width
              }
            }
          }
        }
      }`;
    
    export default async function fetchPeople(peopleSlug) {
      // Get the page details
      const channelToken = `${process.env.CHANNEL_TOKEN}`;
      const client = new ApolloClient(
        {
          link: new HttpLink({ uri: SERVER_URL_GRAPHQL, fetch }),
          cache: new InMemoryCache(),
        },
      );
      const page = await client.query({
        query: GET_PEOPLE_PAGE,
        variables: { peopleSlug, channelToken },
      });
    
      const pageData = process.env.IS_BROWSER
        ? page.data.getPeoplePage
        : JSON.parse(JSON.stringify(page.data.getPeoplePage));
      const { people, announcement } = pageData.fields;
      if (announcement.fields.image) {
        announcement.renditionURLs = getSourceSetGraphQL(announcement.fields.image);
      }
      if (people) {
        people.forEach((person) => {
          person.renditionURLs = getSourceSetGraphQL(person);
        });
      }
      return pageData;
    }

返された結果が処理されて、Peopleページを表示するHTMLが作成されます。GraphQL IDEは、http://your_instance/content/published/api/v1.1/graphql/explorerにあります。

この図は、エクスプローラを示しています。

まとめ

このチュートリアルでは、GraphQLを使用して「最小限のサンプル・サイトの処理」に「人」ページを追加して、そのページのデータを取得しました。他のページ(「ホーム」および「問合せ先」)では、引き続きREST APIが使用されます。

Oracle Content ManagementのGraphQLの詳細は、ドキュメントを参照してください。