refactor: infinite query hook 파라미터 수정

fetchNextPage 함수를 사용하기 위해서 getNextPageParam callback 을 정의해서 사용해야하는데, 이를 사용하기 위해서 기존의 axios api 함수의 parameter type을 변경함 ref #44
nolmungshemung · Feb 10, 2022 · bd47385 · bd47385
1 parent 70b8a93
commit bd47385
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 77 deletions.
diff --git a/data/services/services.api.ts b/data/services/services.api.ts
@@ -1,52 +1,41 @@
 import axios from '~/shared/axios';
 import { SuccessResponse } from '~/shared/types';
 import {
-  Contents,
+  MainContentsResponse,
   Writer,
   ReadingContentsData,
   TranslatingContentsData,
   FeedContentsData,
   WritingContentsRequest,
   ContentsSearchParams,
+  InfiniteQueryParam,
 } from './services.model';
 
 export async function getMainContents({
-  start,
-  count,
-  baseTime,
-  keyword,
-}: ContentsSearchParams) {
-  const { data } = await axios.get<SuccessResponse<Contents[]>>(
-    '/services/main_contents',
-    {
-      params: {
-        start,
-        count,
-        baseTime,
-        keyword,
-      },
+  pageParam = 0,
+  queryKey,
+}: InfiniteQueryParam) {
+  const [url, params] = queryKey as [string, ContentsSearchParams];
+  const { data } = await axios.get<SuccessResponse<MainContentsResponse>>(url, {
+    params: {
+      ...params,
+      start: pageParam,
     },
-  );
+  });
   return data;
 }
 
 export async function getMainWriters({
-  start,
-  count,
-  baseTime,
-  keyword,
-}: ContentsSearchParams) {
-  const { data } = await axios.get<SuccessResponse<Writer[]>>(
-    '/services/main_writers',
-    {
-      params: {
-        start,
-        count,
-        baseTime,
-        keyword,
-      },
+  pageParam = 0,
+  queryKey,
+}: InfiniteQueryParam) {
+  const [url, params] = queryKey as [string, ContentsSearchParams];
+  const { data } = await axios.get<SuccessResponse<Writer[]>>(url, {
+    params: {
+      ...params,
+      start: pageParam,
     },
-  );
+  });
   return data;
 }
 

diff --git a/data/services/services.hooks.ts b/data/services/services.hooks.ts
@@ -2,26 +2,24 @@ import {
   useInfiniteQuery,
   UseInfiniteQueryOptions,
   useMutation,
-  useQuery,
-  UseQueryOptions,
   UseMutationOptions,
 } from 'react-query';
 import { AxiosError } from 'axios';
 import { SuccessResponse } from '~/shared/types';
 import {
-  Contents,
   WritingContentsRequest,
   Writer,
   ContentsSearchParams,
+  MainContentsResponse,
 } from './services.model';
 import {
   getMainContents,
   getMainWriters,
   postWritingContents,
 } from './services.api';
 
