안녕하세요.

해결 했습니다. 감사합니다. 좋은하루 보내세요.

안녕하세요. 질문 있습니다!

제가 react-query(@tanstack/react-query)를 사용하며 useQuery를 병렬처리 하려고 합니다. 그 과정에서 useQuery가 한번에 다 실행되지 않고 부분적으로 실행 되는데 혹시 이유가 뭔지 해결하려면 어떤식으로 검색해 나가면 될지 궁금합니다.

현재 문제 상황은 아래와 같이 useQuery를 병렬로 사용 했을 때, 여러개가 한번에 처리되는 것이 아닌 부분적으로 처리되는 상황입니다.

코드는 아래와 같습니다.

page

import React from 'react';
import { dehydrate, QueryClient, useInfiniteQuery, useQueries, useQuery } from '@tanstack/react-query';
import DefaultLayout from '@layouts/DefaultLayout';
// import InfiniteCarousel from '@components/Commons/InfiniteCarousel';
import { loadStoreAPI, loadSettingsAPI, loadBannersAPI, loadCategoriesAPI } from '@apis/store';
import { GetStaticProps } from 'next';
import { ParsedUrlQuery } from 'querystring';
import { useRouter } from 'next/router';

interface Params extends ParsedUrlQuery {
  storeId: string;
}

const Home: React.FC = () => {
  const router = useRouter();
  const { storeId } = router.query as Params;
  const { data: storeInfo } = useQuery(['storeInfo', storeId], () => loadStoreAPI(storeId), {
    enabled: !!storeId,
    // staleTime: 5 * 1000,
  });
  const { data: settings } = useQuery(['settings', storeId], () => loadSettingsAPI(storeId), {
    enabled: !!storeId,
    // staleTime: 5 * 1000,
  });
  const { data: banners } = useQuery(['banners', storeId], () => loadBannersAPI(storeId), {
    enabled: !!storeId,
    // staleTime: 5 * 1000,
  });
  const { data: categories } = useQuery(['categories', storeId], () => loadCategoriesAPI(storeId), {
    enabled: !!storeId,
    // staleTime: 5 * 1000,
  });
  // const result = useQueries({
  //   queries: [
  //     {
  //       queryKey: ['storeInfo', storeId],
  //       queryFn: () => loadStoreAPI(storeId),
  //       enabled: !!storeId,
  //     },
  //     {
  //       queryKey: ['settings', storeId],
  //       queryFn: () => loadSettingsAPI(storeId),
  //       enabled: !!storeId,
  //     },
  //   ],
  // });

  return (
    <DefaultLayout>
      <h1>home123</h1>
      {/*<InfiniteCarousel></InfiniteCarousel>*/}
    </DefaultLayout>
  );
};

export const getStaticPaths = async () => {
  return {
    paths: ['/app/store/[storeId]'],
    fallback: true,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { storeId } = params as Params;

  if (!storeId) {
    return {
      redirect: {
        destination: '/',
        permanent: true,
      },
    };
  }

  const queryClient = new QueryClient();

  await queryClient.prefetchQuery(['storeInfo', storeId], () => loadStoreAPI(storeId));
  await queryClient.prefetchQuery(['settings', storeId], () => loadSettingsAPI(storeId));
  await queryClient.prefetchQuery(['banners', storeId], () => loadBannersAPI(storeId));
  await queryClient.prefetchQuery(['categories', storeId], () => loadCategoriesAPI(storeId));

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
};

export default Home;

apis

import axios from 'axios';
import { backUrl } from '../config/config';

axios.defaults.baseURL = backUrl;
axios.defaults.withCredentials = true;

const [GET, POST] = ['GET', 'POST'];

export function loadStoreAPI(data: string) {
  const options = {
    method: GET,
    url: `/store/${data}`,
  };

  return axios(options).then((response) => response.data);
}

export function loadSettingsAPI(data: string) {
  const options = {
    method: GET,
    url: `/store/${data}/settings`,
  };
  return axios(options).then((response) => response.data);
}

export function loadBannersAPI(data: string) {
  const options = {
    method: GET,
    url: `/store/${data}/banners`,
  };
  return axios(options).then((response) => response.data);
}

export function loadCategoriesAPI(data: string) {
  const options = {
    method: GET,
    url: `/store/${data}/categories`,
  };
  return axios(options).then((response) => response.data);
}

export function loadMenusAPI({ storeId, categoryId }) {
  const options = {
    method: GET,
    url: `/store/${storeId}/category/${categoryId}/menus`,
  };
  return axios(options).then((response) => response.data);
}

react query 데브툴에서는 fetching에서 stale로 한번에 가지 않고 약 1초 간격으로 하나씩 옮겨지는 상황입니다.

처음에는 staleTime을 주어 해결한듯 보였으나 다른 윈도우나 탭으로 포커스를 이동 후 다시 개발중인 웹앱으로 포커스를 이동하면 같은 문제가 발생하는걸 확인했습니다.

혹시 몰라 useQueries를 사용해보았는데 같은 상황이 반복됐습니다.

getStaticPaths에 있는 코드들은 정상 작동하는 상황이라 한번에 요청을 하여 생기는 문제가 맞을까요?

검색해도 이유나 해결 방법을 찾지 못해 도움 청합니다. 감사합니다.