[사람별_Day8] Tanstack Query 초기 로딩 처리 - initialData

이전 상황 : Tanstack Query 적용 중 undefined 방지

useEffect로 처리했던 이전 로직을 tanstack으로 관리하기 위해 커스텀 훅으로 뺐다.

아래 로직은 formatted 로직을 제외한, supabase에서 데이터를 받아오는 부분만 커스텀으로 뺐을 때의 로직이다.

'use client';
import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
import { format, parse, startOfWeek, getDay } from 'date-fns';
import { enUS } from 'date-fns/locale/en-US';
import { ko } from 'date-fns/locale/ko';
import { useState } from 'react';
import { CalendarEventType, PlansType } from '@/types/plans';
import { useGetCalendarPlans } from '@/hooks/useGetCalendarPlans';

// 로케일(지역화) 설정
const locales = {
  'en-US': enUS, //미국-영어 : 미국식 날짜
  'ko-KR': ko, //한국-한글 : 한국식 날짜
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});

const MainCalendar = () => {
  const [events, setEvents] = useState<CalendarEventType[]>([]);

  const { data: plans, isPending, isError, error } = useGetCalendarPlans();

  const fetchEvents = async () => {
    const formatted = plans.map(
      (plan: PlansType): CalendarEventType => ({
        id: plan.plan_id,
        title: plan.title,
        start: new Date(plan.start_date),
        end: new Date(plan.end_date),
      })
    );
    setEvents(formatted);
  };

  if (isPending) {
    return <div>로딩 중입니다...</div>;
  }

  if (isError) {
    return <div>캘린더 에러 발생 : {error.message}</div>;
  }

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={events} // 여기에 이벤트 추가 가능
        startAccessor='start'
        endAccessor='end'
        style={{ height: 500 }}
      />
    </div>
  );
};

export default MainCalendar;

 

이때, plans의 값이 undefined가 될 수도 있다는 eslint의 감시가 있었다..!

이를 처리하기 위해서 useQuery에 타입을 명시함과 함께 initialData을 추가하여 초기값을 빈 배열로 주었다.

이렇게 하면 훅에서 data는 항상 PlansType[]이고, undefined가 되지 않는다.

useQuery<PlansType[]>({
  queryKey: ['calendarPlans'],
  queryFn: fetchPlans,
  initialData: [], // ✅ plans는 항상 [] 이상의 배열이 됨
});

 

 

 

문제 상황 : 캘린더에 일정이 나타나지 않음

하지만 문제가 발생했다.

캘린더에 일정이 나타나지 않는 다는 것이다.

 

어디서부터 문제가 있는 것인지 콘솔을 모두 찍어보았다.

supabase에서 데이터를 가져오는 로직, useQuery에서 적용하는 부분, 캘린더 컴포넌트

콘솔 찍은 부분들

// plans 데이터 가져오기 - calendar 사용
export const getPlans = async (): Promise<PlansType[]> => {
  const { data: plans, error } = await supabase
    .from('plans')
    .select('plan_id, user_id, contacts_id, title, detail, priority, start_date, end_date');
  console.log('getPlans: plans', plans); ⭐️
  if (error) {
    throw new Error(error.message);
  }
  return plans;
};

export const useGetCalendarPlans = () => {
  return useQuery<CalendarEventType[]>({
    queryKey: [QUERY_KEY.CALENDAR_PLANS],
    queryFn: async () => {
      const plans: PlansType[] = await getPlans(); // supabase에서 plans 데이터 가져오기
      console.log('useQuery: plans', plans); ⭐️

      // 캘린더에 적용되도록 데이터 가공하기
      const events: CalendarEventType[] = plans.map((plan) => ({
        id: plan.plan_id,
        title: plan.title,
        start: new Date(plan.start_date),
        end: new Date(plan.end_date),
      }));
      console.log('useQuery: events', events); ⭐️
      return events;
    },
    initialData: [], // undefined 아님 명시
    staleTime: 60 * 1000, // 1분
  });
};

const MainCalendar = () => {
  const { data: events, isPending, isError, error } = useGetCalendarPlans();
  console.log('MainCalendar: events', events); ⭐️

하지만 빈 배열로 찍히면서 캘린더에도 일정이 나타나지 않았다.

 

여러 원인을 찾으면서 시간이 좀 지나자, 갑자기 일정과 콘솔이 다시 나타났다.

뭘까.. 뭘까...

뭔가 내가 설정한 1분의 staleTime과 관련이 있을 것 같았다.

 

 

오류 원인 및 initialData 용도

처음 새로고침 시 콘솔이 찍히는 모습은 아래와 같이 빈 값(undefined)이 들어왔다가 값이 들어온다.

원인은 바로 이것이었다.

initialData 를 빈 배열로 설정해두었으니, 처음 빈 배열인 값을 캐싱해두는 것이다.

그 후 staleTime(1분)이 지나면 새롭게 값을 페칭하기 때문에 데이터가 들어오는 것이다.

 

즉, initialData의 용도는 새로운 값을 받아오기 전에 빠르게 값을 보여주기 위한 것이다.

서버 사이드 렌더링 데이터 있거나, 부모 컴포넌트에서 데이터 내려주는 등 진짜 초기값을 위해 쓰이게 되는 것이다.