인프런 커뮤니티 질문&답변

넵 섹션 4 답글과 재게시글 꾸미기 강의쯤 듣고 있었습니다. 실서버 사용중이구요

getUserPosts.ts 코드입니다

import { Post } from "@/model/Post";
import { QueryFunction } from "@tanstack/react-query";

export const getUserPosts: QueryFunction<Post[], [_1: string, _2: string, string]>
= async ({ queryKey }) => {
    const [_1, _2, username] = queryKey;
    const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/${username}/posts`, {
        next: {
            tags: ['posts', 'users', username],
        },
        credentials: 'include',
        cache: 'no-store'
    });

    console.log("Res",res)
    if (!res.ok) {
        // This will activate the closest `error.js` Error Boundary
        throw new Error('Failed to fetch data')
      }

    return res.json();
}

[username]/_component/UserPost 컴포넌트 코드입니다

'use client';

import { useQuery, useQueryClient } from '@tanstack/react-query';
import { getUserPosts } from '../_lib/getUserPosts';
import Post from '@/app/(afterLogin)/_component/Post';
import { Post as IPost } from '@/model/Post';

export default function UserPosts({ username }: { username: string }) {
    const { data } = useQuery<IPost[], Object, IPost[], [_1: string, _2: string, _3: string]>({
        queryKey: ['posts', 'users', username],
        queryFn: getUserPosts,
        staleTime: 60 * 1000,
        gcTime: 300 * 1000,
    });

    const queryClient = useQueryClient();
    const user = queryClient.getQueryData(['users', username]);

    if (user) {
        return data?.map((post) => <Post key={post.postId} post={post} />);
    }

    return null;
}

이 이미지의 headers 부분도 보여주세요.

넵 첨부해드리겠습니다!!

주소 뒤에 ?cursor=0 붙이셔야 합니다!(페이지네이션용)

아 알겠습니다!! 무한 스크롤과는 별개로 일단 붙여야한다는 말씀이실까요?!!!

네 맞습니다. cursor 쿼리스트링이 필수라서요

넵 200 코드와 함께 데이터 잘들어오는거 확인했습니다...!!

일단 데이터가 10개만 들어오니 무한 스크롤 구현은 숙제로 내주신거라고 생각하고 진행해보겠습니다

빠른 대응 감사합니다