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

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 (
       <>
-        <article className={styles.wrapper} id={`comment-${comment.commentId}`}>
+        <article
+          className={styles.wrapper}
+          id={`comment-${comment.databaseId}`}
+        >
           <header className={styles.header}>
             {comment.author.gravatarUrl && (
               <div className={styles.avatar}>
@@ -89,7 +92,7 @@ const Comment = ({
             </dt>
             <dd>
               <time dateTime={comment.date}>
-                <Link href={`#comment-${comment.commentId}`}>
+                <Link href={`#comment-${comment.databaseId}`}>
                   <a>{getLocaleDate()}</a>
                 </Link>
               </time>
@@ -118,7 +121,7 @@ const Comment = ({
         {shouldOpenForm && (
           <DynamicCommentForm
             articleId={articleId}
-            parentId={comment.commentId}
+            parentId={comment.databaseId}
           />
         )}
         {comment.replies.length > 0 && (
@@ -127,7 +130,7 @@ const Comment = ({
               return (
                 <Comment
                   articleId={articleId}
-                  key={reply.commentId}
+                  key={reply.databaseId}
                   comment={reply}
                   isNested={true}
                 />
@@ -152,7 +155,7 @@ const Comment = ({
 
   const schemaJsonLd: WithContext<CommentSchema> = {
     '@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 (
         <Comment
-          key={comment.commentId}
+          key={comment.databaseId}
           articleId={articleId}
           comment={comment}
         />
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<Slug[]> => {
 
 export const getPostBySlug = async (slug: string): Promise<Article> => {
   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<Article> => {
   const variables = { slug };
   const response = await fetchApi<PostBy>(query, variables);
 
-  return getFormattedPost(response.postBy);
+  return getFormattedPost(response.post);
 };
 
 //==============================================================================
@@ -235,24 +235,22 @@ export const getPostBySlug = async (slug: string): Promise<Article> => {
 
 export const getCommentsByPostId = async (id: number): Promise<Comment[]> => {
   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<Comment[]> => {
 
   const variables = { id };
   const response = await fetchApi<CommentsByPostId>(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<Comment[]> => {
 
 export const getTopicBySlug = async (slug: string): Promise<Topic> => {
   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<Topic> => {
   const variables = { slug };
   const response = await fetchApi<TopicBy>(query, variables);
 
-  return getFormattedTopic(response.topicBy);
+  return getFormattedTopic(response.topic);
 };
 
 export const getAllTopicsSlug = async (): Promise<Slug[]> => {
@@ -400,8 +396,8 @@ export const getAllTopics = async (): Promise<TopicPreview[]> => {
 
 export const getThematicBySlug = async (slug: string): Promise<Thematic> => {
   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<Thematic> => {
   const variables = { slug };
   const response = await fetchApi<ThematicBy>(query, variables);
 
-  return getFormattedThematic(response.thematicBy);
+  return getFormattedThematic(response.thematic);
 };
 
 export const getAllThematicsSlug = async (): Promise<Slug[]> => {
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]
       );
     }
   });