[Next.js] react-query SSR에 쿠키 담아 보내기

react-query의 prefetchQuery를 사용해 SSR을 적용하려는데 사용자 쿠키를 보내는 과정에서 마주한 문제

react-query의 query function을 다음과 같이 사용하고 있었다.

import { QueryFunction } from "@tanstack/query-core";
import { User } from "@/model/User";

const getUserInfo: QueryFunction<User, [_1: string, _2: string]> = async ({ queryKey }) => {
  const [_1, username] = queryKey;
  const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${username}`, {
    credentials: "include",
  });

  if (response.ok) return response.json();
};

export default getUserInfo;

위 코드는
useQuery를 사용할 때는 알맞은 response를 받는다.

하지만,
prefetchQuery를 사용해 SSR을 적용할 때
쿠키를 credentials : "include"로 넣어줄경우
SSR의 상황에서는 쿠키를 담지 못한다.

Next의 cookie 함수는 다음과 같을 때 사용한다.

• 서버 컴포넌트에서 들어오는 요청의 쿠키를 읽을 때
• 서버 액션이나 라우트 핸들러에서 보내는 요청에 쿠키를 함께 담아 보낼 때

다음과 같이 쿠키를 담아 보내면 SSR 적용에도 쿠키를 담아보낼 수 있다.

import { QueryFunction } from "@tanstack/query-core";
import { User } from "@/model/User";
import { cookies } from "next/headers";

const getUserInfoServer: QueryFunction<User, [_1: string, _2: string]> = async ({ queryKey }) => {
  const [_1, username] = queryKey;
  const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${username}`, {
    headers: {
      Cookie: cookies().toString(),
    },
  });

  if (response.ok) return response.json();
};

export default getUserInfoServer;