[React] react-query Missing queryFn

✅ 문제 상황

react-query를 사용하던 중 Missing queryFn 오류가 났다.

한 개의 게시물에 달린 댓글을 가져오는 useQuery를 작성하던 중이었다. 

import { useQuery } from "react-query";

async function fetchComments(postId) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/comments?postId=${postId}`
  );
  return response.json();
}

export function PostDetail({ post }) {
  const { data, error, isError, isLoading } = useQuery(["post", post.id], fetchComments(post.id));

  if (isLoading) return <div>Loading...</div>;
  if (isError)
    return (
      <>
        {error.toString()}
        <div>Error...</div>
      </>
    );

  return (
    <>
      <h3 style={{ color: "blue" }}>{post.title}</h3>
      <button>Delete</button> <button>Update title</button>
      <p>{post.body}</p>
      <h4>Comments</h4>
      {data.map((comment) => (
        <li key={comment.id}>
          {comment.email}: {comment.body}
        </li>
      ))}
    </>
  );
}

 

✅ 해결 방법

Missing queryFn error when using useQuery

바로 실행해 주는 화살표를 추가해 주면 오류가 해결된다.

  const { data, error, isError, isLoading } = useQuery(["post", post.id], () =>
    fetchComments(post.id)
  );

 

오류 없이 댓글을 가져오는 것을 볼 수 있다.