2024. 7. 10. 심화 프로젝트 3일차

import { FC } from "react";
import Link from "next/link";
import { PostInDB } from "@/types/Post";
import SITE_URL from "@/constant";
import { useQuery } from "@tanstack/react-query";

const fetchPosts = async () => {
  const response = await fetch(`${SITE_URL}/api/posts`, {
    headers: {
      "Cache-Control": "no-cache",
      Pragma: "no-cache",
      Expires: "0",
    },
  });
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json() as Promise<PostInDB[]>;
};

const BestInfo: FC = () => {
  const {
    data: posts,
    error,
    refetch,
  } = useQuery<PostInDB[]>({
    queryKey: ["posts"],
    queryFn: fetchPosts,
    staleTime: 0,
    refetchOnWindowFocus: true,
    refetchInterval: 60000,
  });

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div className="p-5">
      <div className="mb-5 flex justify-between items-center">
        <div>
          <h2 className="text-40px text-[#10AF86]">베스트</h2>
          <p className="text-25px">금주의 베스트 게시글 입니다.</p>
        </div>
        <Link href="/more">
          <p className="text-gray-500 text-sm">더보기 &gt;</p>
        </Link>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        {posts && posts.length > 0 ? (
          posts.slice(0, 4).map((post) => (
            <div
              key={post.post_id}
              className="relative rounded-lg overflow-hidden"
            >
              <img
                src={post.image}
                alt={post.title}
                className="w-52 h-32 rounded-2xl"
              />
              <div className="p-4">
                <h3 className="text-lg font-semibold">{post.title}</h3>
                <p className="text-gray-600 mt-1">{post.content}</p>
                <div className="flex justify-between items-center mt-4">
                  <span className="text-gray-500 text-sm">
                    작성자 {post.author_nickname}
                  </span>
                  <span className="text-gray-500 text-sm">
                    {new Date(post.created_at).toLocaleDateString()}
                  </span>
                </div>
                <div className="flex justify-between items-center mt-2">
                  <span className="text-green-600 text-sm">
                    ♥ {post.likes ?? 0}
                  </span>
                </div>
              </div>
            </div>
          ))
        ) : (
          <p>No posts available.</p>
        )}
      </div>
    </div>
  );
};

export default BestInfo;

 

usequery 로 가져온 캐싱된 데이터가 지난 데이터로 읽히는 (?) 문제가 있었었다.

수파베이스에서 게시글을 지워도 데이터엔 여전히 남아있고 페이지에도 렌더링 됬던 것.

데이터를 가져오는 로직에서 문제가 있었던 것 같긴 한데, 해결 방법이 있어서 트러블 슈팅을 적어보려고 한다.

HTTP 헤더 설정: fetchPosts 함수에서 Cache-Control, Pragma, Expires 헤더를 설정하여 캐시를 무시하고 항상 최신 데이터를 가져오도록 설정한다.

사실 이렇게 하면 쿼리로 가져온 의미가 있나,, 싶기도 한데 일단 기능 구현부터 하고 만약 필요하다면 리팩토링 해보려고 한다.