はじめに

この記事は、以下の記事の続きです

その１

その２

過去2回の記事では、Oracle Content Management(以降OCM)に内蔵されるGraphQLエクスプローラ(GraphQL IDE)からアセット情報を取得する方法を紹介しました。

3回目となる今回は、GraphQLエクスプローラではなく、クライアントアプリケーションから OCM のアセット情報を取得する方法を紹介します

この記事は、2021年12月時点でのOCMの最新バージョン(21.12.1)を元に作成されてます

実現したいこと

OCMをHeadless CMSとして利用できるように構成します
クライアント・アプリケーションを作成します。今回は**Apollo Clinet(React)**のチュートリアルを利用します
クライアント・アプリケーションからOCMで作成・公開したアセット（コンテンツ・アイテム）の情報をGraphQLで取得・表示するように、クライアント・アプリケーションを変更します

1. OCM - Starter Edition 環境の準備

1.1 インスタンス作成とアセット登録・公開

OCM - Starter Edition とは、**Oracle Cloud Always Free（無償かつ期間の制限無し）**で利用できるOCMの機能限定版です。

以下の記事を参考に、OCM - Starter Edition環境を作成します。

最終的には、以下のような形でアセット・リポジトリ内に2件のアセット（画像とコンテンツ・アイテム）が登録された状態になります

コンテンツ・アイテムは、sampleNewsTypeというコンテンツ・タイプより作成されます。sampleNewsTypeは、タイトル(title)、メイン画像(image)、ニュース本文(body)の3つのデータ・フィールド(属性)から構成されます。

1.2 チャネル・トークンの確認

このアセットリポジトリには、sampleChannelという公開チャネルが設定されます。React+Apollo Clientからアセットを参照する際に、このsampleChannelのチャネル・トークンを利用します

チャネル・トークンは、OCMのUIからADMINISTRATION:コンテンツ→チャネルのパブリッシュ→sampleChannel→右上のサイドパネルボタン→APIより確認できます。このチャネル・トークンをメモします

2. クライアント・アプリケーションの開発

1.で作成したOCMに対してGraphQLのクエリを発行するクライアント・アプリケーションを作成します。今回は、React+Apollo Clientの環境を準備します。

以下のApollo Client(React)の公式チュートリアルを実施します

2.1 事前準備

Create-React-Appを実行し、新しいプロジェクトを作成します

npx create-react-app my-app
cd my-app
npm start

[メモ] 私の場合npm startがエラーで実行できなかったので、プロジェクトフォルダ(ここではmy-appフォルダ)の直下に.envファイルを作成し、SKIP_PREFLIGHT_CHECK=trueを追加することで、エラーを一旦回避しました

.env

SKIP_PREFLIGHT_CHECK=true

必要なパッケージをインストールします

npm install @apollo/client graphql

2.2 React+Apollo Clientアプリケーションの開発

作成したReactアプリケーションに、Apollo Clientを組み込みます。具体的には、2. Initialize ApolloClient以降のチュートリアルを最後まで実施します。

最終的に、src/index.js は以下のコードとなります

index.js

import React from 'react';
import { render } from 'react-dom';
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

const EXCHANGE_RATES = gql`
  query GetExchangeRates {
    rates(currency: "USD") {
      currency
      rate
    }
  }
`;

function ExchangeRates() {
  const { loading, error, data } = useQuery(EXCHANGE_RATES);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.rates.map(({ currency, rate }) => (
    <div key={currency}>
      <p>
        {currency}: {rate}
      </p>
    </div>
  ));
}

function App() {
  return (
    <div>
      <h2>My first Apollo app 🚀</h2>
      <ExchangeRates />
    </div>
  );
}

render(

  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root'),
);

実行すると、以下のWebページが表示され、GraphQLクエリで取得したデータが表示されます

説明

index.jsに書かれているコードの詳細は、以下Apollo Client(React)のチュートリアルをご確認ください

3. OCMのアセット情報を表示するようにindex.jsを変更する

3.1 GraphQLサーバーの接続先をOCMに変更する

index.js

- uri: 'https://48p1r2roz4.sse.codesandbox.io',
+ uri: 'https://<ocminstance>-<tenancy>.cec.ocp.oraclecloud.com/content/published/api/v1.1/graphql',

