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

イントロダクション

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

このチュートリアルでは、Oracle Content Managementに接続されたGatsbyでGraphQLを使用する方法を示します。特に、Gatsby Source GraphQLプラグインに接続されたGraphQLを使用して必要なデータを問い合せることによって、Gatsby Minimum Sample Site上の既存の「People」ページに焦点を当てます。他のページ(「ホーム」および「問合せ先」)は現在、Gatsby Source OCEプラグインに接続されたREST APIを使用しています。

前提条件

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

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

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

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

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

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

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

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

このイメージは、Gatsby最小サイトの「お問合せ」ページを示しています。

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

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

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

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

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

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

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

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

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

タスク2: Gatsby Source GraphQLプラグインへの接続

Oracle Content Managementからこれらのアセットを問い合せるには、gatsby-config.jsファイルでGatsby Source GraphQLプラグインを構成する必要があります。このプラグインはpackage.jsonファイルの依存性に追加する必要があります。

gatsby-config.jsにおけるその構成のコードは次のとおりです。

    {
          resolve: 'gatsby-source-graphql',
          options: {
            // This type will contain remote schema Query type
            typeName: 'OCM',
            // This is the field under which it's accessible
            fieldName: 'ocm',
            // URL to query from
            url: `${process.env.SERVER_URL}/content/published/api/v1.1/graphql`,
          },
        },

GraphQL APIのエンドポイントは、/content/published/api/v1.1/graphqlに連結されたサーバーURLです。

typeNameおよびfieldNameは、それぞれリモート・スキーマ問合せタイプおよびアクセス可能なフィールドを含めるために使用されることに注意してください。ここでのネーミングは、問合せで一貫性があるかぎり重要ではありません。

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

gatsby-node.jsファイルのセクションを次に示します。ページは、GatsbyのcreatePageメソッドを使用して、スラグ「人」を含むページをコンポーネントとコンテキストとともに適切なパスにルーティングします。コンテキスト内のページ・データ、スラグおよびchannelTokenを渡す方法に注意してください。

} else if (page.slug.localeCompare('people') === 0) {
        createPage({
            path: '/people',
            component: peopleTemplate,
            context: {
                page,
                slug: 'people',
                channelToken: process.env.CHANNEL_TOKEN,
            },
        });

「個人情報」ページ・テンプレートにルーティングされた後、次の問合せを実行して「個人情報」ページのすべてのデータを取得します。このページのGraphQL APIにアクセスするには、スラグおよびchannelTokenが必要です。

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

query ($slug: String!, $channelToken: String!) { 
      ocm {
        getPeoplePage(
          slug: $slug
          channelToken: $channelToken
        ) {
          id
          slug
          name
          fields {
            announcement {
              id
              fields {
                type: fieldType
                heading
                body
                actions
                image {
                  ... on OCM_image {
                    id
                    name
                    fields {
                      renditions {
                        file {
                          url
                        }
                      }
                    }
                  }
                }
              }
            }
            people {
              id
              fields {
                fullname
                title
                biodata
                file {
                  metadata {
                    width
                    height
                  }
                }
                renditions {
                  name
                  format
                  file {
                    url
                    metadata {
                      height
                      width
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

最上位レベルの問合せにocmがあり、イメージのtypeNameがOCM_Imageであることを確認します。これは、gatsby-config.jsで提供されるオプションに関連付けられたtypeNameおよびfieldNameと一致している必要があります。

返された結果が処理されて、Peopleページを表示するHTMLが作成されます。問合せの出力を表示するには、GraphQLエクスプローラに移動します。これは、端末でnpm run developをコールした後、http://localhost:8000/___graphqlにあります。また、GraphQL IDEはhttp://your_instance/content/published/api/v1.1/graphql/explorerにあります。

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

まとめ

このチュートリアルでは、GraphQLを使用して「最小限のサンプル・サイト」に「人」ページを追加して、そのページのデータを取得しました。Gatsbyを含むGraphQLから取得したデータは、Gatsby Source GraphQLプラグインを使用してOracle Content Managementに接続されました。他のページ(「ホーム」および「問合せ先」)では、Gatsby Source OCEプラグインに接続されたREST APIが引き続き使用されます。Oracle Content Managementからデータを取得するための有効な方法は、Gatsby Source OCEプラグインとGatsby Source GraphQLプラグインの両方です。

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