Use the OCE Content SDK to Fetch Content

We can now leverage the Oracle Content and Experience Content SDK to fetch content so that we can render it in our React application.

To import the OCE Content SDK, change the incomplete import statement in src/scripts/services to:

import {createDeliveryClient} from 'contentsdk/content.min';

The OCE Content SDK uses a DeliveryClient object to specify the endpoint; you can make all requests using that client object. Each of the pages creates a delivery client object using createDeliveryClient when the page loads. Change getDeliveryClient() in src/scripts/services to create the delivery client, as follows:

const deliveryClient = createDeliveryClient(serverconfig);

The home page loads one content item based on its name, using queryItems. This uses a query that looks for content items of type OCEGettingStartedHomePage that have the name HomePage. Change fetchHomePage() in src/scripts/services to use this query:

client.queryItems({
  "q": '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
  "fields": "all"
})

The Articles page shows all articles for a given topic. Again, we use queryItems, this time searching for content items of the type OCEGettingStartedArticle that reference the topic whose identifier was passed to the page as a query parameter. Change fetchArticles() in src/scripts/services to use this query:

      client.queryItems({
        "q": '(type eq "OCEGettingStartedArticle" AND fields.topic eq 
      "${topicId}")',
        "fields": "all",
        "orderBy": "fields.published_date:desc"
      });

The individual article page shows a single article, but the page includes content from Author, which is a separate content type. To fetch one content item plus any content items it references, use getItem with the expand parameter set to all. Change fetchArticle() in src/scripts/services to use this query:

      client.getItem({
        "id": articleId,
        "expand": "all"
      });

Now that we have our data queries, we can render the responses in our React components.

Next step: Create React Components