How to keep fetched data when paginate and press backbutton

[cha2hyun]

Hello.

Issue

1. fetch
2. click component and go [id].tsx
3. press backbutton
4. the fetched data has been removed and it starts fetching with offset = 0

Try

1. use local storage to keep scrollY position.
2. but fetched data has been removed when i press back button, so it goes end of the screen because scrollY position is not rendered.

Any Help? 🙏

Full Code

import Image from 'next/image';
import Link from 'next/link';
import React, { Dispatch, SetStateAction } from 'react';
import { useInfiniteQuery } from 'react-query';
import useLocalStorage from 'use-local-storage';

import useIntersectionObserver from '@/hooks/useIntersectionObserver';

import { getCueList } from '@/pages/api/index';
import { Part, Results } from '@/partials/findcue/cueType';
import TimeFormat from '@/utils/TimeFormat';

import Premeium from '~/svg/Premeium.svg';
const InfiniteCueList = ({
  isPremeium,
  isSet,
  isShaft,
  isButt,
  isRefreshing,
  setIsRefreshing,
}: {
  isPremeium: boolean;
  isSet: boolean;
  isShaft: boolean;
  isButt: boolean;
  isRefreshing: boolean;
  setIsRefreshing: Dispatch<SetStateAction<boolean>>;
}) => {
  const { data, hasNextPage, fetchNextPage, refetch, isFetching } =
    useInfiniteQuery(
      'cuelist',
      ({ pageParam = '' }) =>
        getCueList(pageParam, isPremeium, isSet, isShaft, isButt),
      {
        getNextPageParam: (lastPage) => {
          if (lastPage.next === null) {
            return undefined;
          }
          const url = new URL(lastPage.next);
          const lastOffset = url.searchParams.get('offset');
          if (lastOffset) {
            return parseInt(lastOffset);
          } else {
            return undefined;
          }
        },
        staleTime: 30000,
        keepPreviousData: true,
        refetchOnMount: false,
        refetchOnWindowFocus: false,
      }
    );
  const [scrollY, setScrollY] = useLocalStorage('cueListScroll', 0);

  React.useEffect(() => {
    if (scrollY !== '0') {
      window.scrollTo(0, Number(scrollY));
      setScrollY(0);
    }
  }, []);

  React.useEffect(() => {
    if (isRefreshing) {
      refetch();
    }
    setIsRefreshing(false);
  }, [isRefreshing, refetch, setIsRefreshing]);

  const loadMoreButtonRef = React.useRef(null);

  useIntersectionObserver({
    root: null,
    target: loadMoreButtonRef,
    onIntersect: fetchNextPage,
    enabled: hasNextPage,
  });

  const get_type = (type: number) => {
    if (type === 0) {
      return '하대';
    } else if (type === 1) {
      return '상대';
    } else {
      return '';
    }
  };
  return (
    <>
      <ul>
        {isFetching && (
          <div className='h6 md:h4 flex justify-center border-b-[1px] py-6 md:py-10'>
            💚 로딩중 ... 💚
          </div>
        )}

        {data?.pages.map((page) =>
          page.results.map((cue: Results) => (
            <li key={cue.id} data-aos='fade-up'>
              <Link
                href={{
                  pathname: `findcue/${cue.id}`,
                  query: { results: JSON.stringify(cue) },
                }}
                // as={`findcue/${cue.id}`}
                // passHref
              >
                <a
                  href={`findcue/${cue.id}`}
                  onClick={() => setScrollY(window.scrollY)}
                >
                  <div className='h6 md:h4 delay-10 flex-col border-b-[1px] py-5 md:py-12 md:transition md:ease-in-out md:hover:scale-105'>
                    <div className='flex'>
                      {/* 이미지 */}
                      <div className='w-1/3 md:w-1/4'>
                        <div className='rounded-lg border-[1px] drop-shadow-sm md:rounded-2xl md:drop-shadow-lg '>
                          <Image
                            className='absolute flex-none rounded-lg md:rounded-2xl'
                            alt={cue.images[0].id}
                            src={cue.images[0].image}
                            layout='responsive'
                            width='100%'
                            height='100%'
                            placeholder='blur'
                            blurDataURL='data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=='
                          ></Image>
                        </div>

                        {(cue.state === 'end' ||
                          cue.state === 'delivery' ||
                          cue.state === 'purchased' ||
                          cue.state === 'report' ||
                          cue.state === 'timeout' ||
                          cue.state === 'returning') && (
                          <div className='h6 md:h4 mt-1 w-full rounded-lg bg-black/50 py-1 text-center text-white md:mt-3 md:rounded-2xl'>
                            판매완료
                          </div>
                        )}
                      </div>
                      {cue.isPremium && (
                        <div className='absolute flex-none pl-1 pt-1 md:pt-3 md:pl-3'>
                          <Premeium className='text-[25px] md:text-[50px]' />
                        </div>
                      )}
                      <div className='md:3/4 w-2/3 flex-row  pl-3 md:pl-12'>
                        {/* 파트정보 */}
                        <div className='flex-col'>
                          {cue.parts
                            .sort(function sort_by_type(curr, next) {
                              return curr.type - next.type;
                            })
                            .map((part: Part) => (
                              <div key={part.id}>
                                <div className='pb-2 md:pb-4'>
                                  <div className='text-green-700 md:pb-1'>
                                    [{get_type(part.type)}]
                                  </div>
                                  <div className='h5 md:h3 md:pb-1'>
                                    {part.adminData.brand}{' '}
                                    {part.adminData.goods_name}
                                  </div>
                                  <div className='text-gray-600 md:pb-1'>
                                    {part.adminData.joint_type.toUpperCase()}
                                    조인트 · {part.adminData.weight}g
                                  </div>
                                </div>
                              </div>
                            ))}
                        </div>

                        {/* 가격 */}
                        <div className='h4 md:h2 flex flex-row md:pt-3'>
                          <div
                            className={
                              cue.state === 'end' ||
                              cue.state === 'delivery' ||
                              cue.state === 'purchased' ||
                              cue.state === 'report' ||
                              cue.state === 'timeout' ||
                              cue.state === 'returning'
                                ? 'text-gray-600'
                                : 'text-green-700'
                            }
                          >
                            {cue.price.toLocaleString()}
                            <span className='h6 md:h3 pl-1 md:pl-2'>원</span>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* 조회, 생성일 */}
                    <div className='h6 md:h5 fle-row-reverse flex-1 pt-2 text-right text-gray-600 md:pt-4'>
                      조회 {cue.view_cnt.toLocaleString()}회 ·{' '}
                      {TimeFormat(cue.created_at)}
                    </div>
                  </div>
                </a>
              </Link>
            </li>
          ))
        )}
      </ul>
      <div className='h5 md:h4 flex justify-center py-12 md:py-20'>
        {hasNextPage ? (
          <button onClick={() => fetchNextPage()} className='text-center'>
            💚 로딩중 ... 💚
          </button>
        ) : (
          <div className='text-center'>등록된 모든 큐를 로딩했습니다</div>
        )}
      </div>
      <div ref={loadMoreButtonRef} />
    </>
  );
};