-export function useMainContents(
-  { start, count, baseTime, keyword }: ContentsSearchParams,
+export function useInfinityContents(
+  contentsSearchParams: ContentsSearchParams,
   /**
    * @see https://github.com/tannerlinsley/react-query/discussions/1195
    * query variables가 필요할 때
@@ -32,57 +30,36 @@ export function useMainContents(
    * TError: Query 함수의 에러 반환값
    * TData: Query 함수의 최종 데이터
    */
-  options:
-    | UseQueryOptions<
-        SuccessResponse<Contents[]>,
-        AxiosError<unknown>,
-        SuccessResponse<Contents[]>
-      >
-    | undefined = {},
-) {
-  return useQuery<SuccessResponse<Contents[]>, AxiosError>(
-    ['/services/main_contents', { start, count, baseTime, keyword }],
-    () => getMainContents({ start, count, baseTime, keyword }),
-    {
-      retry: 2,
-      ...options,
-    },
-  );
-}
-
-export function useInfinityContents(
-  { start, count, baseTime, keyword }: ContentsSearchParams,
   options:
     | UseInfiniteQueryOptions<
-        SuccessResponse<Contents[]>,
+        SuccessResponse<MainContentsResponse>,
         AxiosError<unknown>,
-        SuccessResponse<Contents[]>
+        SuccessResponse<MainContentsResponse>
       >
     | undefined = {},
 ) {
-  return useInfiniteQuery<SuccessResponse<Contents[]>, AxiosError>(
-    ['/services/main_contents', { start, count, baseTime, keyword }],
-    () => getMainContents({ start, count, baseTime, keyword }),
+  return useInfiniteQuery<SuccessResponse<MainContentsResponse>, AxiosError>(
+    ['/services/main_contents', contentsSearchParams],
+    getMainContents,
     {
-      retry: 2,
       ...options,
     },
   );
 }
 
-export function useMainWriters(
-  { start, count, baseTime, keyword }: ContentsSearchParams,
+export function useInfinityWriters(
+  contentsSearchParams: ContentsSearchParams,
   options:
-    | UseQueryOptions<
+    | UseInfiniteQueryOptions<
         SuccessResponse<Writer[]>,
         AxiosError<unknown>,
         SuccessResponse<Writer[]>
       >
     | undefined = {},
 ) {
-  return useQuery<SuccessResponse<Writer[]>, AxiosError>(
-    ['/services/main_writers', { start, count, baseTime, keyword }],
-    () => getMainWriters({ start, count, baseTime, keyword }),
+  return useInfiniteQuery<SuccessResponse<Writer[]>, AxiosError>(
+    ['/services/main_writers', contentsSearchParams],
+    getMainWriters,
     {
       retry: 2,
       ...options,

diff --git a/data/services/services.model.ts b/data/services/services.model.ts
@@ -1,3 +1,5 @@
+import { QueryKey } from 'react-query';
+
 export interface Writer {
   writerName: string;
   writerId: string;
@@ -18,6 +20,8 @@ export interface Contents {
 
 export interface MainContentsResponse {
   mainContentsList: Contents[];
+  isLast: boolean;
+  start: number;
 }
 
 export interface ContentsSearchParams {
@@ -52,3 +56,8 @@ export interface WritingContentsRequest {
   isTranslate: boolean;
   originalId: number;
 }
+
+export interface InfiniteQueryParam {
+  pageParam?: number;
+  queryKey: QueryKey;
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,5 +1,5 @@
-import useSearch from '~/hooks/useSearch';
 import { useState } from 'react';
+import useSearch from '~/hooks/useSearch';
 import {
   ContentsSearchParams,
   MainContentsResponse,
@@ -42,7 +42,16 @@ const Main: NextPage = function () {
     keyword: '',
   });
 
-  const { data, isLoading } = useInfinityContents(searchParams);
+  const { data, isLoading, fetchNextPage } = useInfinityContents(searchParams, {
+    getNextPageParam: (lastPage) => {
+      const {
+        data: { isLast },
+      } = lastPage;
+
+      return !isLast ? DEFAULT_SEARCH_RANGE : undefined;
+    },
+  });
+
   const pages = (data?.pages[0] ??
     undefined) as unknown as SuccessResponse<MainContentsResponse>;
 
@@ -59,12 +68,6 @@ const Main: NextPage = function () {
   };
   const { onChange, onEnter, onSearch } = useSearch(doSearchTitle);
 
-  function fetchNextPage() {
-    setSearchParams((prev) => ({
-      ...prev,
-      start: prev.start + prev.count,
-    }));
-  }
   const createObserver = useIntersectionObserver(fetchNextPage);
 
   return (
@@ -100,7 +103,7 @@ export async function getServerSideProps() {
     };
     await queryClient.prefetchInfiniteQuery(
       ['/services/main_contents', queryParams],
-      () => getMainContents(queryParams),
+      getMainContents,
     );
     return {
       props: {