Update: migrate to react-query

Author: ZeroCho

react-query/front/pages/hashtag/[tag].tsx

@@ -1,65 +1,75 @@
 // hashtag/[tag].js
+import { GetStaticPropsContext } from 'next';
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useInView } from 'react-intersection-observer';
+import { dehydrate, QueryClient, useInfiniteQuery } from 'react-query';
 import { useRouter } from 'next/router';
-import { END } from 'redux-saga';
 
-import axios from 'axios';
-import { LOAD_HASHTAG_POSTS_REQUEST } from '../../reducers/post';
+import { loadHashtagPostsAPI } from '../../apis/post';
+import Post from '../../interfaces/post';
 import PostCard from '../../components/PostCard';
-import wrapper from '../../store/configureStore';
-import { LOAD_MY_INFO_REQUEST } from '../../reducers/user';
 import AppLayout from '../../components/AppLayout';
 
 const Hashtag = () => {
-  const dispatch = useDispatch();
+  const [ref, inView] = useInView();
   const router = useRouter();
   const { tag } = router.query;
-  const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post);
+
+  const {
+    data,
+    isLoading: loadPostsLoading,
+    fetchNextPage,
+  } = useInfiniteQuery<Post[]>(
+    ['hashtag', tag],
+    ({ pageParam = '' }) => loadHashtagPostsAPI(tag as string, pageParam),
+    {
+      getNextPageParam: (lastPage) => {
+        return lastPage?.[lastPage.length - 1]?.id;
+      },
+    },
+  );
+
+  const mainPosts = data?.pages.flat();
+  const isEmpty = data?.pages[0]?.length === 0;
+  const isReachingEnd = isEmpty || (data && data.pages[data.pages.length - 1]?.length < 10);
+  const hasMorePosts = !isEmpty && !isReachingEnd;
+  const readToLoad = hasMorePosts && !loadPostsLoading;
 
   useEffect(() => {
-    const onScroll = () => {
-      if (window.pageYOffset + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
-        if (hasMorePosts && !loadPostsLoading) {
-          dispatch({
-            type: LOAD_HASHTAG_POSTS_REQUEST,
-            lastId: mainPosts[mainPosts.length - 1] && mainPosts[mainPosts.length - 1].id,
-            data: tag,
-          });
-        }
-      }
-    };
-    window.addEventListener('scroll', onScroll);
-    return () => {
-      window.removeEventListener('scroll', onScroll);
-    };
-  }, [mainPosts.length, hasMorePosts, tag, loadPostsLoading]);
+    console.log('inView!!!', inView);
+    if (inView && readToLoad) {
+      fetchNextPage();
+    }
+  }, [inView, readToLoad, fetchNextPage]);
 
   return (
     <AppLayout>
-      {mainPosts.map((c) => (
+      {mainPosts?.map((c) => (
         <PostCard key={c.id} post={c} />
       ))}
+      <div ref={readToLoad ? ref : undefined} style={{ height: 50, backgroundColor: 'yellow' }} />
     </AppLayout>
   );
 };
 
-export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
-  const cookie = context.req ? context.req.headers.cookie : '';
-  console.log(context);
-  axios.defaults.headers.Cookie = '';
-  if (context.req && cookie) {
-    axios.defaults.headers.Cookie = cookie;
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  const queryClient = new QueryClient();
+  const tag = context.params?.tag as string;
+  if (!tag) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: true,
+      },
+    };
   }
-  context.store.dispatch({
-    type: LOAD_MY_INFO_REQUEST,
-  });
-  context.store.dispatch({
-    type: LOAD_HASHTAG_POSTS_REQUEST,
-    data: context.params.tag,
-  });
-  context.store.dispatch(END);
-  await context.store.sagaTask.toPromise();
-});
+  await queryClient.prefetchInfiniteQuery(['hashtag', tag], () => loadHashtagPostsAPI(tag));
+
+  return {
+    props: {
+      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
+    },
+  };
+};
 
 export default Hashtag;

react-query/front/pages/post/[id].tsx

@@ -1,25 +1,23 @@
 // post/[id].js
+import { GetStaticPropsContext } from 'next';
 import React from 'react';
 import { useRouter } from 'next/router';
-import { END } from 'redux-saga';
-import axios from 'axios';
-import { useSelector } from 'react-redux';
+import { dehydrate, QueryClient, useQuery } from 'react-query';
 import Head from 'next/head';
 
-import wrapper from '../../store/configureStore';
-import { LOAD_MY_INFO_REQUEST } from '../../reducers/user';
-import { LOAD_POST_REQUEST } from '../../reducers/post';
+import { loadPostAPI } from '../../apis/post';
+import Post from '../../interfaces/post';
 import AppLayout from '../../components/AppLayout';
 import PostCard from '../../components/PostCard';
 
-const Post = () => {
+const SinglePost = () => {
   const router = useRouter();
   const { id } = router.query;
-  const { singlePost } = useSelector((state) => state.post);
+  const { data: singlePost } = useQuery<Post>(['post', id], () => loadPostAPI(Number(id)));
 
-  // if (router.isFallback) {
-  //   return <div>로딩중...</div>;
-  // }
+  if (!singlePost) {
+    return <div>존재하지 않는 게시물입니다.</div>;
+  }
 
   return (
     <AppLayout>
@@ -31,7 +29,10 @@ const Post = () => {
         <meta name="description" content={singlePost.content} />
         <meta property="og:title" content={`${singlePost.User.nickname}님의 게시글`} />
         <meta property="og:description" content={singlePost.content} />
-        <meta property="og:image" content={singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico'} />
+        <meta
+          property="og:image"
+          content={singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico'}
+        />
         <meta property="og:url" content={`https://nodebird.com/post/${id}`} />
       </Head>
       <PostCard post={singlePost} />
@@ -50,22 +51,24 @@ const Post = () => {
 //   };
 // }
 
-export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
-  const cookie = context.req ? context.req.headers.cookie : '';
-  console.log(context);
-  axios.defaults.headers.Cookie = '';
-  if (context.req && cookie) {
-    axios.defaults.headers.Cookie = cookie;
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  const queryClient = new QueryClient();
+  const id = context.params?.id as string;
+  if (!id) {
+    return {
+      redirect: {
+        destination: '/',
+        permanent: true,
+      },
+    };
   }
-  context.store.dispatch({
-    type: LOAD_MY_INFO_REQUEST,
-  });
-  context.store.dispatch({
-    type: LOAD_POST_REQUEST,
-    data: context.params.id,
-  });
-  context.store.dispatch(END);
-  await context.store.sagaTask.toPromise();
-});
+  await queryClient.prefetchQuery(['post', id], () => loadPostAPI(Number(id)));
+
+  return {
+    props: {
+      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
+    },
+  };
+};
 
-export default Post;
+export default SinglePost;