[react-query] Missing queryFn for queryKey 'undefined' useInfiniteQuery

지금 useInfiniteQuery 를 처음 써보고있어서 

queryFn 관련된 에러인줄 알았는데

queryKey 를 배열로 안 써줘서 난 에러였다.

 

기존 코드

 const { data, fetchNextPage, hasNextPage, isFetching, isError, error } =
    useInfiniteQuery(
      "sw-people",
      ({ pageParam = initialUrl }) => fetchUrl(pageParam),
      {
        getNextPageParam: (lastPage) => lastPage.next || undefined,
      }
    );

 

수정코드

 const { data, fetchNextPage, hasNextPage, isFetching, isError, error } =
    useInfiniteQuery(
      ["sw-people"],
      ({ pageParam = initialUrl }) => fetchUrl(pageParam),
      {
        getNextPageParam: (lastPage) => lastPage.next || undefined,
      }
    );

 

["sw-people"] 이렇게 배열로 쿼리키를 만들어줘야한다.

 

공식문서를 보면 queryKey 가 배열이어야한다는 설명이 있다.

 

At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a single string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query's data, you can use it!

 

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

Query Keys | TanStack Query Docs

쿼리키에 대한 공식문서 글