export default InfiniteCueList;

[TkDodo]

the fetched data has been removed and it starts fetching with offset = 0

react-query doesn't remove any data from the cache. please show a codesandbox reproduction.

[cha2hyun]

Thanks for the answer 👍

self answer

It was my mistake with using <Hydrate state={pageProps.dehydratedState}> in _app.tsx

The problem was it refetch from api everytimes and rerender it when i press back button or navigate from other pages

So the scroll_y position from LocalStorage i saved doesnt works well because scroll_Y position will always be less then item lists height of first fetch

_app.tsx before (refresh every time)

const MyApp: NextComponentType<AppContext, AppInitialProps, AppProps> = ({
  Component,
  pageProps,
}) => {
  const queryClientRef = React.useRef<QueryClient>();
  if (!queryClientRef.current) {
    queryClientRef.current = new QueryClient();
  }
  useEffect(() => {
    AOS.init({
      once: true,
      duration: 500,
      easing: 'ease-out-cubic',
    });
  });

  return (
    <>
      <QueryClientProvider client={queryClientRef.current}>
        <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
        </Hydrate>
        {/* <ReactQueryDevtools /> */}
      </QueryClientProvider>
    </>
  );
};
MyApp.getInitialProps = async ({
  Component,
  ctx,
}: AppContext): Promise<AppInitialProps> => {
  let pageProps = {};

  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }

  return { pageProps };
};
export default MyApp;

_app.tsx after (keep data in cache)

const MyApp = ({
  Component,
  pageProps: { session, ...pageProps },
}: {
  Component: any;
  pageProps: any;
}) => {
  const [queryClient] = React.useState(() => new QueryClient());

  useEffect(() => {
    AOS.init({
      once: true,
      duration: 500,
      easing: 'ease-out-cubic',
    });
  });

  return (
    <SessionProvider session={session}>
      <Head>
        <meta
          name='viewport'
          content='width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover'
        />
      </Head>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
        {/* import { ReactQueryDevtools } from 'react-query/devtools';
        <ReactQueryDevtools initialIsOpen={false} /> */}
      </QueryClientProvider>
    </SessionProvider>
  );
};