React Query를 사용할 때, Next.js의 SSR에 인증 사용하기

// 코드 출처 : TanStack Query 공식 문서 (https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration)

// _app.tsx
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

export default function MyApp({ Component, pageProps }) {
  const [queryClient] = React.useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  )
}

// 코드 출처 : TanStack Query 공식 문서 (https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydration)

// pages/posts.jsx
import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'

export async function getStaticProps() {
  const queryClient = new QueryClient()

  // 쿼리클라이언트에 가져온 데이터를 캐싱한다.
  await queryClient.prefetchQuery(['posts'], getPosts)

  return {
    props: {
      // `QueryClient`에 있는 데이터를 사용자가 사용할 수 있는 형태로 변환하여 클라이언트에 전달
      dehydratedState: dehydrate(queryClient),
    },
  }
}

// pages/posts.jsx
// 윗 부분 생략

function Posts() {
  // 해당 query가 실행될 때 hydrate 과정을 통하여 위에서 전달된 dehydrateState를 queryClient 상태로 한다.
  const { data } = useQuery({ queryKey: ['posts'], queryFn: getPosts })

  // ...
}

interface MeetKeysType {
  all: readonly string[]
  detail: (meetId: number, accessToken: string) => readonly string[]
  candidate: readonly string[]
}

export const meetKeys: MeetKeysType = {
  all: ['meet'] as const,
  detail: (meetId, accessToken) =>
    [...meetKeys.all, 'detail', meetId.toString(), accessToken] as const,
  candidate: ['meet-candidate'] as const,
}

import { AxiosResponse } from 'axios'
import { MeetDetailResponse } from '@types'
import { meetKeys } from '@queries'
import { getAccessToken } from '@utils'

// 데이터 가져오기 함수 (토큰이 없는 경우의 예외 처리는 eventAPI에 구현되어 있음)
export const fetchMeetDetail = async (eventId: number, token?: string) => {
  const { data }: AxiosResponse<MeetDetailResponse> = await eventAPI.getDetail(
    eventId,
    token
  )
  return data
}

// 데이터를 가져오는 커스텀 훅
const useMeetDetail = (eventId: number, token?: string) => {
  const csrToken = getAccessToken()

  return useQuery(
    meetKeys.detail(eventId, token ? token : csrToken ? csrToken : ''),
    () => getMeetDetail(eventId, token),
    {
      enabled: !!eventId,
    }
  )
}

export default useMeetDetail

import { GetServerSideProps, GetServerSidePropsContext } from 'next'
import { useMeetDetail, getMeetDetail, meetKeys } from '@queries'
import { dehydrate, QueryClient } from '@tanstack/react-query'
import { ACCESS_TOKEN_KEY } from '@constants'

interface MeetDetailPageProps {
	meetId: number
	token: string
}

// 서버 사이드 데이터 패칭 함수
export const getServerSideProps: GetServerSideProps = async ({
	params,
	req,
	res,
}: GetServerSidePropsContext) => {
	// query key로 사용하기 위한 부분 1 : 토큰
	// 현재 토큰은 http 트랜젝션에 첨부되어있으므로 요청헤더에 쿠키로 저장되어있는 토큰을 가져온다.
	const accessToken = req.cookies[ACCESS_TOKEN_KEY] ? req.cookies[ACCESS_TOKEN_KEY]
													  : ''
	// query key로 사용하기 위한 부분 2. 게시글 id
	const meetId = parseInt(params?.meetId as string)

	const queryClient = new QueryClient()

	// prefetchQuery를 이용하여 QueryClient에 미리 가지고 온 값을 캐싱한다.
	try {
		await queryClient.prefetchQuery(meetKeys.detail(meetId, accessToken), ()
			getMeetDetail(meetId, accessToken),
		)
	} catch (e) { // 에러가 발생할 경우, 토큰을 정보를 지워준다.
		res.setHeader('Set-Cookie', [`ACCESS_TOKEN=deleted; Max-Age=0`])
	}

	return {
		props: {
		meetId,
		dehydratedState: dehydrate(queryClient),
		token: accessToken,
		},
	}
}

const MeetDetailPage = ({ meetId, token }: MeetDetailPageProps) => {
const { data } = useMeetDetail(meetId, token)
const detailData = data?.data

// ...
}


export default MeetDetailPage