[Oracle Cloud] GraphQL で Oracle Content Management のデータを取得する（４）

# はじめに

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

https://qiita.com/nakasato310/items/7b1e1c3223a737a82192

https://qiita.com/nakasato310/items/d69952933a85d11543a5

https://qiita.com/nakasato310/items/b160760dff00c5a53ca2

Oracle Content Management (以降OCM) はGraphQLをサポートし、OCM内で管理するアセットの情報を取得できます

今回、これまでの記事で紹介しきれなかった内容も含め、OCMにおけるGraphQLの利用方法をついて紹介します。記事中の<font color="red">Update!</font>と書かれたところが、今回新たに紹介する内容になります

# 0. 準備

[こちらの記事](https://qiita.com/nakasato310/items/b160760dff00c5a53ca2)を参考に、OCMインスタンスを準備し、アセットを登録・公開します

# 1. GraphQLで公開済アセット情報を取得する

OCMには**GraphQL IDE**が組み込まれており、これを利用してGraphQLの動作を確認できます。公開済アセットの情報を取得する際のURLは以下の通りです

**エンドポイント**
```url
https://<OCMインスタンスのURL>/content/published/api/v1.1/graphql
```

**GraphQL IDE**
```http
https://<OCMインスタンスのURL>/content/published/api/v1.1/graphql/explorer
```

GraphQL IDEのURLにアクセスすると、このような画面が表示されます。
![image.jpg](https://camo.qiitausercontent.com/a11592cc75c73c47c805272f4f839e21a5ca8ac8/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3132303131302f39373034346462392d653064372d303064322d393839642d6633386330663132303134642e706e67)

## 汎用的に使える公開済アセット情報取得の問い合わせ

### 指定した公開済アセット1件の情報を取得する`getItem()`

`getItem()`を利用し、指定した公開済アセットの情報を取得できます。問い合わせパラメータには、公開チャネルのchannelToken(チャネルトークン)とid(アセットID)もしくはslug(スラグ)を指定します。ここでは**チャネルトークン**と**アセットID**を指定した例を紹介します

```graphql:getItem(..)
{
  getItem(
    id:"<アセットID>",
    channelToken:"<チャネルトークン>")
  {
    id
    name
    slug
    description
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/cfdb3aed-34c6-54d0-1b52-3c7d713e4783.png)


### 指定した条件に合致した複数の公開済アセットの情報を取得する`getItems()`

`getItems()`を利用し、指定した条件に合致した複数の公開済アセットの情報を取得できます。問い合わせパラメータには、公開チャネルのチャネルトークンやフィルタ条件などを指定します。ここでは公開チャネルの**チャネルトークン**と、**アセットタイプ=`sampleNewsType`のフィルタ条件**を指定した例を紹介します

```graphql:getItems(..)
{
  getItems(channelToken:"<チャネルトークン>",
  filter:{type:{op: EQUALS, value:"sampleNewsType"}})
  {
    totalResults
    items
    {
      id
      name
      slug
      description
    }
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e4a1dbae-cc5a-d014-3f88-b9a9cffdc107.png)


## アセットタイプを指定した公開済アセット情報取得の問い合わせ

OCMはアセットにアクセスするための問合せを自動的に生成します。例えば、アセットタイプ=**sampleNewsType**の公開済アセット情報を取得する場合は、`getSampleNewsType(...)`や`getSampleNewsTypeCollection(...)`が作成されます。それぞれの使い方は以下の通りです

### 特定のアセットタイプの公開済アセット1件の情報を取得する`get<アセットタイプ名>()`

`getSampleNewsType()`を利用し、アセットタイプ=sampleNewsTypeの公開済アセットを取得できます。ここでは**チャネルトークン**と **slug(スラグ)** を指定した例を紹介します

```graphql:getSampleNewsType(...)
{
  getSampleNewsType(
    slug: "<アセットのスラグ>",
  	channelToken:"<チャネルトークン>")
  {
    id
    name
    fields
    {
      title
      body
      image{
        id
        name
        fields{
          file
          {
            url
          }
        }
      }
    }
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e059ba34-aae6-b695-b159-e17892386ecc.png)

### 特定のアセットタイプの複数アセットの情報を取得する`get<アセットタイプ名>Collection()`  <font color="red">Update!</font>

`getSampleNewsTypeCollection()`を利用し、アセットタイプ=sampleNewsTypeの公開済アセットを複数件取得できます。ここでは**チャネルトークン**と**アセット名(name)による降順ソート(DESC)** を指定した例を紹介します

```graphql:getSampleNewsTypeCollection(...)
{
  getSampleNewsTypeCollection(
  	channelToken:"<チャネルトークン>",
  	sort:{name:DESC})
  {
    totalResults
    items
    {
      id
    	name
    	fields
    	{
          title
      	  body
      	  image{
      		name
      		fields{
            file{
              url
            }
      	  }
      	}
      }
    }
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/d79157ba-5c07-aa68-7825-2ef438504d23.png)


# 2. GraphQLで未公開アセット情報を取得する <font color="red">Update!</font>

OCMでは公開前のアセット（ドラフト、レビュー中などのステータスのアセット）のGraphQL問い合わせ「GraphQLコンテンツ・プレビュー」もサポートします。これを利用し、公開前の最新バージョンのアセットをプレビューする際に利用できます

GraphQLコンテンツプレビューのエンドポイント、及びGraphQL IDEのURLは以下の通りです

**エンドポイント**
```url
https://<OCMインスタンスのURL>/content/preview/api/v1.1/graphql
```

**GraphQL IDE**
```url
https://<OCMインスタンスのURL>/content/preview/api/v1.1/graphql/explorer
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/4f69cdba-47ee-ff71-8cb5-42eb65929a65.png)

:::note info
公開済アセットを取得する際の */content/**published*** が */content/**preview*** に変更されます
:::


## GraphQLコンテンツプレビューをIDEで確認する

コンテンツアイテムを1件新規作成し、公開チャネルに割り当てます。ここでは**sampleNewsType**のコンテンツアイテム`sample news content 003`を1件作成し、**sampleChannel**に割り当てます

なお、作成したコンテンツアイテム`sample news content 003`は**未公開**（ドラフトステータス）のままとします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/85d31d63-3a99-c996-5bbb-e8026b07ed73.png)


**プレビュー用のGraphQL IDE**をブラウザで開き、`getSampleNewsTypeCollection`を実行します。前の手順で作成したドラフトステータスのコンテンツアイテム`sample news content 003`が**取得できます**（公開済アセット2件+未公開アセット1件の合計3件のアセット情報を取得）
```graphql:getSampleNewsTypeCollection(...)
{
  getSampleNewsTypeCollection(
  	channelToken:"<チャネルトークン>",
  	sort:{name:DESC})
  {
    totalResults
    items
    {
      id
    	name
    	fields
    	{
          title
          body
    	}
    }
  }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/689c88e7-57c5-ec43-a5b2-fe9bd9517813.png)

**公開済アセットを取得するGraphQL IDE**を開き、同じ条件で`getSampleNewsTypeCollection`を実行します。今回はドラフトステータスのコンテンツアイテム`sample news content 003`は**取得されません**（公開済アセットの2件のみ取得）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/d35e91f1-fa49-8e73-df10-bd37b84e4311.png)


# 3. おわりに

この記事ではOCMのGraphQLの利用方法について紹介しました。「GraphQLコンテンツ・プレビュー」を利用することで、**公開前のアセット情報もGraphQLで取得することができます**。検証環境などで公開前のアセットをプレビューする場合などでの利用が想定されますので、機会がありましたら是非ご活用ください

# 4. 関連リソース

- 製品ドキュメント
    - [GraphQL Support in Oracle Content Management(英語)](https://docs.oracle.com/en/cloud/paas/content-cloud/solutions/graphql-support-oracle-content-management.html#GUID-E7B5E5E6-94B3-41BC-A1E7-6EB8327A3D25) | [(日本語翻訳版)](https://docs.oracle.com/cd/E83857_01/paas/content-cloud/solutions/graphql-support-oracle-content-management.html#GUID-E7B5E5E6-94B3-41BC-A1E7-6EB8327A3D25)
- チュートリアル（英語）
    - [Use GraphQL with **React** and Oracle Content Management](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-react-graphql-tutorial/index.html)
    - [Use GraphQL with **Vue** and Oracle Content Management](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-vue-graphql-tutorial/index.html)
    - [Use GraphQL with **Gatsby** and Oracle Content Management](https://docs.oracle.com/en/cloud/paas/content-cloud/oce-gatsby-graphql-tutorial/index.html)