React Query initial Data와 SSR 문제점

위를 참고해서 만들었습니다만 너무나도 복잡한 로직을 통해야만 초기값을 설정해 줄 수 있었습니다. 또한 당시에는 공식 문서조차 정상적으로 동작하지 않는 코드가 올려져있었습니다.

// hydrateOnClient.ts
'use client';

import { Hydrate as HydrateOnClient } from '@tanstack/react-query';

export default HydrateOnClient;
JavaScript
복사

// getQueryClient.ts
import { QueryClient } from '@tanstack/query-core';
import { cache } from 'react';

const getQueryClient = cache(() => new QueryClient());
export default getQueryClient;
JavaScript
복사

// hydratedQuery.ts
import { dehydrate } from '@tanstack/query-core';
import HydrateOnClient from './hydrateOnClient';
import getQueryClient from './getQueryClient';
import { getTag } from '../../../queries/tag/tempAPI';
import { ReactNode } from 'react';
import TagList from '@component/recruit/alignment/recruitSetting/TagList';

interface IHydratedPosts {
  children: ReactNode | ReactNode[];
  api: (data: any) => Promise<any>;
  queryKey: string[];
}

export default async function HydratedPosts(props: IHydratedPosts) {
  const { children, api, queryKey } = props;
  const queryClient = getQueryClient();
  await queryClient.prefetchQuery(queryKey, api);
  const dehydratedState = dehydrate(queryClient);

  return <HydrateOnClient state={dehydratedState}>{children}</HydrateOnClient>;
}
JavaScript
복사

// index.ts
import Paragraph from 'ui/common/paragraph/Paragraph';
import classNames from 'classnames/bind';
import style from './RecruitSetting.module.scss';
import HydratedQuery from '../../../common/reactQuery/hydratedQuery';
import TagList from '@component/recruit/alignment/recruitSetting/TagList';
import { getTag } from '../../../../queries/tag/tempAPI';
import { TagQueryKey } from '../../../../queries/tag';
import { queryKey } from '../../../../queries/key';

const cx = classNames.bind(style);

const RecruitSetting = () => {
  // const settingData = await getPositionSetting();

  return (
    <>
      <Paragraph variant={'B1'} bold>
        공고 설정
      </Paragraph>
      <div className={cx('tag')}>
        {/* @ts-expect-error Server Component */}
        <HydratedQuery api={getTag} queryKey={queryKey.tag.get()}>
          <TagList />
        </HydratedQuery>
      </div>
      <div className={cx('search-filter')}>
        {/*<SearchFilter initialData={settingData} />*/}
        {/*<RecruitOrder initialData={settingData} />*/}
      </div>
    </>
  );
};

export default RecruitSetting;
JavaScript
복사