From 847b7303278c7894e5d6b055e0e654f6cf809330 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 9 Mar 2022 23:23:47 +0100 Subject: refactor: update graphql queries (#14) * refactor: replace postBy query postBy is now deprecated in WPGraphQL v1.7 * refactor: update post comments query PostBy is deprecated and it is now possible to use the post ID to query comments. * refactor: update get topic by slug query topicBy is deprecated * refactor: update get thematic by slug query thematicBy is deprecated --- src/components/Comment/Comment.tsx | 13 ++++--- src/components/CommentsList/CommentsList.tsx | 2 +- src/services/graphql/queries.ts | 52 +++++++++++++--------------- src/ts/types/articles.ts | 4 +-- src/ts/types/comments.ts | 18 ++++------ src/ts/types/taxonomies.ts | 4 +-- src/utils/helpers/format.ts | 6 ++-- 7 files changed, 46 insertions(+), 53 deletions(-) diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx index 0371288..e20c5aa 100644 --- a/src/components/Comment/Comment.tsx +++ b/src/components/Comment/Comment.tsx @@ -67,7 +67,10 @@ const Comment = ({ const getApprovedComment = () => { return ( <> -
+
{comment.author.gravatarUrl && (
@@ -89,7 +92,7 @@ const Comment = ({
@@ -118,7 +121,7 @@ const Comment = ({ {shouldOpenForm && ( )} {comment.replies.length > 0 && ( @@ -127,7 +130,7 @@ const Comment = ({ return ( @@ -152,7 +155,7 @@ const Comment = ({ const schemaJsonLd: WithContext = { '@context': 'https://schema.org', - '@id': `${settings.url}/#comment-${comment.commentId}`, + '@id': `${settings.url}/#comment-${comment.databaseId}`, '@type': 'Comment', parentItem: isNested ? { '@id': `${settings.url}/#comment-${comment.parentDatabaseId}` } diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx index 1e7c3e7..4ea2fc2 100644 --- a/src/components/CommentsList/CommentsList.tsx +++ b/src/components/CommentsList/CommentsList.tsx @@ -33,7 +33,7 @@ const CommentsList = ({ return data.map((comment) => { return ( diff --git a/src/services/graphql/queries.ts b/src/services/graphql/queries.ts index 8dd8563..9caf62b 100644 --- a/src/services/graphql/queries.ts +++ b/src/services/graphql/queries.ts @@ -163,8 +163,8 @@ export const getAllPostsSlug = async (): Promise => { export const getPostBySlug = async (slug: string): Promise
=> { const query = gql` - query PostBySlug($slug: String!) { - postBy(slug: $slug) { + query PostBySlug($slug: ID!) { + post(id: $slug, idType: SLUG) { acfPosts { postsInTopic { ... on Topic { @@ -226,7 +226,7 @@ export const getPostBySlug = async (slug: string): Promise
=> { const variables = { slug }; const response = await fetchApi(query, variables); - return getFormattedPost(response.postBy); + return getFormattedPost(response.post); }; //============================================================================== @@ -235,24 +235,22 @@ export const getPostBySlug = async (slug: string): Promise
=> { export const getCommentsByPostId = async (id: number): Promise => { const query = gql` - query MyQuery($id: Int) { - postBy(postId: $id) { - comments(where: { order: ASC, orderby: COMMENT_DATE }) { - nodes { - approved - author { - node { - gravatarUrl - id - name - url - } + query PostComments($id: ID!) { + comments(where: { contentId: $id, order: ASC, orderby: COMMENT_DATE }) { + nodes { + approved + author { + node { + databaseId + gravatarUrl + name + url } - commentId - content - date - parentDatabaseId } + content + databaseId + date + parentDatabaseId } } } @@ -260,9 +258,7 @@ export const getCommentsByPostId = async (id: number): Promise => { const variables = { id }; const response = await fetchApi(query, variables); - const formattedComments = getFormattedComments( - response.postBy.comments.nodes - ); + const formattedComments = getFormattedComments(response.comments.nodes); return buildCommentsTree(formattedComments); }; @@ -273,8 +269,8 @@ export const getCommentsByPostId = async (id: number): Promise => { export const getTopicBySlug = async (slug: string): Promise => { const query = gql` - query TopicBySlug($slug: String!) { - topicBy(slug: $slug) { + query TopicBySlug($slug: ID!) { + topic(id: $slug, idType: SLUG) { acfTopics { officialWebsite postsInTopic { @@ -358,7 +354,7 @@ export const getTopicBySlug = async (slug: string): Promise => { const variables = { slug }; const response = await fetchApi(query, variables); - return getFormattedTopic(response.topicBy); + return getFormattedTopic(response.topic); }; export const getAllTopicsSlug = async (): Promise => { @@ -400,8 +396,8 @@ export const getAllTopics = async (): Promise => { export const getThematicBySlug = async (slug: string): Promise => { const query = gql` - query ThematicBySlug($slug: String!) { - thematicBy(slug: $slug) { + query ThematicBySlug($slug: ID!) { + thematic(id: $slug, idType: SLUG) { acfThematics { postsInThematic { ... on Post { @@ -477,7 +473,7 @@ export const getThematicBySlug = async (slug: string): Promise => { const variables = { slug }; const response = await fetchApi(query, variables); - return getFormattedThematic(response.thematicBy); + return getFormattedThematic(response.thematic); }; export const getAllThematicsSlug = async (): Promise => { diff --git a/src/ts/types/articles.ts b/src/ts/types/articles.ts index ea90207..64d2860 100644 --- a/src/ts/types/articles.ts +++ b/src/ts/types/articles.ts @@ -1,5 +1,5 @@ import { ContentInfo, ContentParts, Dates } from './app'; -import { Comment, CommentsNode } from './comments'; +import { Comment } from './comments'; import { Cover, RawCover } from './cover'; import { SEO } from './seo'; import { RawTopicPreview, TopicPreview, ThematicPreview } from './taxonomies'; @@ -85,7 +85,7 @@ export type RawArticlePreview = Pick< }; export type PostBy = { - postBy: RawArticle; + post: RawArticle; }; export type ArticleProps = { diff --git a/src/ts/types/comments.ts b/src/ts/types/comments.ts index 36bd98c..aa3fac3 100644 --- a/src/ts/types/comments.ts +++ b/src/ts/types/comments.ts @@ -2,17 +2,9 @@ // Comments query //============================================================================== -export type CommentsByPostId = { - postBy: { - comments: { - nodes: RawComment[]; - }; - }; -}; - export type CommentAuthor = { - gravatarUrl: string; name: string; + gravatarUrl: string; url: string; }; @@ -23,12 +15,10 @@ export type RawCommentAuthor = { export type Comment = { approved: ''; author: CommentAuthor; - commentId: number; + databaseId: number; content: string; date: string; - id: string; parentDatabaseId: number; - parentId: string | null; replies: Comment[]; }; @@ -40,6 +30,10 @@ export type CommentsNode = { nodes: RawComment[]; }; +export type CommentsByPostId = { + comments: CommentsNode; +}; + //============================================================================== // Comment mutations //============================================================================== diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts index 8a0fcc7..17fc022 100644 --- a/src/ts/types/taxonomies.ts +++ b/src/ts/types/taxonomies.ts @@ -61,7 +61,7 @@ export type RawTopic = TopicPreview & { }; export type TopicBy = { - topicBy: RawTopic; + topic: RawTopic; }; export type AllTopicsSlug = { @@ -99,7 +99,7 @@ export type RawThematic = TaxonomyPreview & { }; export type ThematicBy = { - thematicBy: RawThematic; + thematic: RawThematic; }; export type AllThematicsSlug = { diff --git a/src/utils/helpers/format.ts b/src/utils/helpers/format.ts index 71455b6..dd35868 100644 --- a/src/utils/helpers/format.ts +++ b/src/utils/helpers/format.ts @@ -189,15 +189,15 @@ export const buildCommentsTree = (comments: Comment[]) => { const commentsTree: Comment[] = []; comments.forEach( - (comment) => (hashTable[comment.commentId] = { ...comment, replies: [] }) + (comment) => (hashTable[comment.databaseId] = { ...comment, replies: [] }) ); comments.forEach((comment) => { if (!comment.parentDatabaseId) { - commentsTree.push(hashTable[comment.commentId]); + commentsTree.push(hashTable[comment.databaseId]); } else { hashTable[comment.parentDatabaseId].replies.push( - hashTable[comment.commentId] + hashTable[comment.databaseId] ); } }); -- cgit v1.2.3