在Oracle Cloud中，使用GraphQL来获取Oracle内容管理的数据（第三部分）

2 年 ago
文, 翔
3 minutes

首先

本文是以下文章的延续。

其中有些项目需要在一周内完成。

第二个

在之前的两篇文章中，我们介绍了如何通过Oracle Content Management（以下简称OCM）内置的GraphQL探索器（GraphQL IDE）获取资产信息的方法。

本次是第三篇文章，我們將介紹從客戶端應用程式獲取 OCM 資產信息的方式，而不是使用 GraphQL Explorer。

这篇文章是基于2021年12月时点的OCM最新版本(21.12.1)创作的。

我想实现的目标

    • OCMをHeadless CMSとして利用できるように構成します

 

    • クライアント・アプリケーションを作成します。今回はApollo Clinet(React)のチュートリアルを利用します

 

    クライアント・アプリケーションからOCMで作成・公開したアセット（コンテンツ・アイテム）の情報をGraphQLで取得・表示するように、クライアント・アプリケーションを変更します
image.png

1. OCM – 初级版环境准备

1.1 创建实例并注册和公开资产

OCM-起動版是Oracle Cloud Always Free（免费且无时限限制）上可用的OCM功能的限定版。

根据以下文章提供的参考信息，我们将创建OCM-Starter Edition环境。

最终结果是，在资产仓库中以以下形式注册了两个资产（图像和内容项）。

image.png

内容项是从sampleNewsType这个内容类型创建的。sampleNewsType包括标题(title)，主要图片(image)，以及新闻正文(body)这三个数据字段(属性)。

image.png

确认2通道令牌

在这个资产库中，将设置一个名为sampleChannel的公开频道。当从React+Apollo Client引用资产时，将使用该sampleChannel的频道令牌。

您可以从OCM的UI上进行以下操作来查看频道令牌：ADMINISTRATION：内容→渠道发布→sampleChannel→右上角的侧边栏按钮→API。请记下这个频道令牌。

image.png

2. 开发客户端应用程序

我們將為使用GraphQL的OCM創建一個客戶端應用程序。這次我們將準備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，从而暂时避免了错误。

SKIP_PREFLIGHT_CHECK=true
    必要なパッケージをインストールします
npm install @apollo/client graphql

2.2 开发React+Apollo Client应用程序

将Apollo Client集成到创建的React应用程序中。具体操作如下：按照第2步“初始化ApolloClient”以后的教程，一直实施到结束。

最后，src/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'),
);

运行后，将显示以下网页，并显示通过GraphQL查询获取的数据。

image.png

解释

请参考以下Apollo Client(React)教程以获取有关index.js文件中所写代码的详细信息。

3. 修改index.js以显示OCM的资产信息。

将GraphQL服务器的连接目标更改为OCM。

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

说明

OCM的GraphQL端点如下所示

    • https://-.cec.ocp.oraclecloud.com/content/published/api/v1.1/graphql

はOCMインスタンス名 を入力

は テナンシー名 を入力

将3.2中的OCM查询更改为获取sampleNewsType内容类型的资产列表的查询。

- 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 のデータを取得する（２）

将现有组件修改为显示通过`getItems()`方法获取的数据。

- 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に含まれます

向已有的App组件中添加组件。

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

确定

我会启动客户端应用程序，然后确认是否可以从OCM获取资产信息。

npm start

当启动时，将显示以下网页，并显示从OCM获取的id、name和slug的资产信息（此处显示2个内容项）。

image.png

在OCM环境中，新建一条名为sampleNewsType的内容项，并将其发布到sampleChannel中（这里是指新建和发布sample news content 003）。

image.png

当您刷新浏览器时，可以确认之前新创建的内容项“sample news content 003”被添加了1个（这里显示3个内容项）。

image.png

总结

在这篇文章中，我们确认了可以通过React+Apollo Client开发的客户端应用程序，通过GraphQL获取和显示在OCM资产存储库中管理和发布的资产。

在这篇文章的结尾，我会提供参考过的文章和文件的链接。

OCM製品ドキュメント

GraphQL Support in Oracle Content Management

Oracle Content Management – Samples

Qiita記事

Apollo Client で始める GraphQL

（参考）OCM产品文件

    • Oracle Content Management 製品ドキュメント（英語）

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

✖
广告
将在 10 秒后关闭
bannerAds