chore(comments): address pr comments

Author: juanchoperezj

src/api/posts/index.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './use-add-post';
 export * from './use-post';
+export * from './use-post-comments';
 export * from './use-posts';

src/api/posts/use-add-post.ts

@@ -1,18 +1,16 @@
 import type { AxiosError } from 'axios';
-import axios from 'axios';
 import { createMutation } from 'react-query-kit';
 
-import { Env } from '@/core/env';
-
+import { client } from '../common';
 import type { Post } from './types';
 
 type Variables = { title: string; body: string; userId: number };
 type Response = Post;
 
 export const useAddPost = createMutation<Response, Variables, AxiosError>({
   mutationFn: async (variables) =>
-    axios({
-      url: `${Env.API_URL}posts/add`,
+    client({
+      url: 'posts/add',
       method: 'POST',
       data: variables,
       headers: {

src/api/posts/use-post-comments.ts

@@ -0,0 +1,24 @@
+import { createQuery } from 'react-query-kit';
+
+import { queryFactory } from '@/api/query-factory';
+
+import { client } from '../common';
+import { type Comment } from './types';
+
+type Variables = {
+  id: number;
+};
+
+type Response = {
+  comments: Comment[];
+};
+
+const getPostComments = async (id: number) => {
+  const { data } = await client.get(`posts/${id}/comments`);
+  return data;
+};
+
+export const usePostComments = createQuery<Response, Variables>({
+  ...queryFactory.posts.detail(1)._ctx.comments,
+  fetcher: (variables) => getPostComments(variables.id),
+});

src/api/posts/use-post.ts

@@ -1,4 +1,3 @@
-import { useQuery } from '@tanstack/react-query';
 import type { AxiosError } from 'axios';
 import { createQuery } from 'react-query-kit';
 
@@ -16,12 +15,6 @@ const getPosts = async (variables: Variables) => {
 };
 
 export const usePost = createQuery<Response, Variables, AxiosError>({
-  ...queryFactory.posts.detail(1), // this translates to ['posts', 1]
+  ...queryFactory.posts.detail(1),
   fetcher: getPosts,
 });
-
-export const usePostComments = (postId: number) =>
-  useQuery({
-    ...queryFactory.posts.detail(postId)._ctx.comments,
-    enabled: !!postId,
-  });

src/api/query-factory.ts

@@ -1,34 +1,20 @@
 import {
   createQueryKeys,
-  type inferQueryKeyStore,
   mergeQueryKeys,
 } from '@lukemorales/query-key-factory';
 
-// separate query keys for each service
 import { cartKeys } from './carts/query-keys';
-import { client } from './common';
-
-const getPostComments = async (id: string) => {
-  const { data } = await client.get(`posts/${id}/comments`);
-  return data;
-};
 
 export const postKeys = createQueryKeys('posts', {
-  list: (filters) => ['posts', filters],
-  // list: null, // if we don't want to pass any filters
-  // detail: (id) => [id], // option one
+  list: (filters) => [filters],
   detail: (id) => ({
-    queryKey: [id], // [post, detail, id]
+    queryKey: [id],
     contextQueries: {
-      // comments become part of the contextQueries query key [post, detail, id, comments]
       comments: {
         queryKey: null,
-        queryFn: () => getPostComments(id),
       },
     },
-  }), // option two
-  comments: (id) => [id], // [posts, id, comments]
+  }),
 });
 
-export type QueryKeys = inferQueryKeyStore<typeof queryFactory>;
 export const queryFactory = mergeQueryKeys(postKeys, cartKeys);

src/app/feed/[id].tsx

@@ -14,7 +14,9 @@ export default function Post() {
   const {
     data: { comments } = { comments: [] },
     isLoading: isLoadingComments,
-  } = usePostComments(data?.id!);
+  } = usePostComments({
+    variables: { id: data?.id! },
+  });
 
   if (isPending) {
     return (

src/app/feed/add-post.tsx

@@ -35,8 +35,6 @@ export default function AddPost() {
             message: 'Post added successfully',
             type: 'success',
           });
-          // react-query-kit has the getKey method this will require to import the query function everywhere needed
-          // queryClient.invalidateQueries(usePosts.getKey());
           queryClient.invalidateQueries({
             queryKey: queryFactory.posts.list({}).queryKey,
           });