So far, we have defined only the items necessary for testing with respect to querying the data of registered blogs, but we will add items that will be necessary for future use.
Update interfaces
About Media
This is in the form of retrieving a list of images in a blog post. For this part, we will add a query definition. The basic query is as follows
GraphQL
query Media {
media(id: "mediaid") {
id
name
description
fileHeight
fileId
fileName
fileSize
fileType
fileUrl
fileWidth
}
}As for the above code, add the following code to src/interfaces/Media/index.ts so that the items required by the media and the ID can be specified and retrieved with regard to the media.
TypeScript
export const MediaQuery = `
id
name
description
fileHeight
fileId
fileName
fileSize
fileType
fileUrl
fileWidth
`;
export const MediaFromIDQuery = (mediaId: string) => {
return (
`
query Media {
media(id: "${mediaId}") {
` +
MediaQuery +
`
}
}
`
);
};Media, so that the required data can be retrieved.
About Blog
The query used so far is the following code.
TypeScript
export const AllBlogQuery = `query AllBlog {
allBlog(orderBy: PUBLISHDATE_DESC) {
total
results {
id
name
publishDate
slug
title
description
}
}
}
`For the current Blog query, omitting the details of the image list (image) and related articles list (relatedArticles) items, the query would look like this
GraphQL
query Blog {
blog(id: null) {
id
name
publishDate
slug
title
description
body
image {
total
results {
id
}
}
relatedArticles {
total
results {
id
}
}
}
}In fact, relatedArticles will have the same fields as Blogs, but this time we will not retrieve the relatedArticles data that relatedArticles has. This makes the query a little more complicated, but it is defined as follows
TypeScript
const BlogFieldsQuery =
`
id
name
publishDate
slug
title
description
body
`;
const BlogQuery =
BlogFieldsQuery + `
image {
results {
` +
MediaQuery +
`
}
total
}
relatedArticles {
results {
` +
BlogFieldsQuery +
`
image {
total
results {
` +
MediaQuery +
`
}
}
}
}
`;
export const AllBlogQuery = `query AllBlog {
allBlog(orderBy: PUBLISHDATE_DESC) {
total
results {
` +
BlogQuery +
`
}
}
}
`Update call of fetchGraphQL Function
This time we have increased the number of data items to be retrieved, so we will also add processing in the function that retrieves the data: update getAllBlog defined in src/utils/getBlog/index.ts as follows.
TypeScript
export async function getAllBlog() {
const results: AllBlogResponse = (await fetchGraphQL(
AllBlogQuery
)) as AllBlogResponse;
const posts: Partial<Blog>[] = [];
results.data.allBlog.results.forEach((post: Partial<Blog>) => {
posts.push({
id: post.id,
name: post.name,
title: post.title,
publishDate: post.publishDate,
description: post.description,
slug: post.slug,
body: post.body,
image: post.image,
relatedArticles: post.relatedArticles,
});
});
return posts;
}This completes a series of updates.
Summary
This time, in adding processing, basically for Blog and Media, common items were made easier to call separately for ease of use when creating queries. This allows for flexible updating of items and processes with minimal individual impact on future components.