Tailwind Logo

Defining class fields and methods for use in Content Hub ONE (blog)

Content Hub ONE

Published: 2024-08-06

In the previous article, we created an interface for Content Hub ONE media. This time, we would like to create an interface for the content type of the blog we would like to use.

Check the schema of the blog

As in the previous media, we will create a query using the ID of the target content; the Postman screen looks like this

choneinterfaces04.png

The following is the actual query that was created, with unnecessary items removed and rearranged slightly to make it easier to read.

GraphQL 
query Blog {
    blog(id: yourID) {
        id
        name
        title
        description
        publishDate
        blogImage {
            results {
                description
                fileHeight
                fileId
                fileName
                fileSize
                fileType
                fileUrl
                fileWidth
                id
                name
            }
        }
    }
}

The resulting data to be obtained is as follows

JSON 
{
    "data": {
        "blog": {
            "id": "8J0Q3r0-H02ExS1sj27v8A",
            "name": "First post",
            "title": "Welcome to Content Hub ONE Blog",
            "description": "This blog article provide Sitecore Content Hub ONE introduction.",
            "publishDate": "2023-09-13T05:00:00.000Z",
            "blogImage": {
                "results": [
                    {
                        "description": "",
                        "fileHeight": 2592,
                        "fileId": "61042d9018414a41a114d6ba586b6c38",
                        "fileName": null,
                        "fileSize": 3324241,
                        "fileType": "image/jpeg",
                        "fileUrl": "https://mms-delivery.sitecorecloud.io/api/media/v2/delivery/f36ae82c-5f19-40c5-4086-08daadeee1b8/61042d9018414a41a114d6ba586b6c38",
                        "fileWidth": 3872,
                        "id": "dfjaYMg7Lk-Gz3HY790J-Q",
                        "name": "marcel-eberle-rendLSpkDtY-unsplash.jpg"
                    }
                ]
            }
        }
    }
}

The interface for handling this Json data is configured as follows

TypeScript 
import { Media } from "@/interfaces/media";

export interface Blog {
  id: string;
  name: string;
  title: string;
  description: string;
  publishDate: string;
  blogImage: {
    results: Partial<Media>[];
  };
}

With respect to the above Blog interface, we have defined it as a base. The interface for using blog posts should also be defined as follows

TypeScript 
export interface BlogResponse {
    data: {
      blog: Partial<Blog>;
    };
  }

In this case, since multiple images can be set for the content field, this part is obtained in results and the file format is set as Media.

Check the schema of all blog posts

We have created an interface for the blog post alone, but we will actually add the process of retrieving the blog data and rendering it in React using that data. The actual query will be set up as follows this time (the results item in blogImage is omitted).

GraphQL 
query AllBlog {
  allBlog {
    total
    results {
      description
      id
      name
      publishDate
      title
      blogImage {
        total
        results {
          id
          name
          description
          fileHeight
          fileId
          fileName
          fileSize
          fileType
          fileUrl
          fileWidth
        }
      }
    }
  }
}

The resulting json file will look like this

JSON 
{
    "data": {
        "allBlog": {
            "total": 2,
            "results": [
                {
                    "name": "First post",
                    "id": "8J0Q3r0-H02ExS1sj27v8A",
                    "title": "Welcome to Content Hub ONE Blog",
                    "description": "This blog article provide Sitecore Content Hub ONE introduction.",
                    "publishDate": "2023-09-13T05:00:00.000Z",
                    "blogImage": {
                        "results": [
                            {
                                "fileUrl": "https://mms-delivery.sitecorecloud.io/api/media/v2/delivery/f36ae82c-5f19-40c5-4086-08daadeee1b8/61042d9018414a41a114d6ba586b6c38"
                            }
                        ]
                    }
                },
                {
                    "name": "Second post",
                    "id": "zueShIf2qk6CzN5EL-mAIQ",
                    "title": "Did you know Headless CMS?",
                    "description": "Sitecore Content Hub ONE is pure Headless CMS",
                    "publishDate": "2023-09-14T05:00:00.000Z",
                    "blogImage": {
                        "results": []
                    }
                }
            ]
        }
    }
}

The data of the two articles are retrieved as json. When using this as an interface, the following code is prepared in this case.

TypeScript 
export interface AllBlogResponse {
  data: {
    allBlog: {
      total: number;
      results: Partial<Blog>[];
    };
  };
}

The already prepared BlogResponse was set as the interface to be used when a blog post is retrieved, in the form of AllBlogResponse, which has it as an array.

Summary

Previously, we created an interface based on Json data, but this time we put the interface together in such a way that it is configured to have multiple media and to retrieve multiple blogs with multiple contents.

So far, we have used Postman to get the execution results and create an interface. We would like to use this interface to connect to Content Hub ONE to use the content.

Tags