Tailwind Logo

Definition of fields and methods of classes used in Content Hub ONE (media)

Content Hub ONE

Published: 2024-08-05

In order to retrieve data from Content Hub ONE, we will first implement the interface to be used in Typescript. We will create the interface while checking the query using Postman. The first step is to create the interface for Media.

Check the media schema

When we worked with Postman in a previous post, Postman loaded the Content Hub ONE schema for easy viewing in the tool. The screen looks like the following.

choneinterfaces01.png

For example, clicking on Media switches the screen as follows.

choneinterfaces02.png

When the query is executed with the ID of the uploaded Media, the results are obtained as follows.

choneinterfaces03.png

You can also take data that the system has, but in this case we just want to get the codes related to the media files, so we will create a query as follows. The order is slightly modified.

GraphQL 
query Media {
    media(id: "yourmediaid") {
        id
        name
        description
        fileId
        fileName
        fileUrl
        fileHeight
        fileWidth
        fileSize
        fileType
    }
}

The results to be obtained are as follows

JSON 
{
    "data": {
        "media": {
            "id": "GXDwOgPJDESspwsYlbx_Rg",
            "name": "chonestatus03.png",
            "description": "",
            "fileId": "fef9ac60109043cbbb1c3401e6938ae0",
            "fileName": "chonestatus03.png",
            "fileUrl": "https://mms-delivery.sitecorecloud.io/api/media/v2/delivery/f36ae82c-5f19-40c5-4086-08daadeee1b8/fef9ac60109043cbbb1c3401e6938ae0",
            "fileHeight": 398,
            "fileWidth": 941,
            "fileSize": 30399,
            "fileType": "image/png"
        }
    }
}

Using this result, create a file for interface as follows

TypeScript 
export interface Media {
  id: string;
  name: string;
  description: string;
  fileId: string;
  fileName: string;
  fileUrl: string;
  fileHeight: number;
  fileWidth: number;
  fileSize: number;
  fileType: string;
}

export interface MediaResponse {
    data: {
        media: Partial<Media>;
    };
}

Media is defined as a schema that is owned by the system, so it is basically never extended. The Media field is defined as a content type field for Blog posts. In this case, this interface will be used.

Summary

This time, we created an interface for Media, one of the prerequisites for actually implementing integration with Next.js. In the next article, we will create the interface of Blog.

Tags