Tailwind Logo

API キーを利用してデータを取得する

Content Hub ONE

公開日: 2024-08-02

コンテンツに関する情報を取得するために、今回は API キーを利用してデータを取得していきます。今回は２つのキーを作成して、データの取得に関して確認をしていきます。

API キーの作成

キーを作成するためには、Settings メニューから API Keys の項目を選択すると、以下のように何もキーが表示されない状況となっています。

choneapi01.png

Create API Key のボタンをクリックすると、以下のように Key の名前、およびタイプの確認が出てきます。まず最初に、Delivery の Type のキーを作成します。

choneapi02.png

Save ボタンをクリックすると API キーが表示されます。なお、このキーに関しては、この画面で表示されている間は取得できますが、一覧から取ることはできません。

choneapi03.png

ダイアログの左下に表示されている Open GFraphQL IDE をクリックすると、以下の URL から GraphQL に対してアクセスできるようになります。

もう一つ、Preview のキーを取得します。

choneapi04.png

同様にこのタイミングのみ取得できるキーとなるため、Copy して保存してください。なお、Preview のダイアログに表示される GraphQL IDE の URL は以下のようになっています。

API キーを利用してデータを取得する

Content Hub ONE で管理しているコンテンツについて、データを取得するための GraphQL のエンドポイントは以下のページで紹介されています。

今回はキーを２つ作成しましたが、エンドポイントが Delivery と Preview で異なる形です。まず、Preview API IDE にアクセスします。

choneapi05.png

画面にはエラーが表示されています。このエラーを回避するために、HTTP HEADERS を開いて、そこにキーを設定する必要があります。キーの記述方法は以下の Json に対して、上で取得したキーを入れてください。

JSON 
{
    "X-GQL-Token":"your-preview-api-key"
}

キーを設定すると、以下のように右側の画面からエラーの表示が消えました。

choneapi06.png

実際に左側の画面に、GraphQL query examples の Query を利用して以下のクエリを作成しました。

GraphQL 
{
  allBlog {
    total
    results {
      name
      id
      title
      description
    }
  }
}

結果として、以下のデータを取得することができました。

JSON 
{
  "data": {
    "allBlog": {
      "total": 2,
      "results": [
        {
          "name": "Introducing Sitecore Composable DXP Products",
          "id": "bthW8EnPU0-tdSeXOdMdSQ",
          "title": "Introducing Sitecore Composable DXP Products",
          "description": "Learn about the powerful features and benefits of Sitecore Composable DXP Products."
        },
        {
          "name": "Introduction to the Blog",
          "id": "jPUxNefHAkW31dYrXPwuUg",
          "title": "Welcome to Our Blog",
          "description": "Explore the latest trends, insights, and stories in our blog."
        }
      ]
    }
  }
}

preview においては、Published および Draft のステータスのコンテンツを取得することができています。

次は Delivery の GraphQL の IDE に切り替えて、HTTP HEADERS に正しい値を設定します。そして Preview に向けて投げた同じクエリを利用して、結果を取得すると以下の Json データが返ってきます。

JSON 
{
  "data": {
    "allBlog": {
      "total": 1,
      "results": [
        {
          "name": "Introducing Sitecore Composable DXP Products",
          "id": "bthW8EnPU0-tdSeXOdMdSQ",
          "title": "Introducing Sitecore Composable DXP Products",
          "description": "Learn about the powerful features and benefits of Sitecore Composable DXP Products."
        }
      ]
    }
  }
}
choneapi07.png

API キーとエンドポイントを切り替えることで、公開済みのコンテンツのみを取得することができました。

まとめ

実際に取得した Json のデータを見ると、下書き、公開済みという形でデータの取得が可能となっていることを確認することができました。次回は IDE ではなく Postman を利用してアクセスする方法を確認していきます。

関連タグ