Error: Missing queryFn

v4.0

 "@tanstack/react-query": "4.0.10",

 

문제: useQuery로 API 통신 시, Missing queryFn 표출됨

API에는 문제가 없었음.

import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { fetchPosts } from '@src/api/getPosts';

const PostList = () => {
     const { data, isLoading, isError, error } = useQuery('post', fetchPosts);
	
      if (isLoading) {
        return <span>Loading...</span>;
      }

      if (isError) {
        return <span>Error: {error}</span>; // 이 부분에서 에러
      }

    
    return (
      <ul className="messages">
        {data.map((x) => (
          <Post id={x.id} key={x.id} {...x} />
        ))}
      </ul>
    )
}

 

해결: QueryKey를 배열로 받는다.

import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { fetchPosts } from '@src/api/getPosts';

const PostList = () => {
     const { data, isLoading, isError, error } = useQuery(['post'], fetchPosts); // <-
	
      if (isLoading) {
        return <span>Loading...</span>;
      }

      if (isError) {
        return <span>Error: {error}</span>; 
      }

    
    return (
      <ul className="messages">
        {data.map((x) => (
          <Post id={x.id} key={x.id} {...x} />
        ))}
      </ul>
    )
}

 

공식문서

https://tanstack.com/query/v4/docs/guides/query-keys

Query Keys | TanStack Query Docs

쿼리 키는 최상위 수준의 배열이어야 하며 단일 문자열이 있는 배열처럼 단순할 수도 있고 많은 문자열과 중첩 개체의 배열처럼 복잡할 수도 있습니다.

 

---

배열만 되는 걸로 바뀐 줄 모르고 SSR 만지고 API 만지고 삽질만 수천번 한 듯 . . .