説明

OCMのGraphQLのエンドポイントは以下の通りです

https://<ocminstance>-<tenancy>.cec.ocp.oraclecloud.com/content/published/api/v1.1/graphql
<ocminstance> はOCMインスタンス名 を入力
<tenancy> は テナンシー名 を入力

3.2 OCMからsampleNewsTypeコンテンツ・タイプのアセット一覧を取得するクエリに修正

index.js

- const EXCHANGE_RATES = gql`
-  query GetExchangeRates {
-   rates(currency: "USD") {
-     currency
-     rate
-   }
-  }
-  `;
+ const ITEMS_FROMOCM = gql`
+  query GetItemsFromOCM {
+   getItems(channelToken: "<channelToken>", 
+     filter: {type: {op: EQUALS, value: "sampleNewsType"}}
+   ) {
+     items {
+       id
+       name
+       slug
+     }
+   }
+  }
+ `;

説明

GraphQLクエリ名を変更（EXCHANGE_RATES → ITEMS_FROMOCM）
getItems()クエリを利用し、アセット・タイプsampleNewsTypeのコンテンツ・アイテムを取得
channelToken:には、1.2項で確認したチャネルトークンを設定
filter:には、アセット・タイプ=sampleNewsTypeを設定
取得するフィールドはid, name, slug の3項目を設定
getItems()クエリの使いかたは、以下のQiita記事で紹介してます。ご確認ください
- [Oracle Cloud] GraphQL で Oracle Content Management のデータを取得する（２）

3.3 getItems() で取得したデータを表示するように既存コンポーネントを変更

index.js

- function ExchangeRates() {
-  const { loading, error, data } = useQuery(EXCHANGE_RATES);
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error :(</p>;
-
-  return data.rates.map(({ currency, rate }) => (
-   <div key={currency}>
-     <p>
-       {currency}: {rate}
-     </p>
-   </div>
-  ));
- }
+ function ItemsFromOCM() {
+  const { loading, error, data } = useQuery(ITEMS_FROMOCM);
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error :(</p>;
+
+  return data.getItems.items.map(({ id, name, slug }) => (
+   <div key={id}>
+      <p>
+        {id} : {name} : {slug}
+      </p>
+    </div>
+  ));
+ }

説明

コンポーネント名を変更（ExchangeRates → ItemsFromOCM）
useQuery()で、3.3項で変更したGraphQLクエリITEMS_FROMOCMをパス
取得したアセット情報はdataに含まれます

3.4 既存のAppコンポーネントに`<ItemsFromOCM>`コンポーネントを追加

index.js

-     <div>
-       <h2>My first Apollo app 🚀</h2>
-       <ExchangeRates />
-     </div>
+     <div>
+       <h2>My first Apollo app 🚀</h2>
+       <ItemsFromOCM />
+     </div>

4. 確認

クライアント・アプリケーションを起動し、OCMからアセット情報が取得できるか？を確認します

npm start

起動すると、以下のようにWebページが表示され、OCMから取得したid,name,slugのアセット情報が表示されます（ここでは2件のコンテンツ・アイテムが表示）

OCM環境でsampleNewsTypeのコンテンツアイテムを新規に1件作成し、sampleChannelに対して公開します(ここではsample news content 003を新規作成・公開)

ブラウザをリロードすると、先ほど新規作成したコンテンツ・アイテムsample news content 003が1件追加されることが確認できます（ここでは3件のコンテンツ・アイテムが表示）

まとめ

この記事では、React+Apollo Clientで開発したクライアントアプリケーションから、OCMのアセットリポジトリで管理・公開されるアセットを GraphQL で取得・表示できることを確認しました。

この記事を作成する際に参考にした記事やドキュメントを最後にリンクします

OCM製品ドキュメント
- GraphQL Support in Oracle Content Management
- Oracle Content Management - Samples
Qiita記事
- Apollo Client で始める GraphQL

##（参考）OCMの製品ドキュメント

Oracle Content Management 製品ドキュメント（英語）
Oracle Content Management 製品ドキュメント（日本語翻訳版）
製品ドキュメントの英語原本と日本語翻訳版です。翻訳されるまでに時差がありますので、最新情報の確認は英語版のドキュメントをご利用ください