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

게시물 추천 탭에서는 게시하기 버튼 클릭하면 게시물 업로드가 잘 작동됩니다. 그러나 팔로우 중 탭에서 게시하기 버튼을 클릭하면 에러가 발생합니다.

게시물 게시하기 코드는 아래와 같습니다.

 const mutation = useMutation({
    mutationFn: async (e: React.FormEvent) =>{
      e.preventDefault();
      const formData = new FormData();
      formData.append("content", content);
      imgPreview.forEach((img) => {
        img && formData.append("images", img.file);
      });

      return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, {
        method: "post",
        credentials: "include",
        body: formData,
      });
    },
    onSuccess: async (response) => {
      const newPost = await response.json();
      setContent("");
      setImgPreview([]);
      if (queryClient.getQueryData(["posts", "recommends"])) {
        queryClient.setQueryData(
          ["posts", "recommends"],
          (prev: { pages: Post[][] }) => {
            const shallow = { ...prev, pages: [...prev.pages] };
            shallow.pages[0] = [...shallow.pages[0]];
            shallow.pages[0].unshift(newPost);
            return shallow;
          }
        );
      }

      if(queryClient.getQueryData(["posts", "followings"])) {
        console.log("get", queryClient.getQueryData(["posts", "followings"]));
        queryClient.setQueryData(
          ["posts", "followings"],
          (prev: { pages: Post[][] }) => {
            const shallow = { ...prev, pages: [...prev.pages] };
            shallow.pages[0] = [...shallow.pages[0]];
            shallow.pages[0].unshift(newPost);
            return shallow;
          }
        );
      }
    },
    onError: (error) => {
      console.error(error);
      alert("업로드 중 에러가 발생했습니다");
    },
  });

최근 새소식을 보고 useSuspenseQuery 가 문제가 있다는 것을 보고 Suspense 없애고 기존에 사용한 TabDecider 컴포넌트로 변경했습니다.

// src\app\(afterLogin)\home\page.tsx

export default async function Home() {
  const session = await auth();
  return (
    <main className={styles.main}>
      <TabContextProvider>
        <Tab />
        <PostForm me={session} />
        <TabDecider />
      </TabContextProvider>
    </main>
  );
}

네트워크 탭에서 posts 요청은 성공했다고 나와있습니다.

새로고침하면 업로드가 제대로 되지만 게시하기 버튼 클릭하면 onError에서 발생하는 '업로드 중 에러 발생' 알림창이

나옵니다.

react-query devtools에서 mutation 에러를 확인하니

인피니트 스크롤링하는 pages에 관한 오류가 나왔습니다.

FollowingPosts 컴포넌트와 PostForm에서 queryClient.getQueryData(["posts","followings"] 에서 받는 데이터를 출력해보니 아래와 같은 데이터 구조를 가지고 있습니다.

FollowingPosts 컴포넌트 코드는 다음과 같습니다.

export default function FollowingPosts() {
  const { isPending, data } = useQuery<PostType[]>({
    queryKey: ["posts", "followings"],
    queryFn: getFollowingPosts,
    staleTime: 60 * 1000,
    gcTime: 300 * 1000,
  });

  if (isPending) return <Loading />;
  console.log("data2", data);

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

FollowingPosts 컴포넌트에서는 useInifiniteQuery가 아닌 useQuery를 통해 데이터를 받아와서 데이터 안에 있는 pages가 없어서 이런 오류가 나오는걸까요??

우선 useInfiniteQuery로 변경해 게시물을 등록하면

잘 작동되는 것은 확인했습니다.