[React-Query] 리액트 쿼리로 데이터패치 구현하기 - useQuery (feat. Axios)

기존의 코드에 리액트 쿼리의 useQuery 를 적용하여 데이터 패칭을 수행하였다.

Before

axios 통신을 통해 데이터(레시피 목록)를 불러와 데이터를 화면에 표시하는 컴포넌트로, useEffect 훅을 사용하여 초기 마운트시 해당 로직을 수행하게한다.

import { useState, useEffect } from "react";

const [recipes, setRecipes] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    const recipePostsURL = `${process.env.REACT_APP_SERVER}/api/recipe/`;
    axios
      .get(recipePostsURL, {
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then((res) => {
        setRecipes(res.data);
        setIsLoading(false);
      })
  	  .catch((res) => { 
        // 에러처리
      });
}, []);

return (
   <>
      {isLoading ? null : ( <div>데이터를 보여주는 페이지</div> )}
   </>
)

After

const { data: recipes, isLoading, isError } = useQuery({
    queryKey: ["recipe-posts"],
    queryFn: async () => {
      const recipePostsURL = `${process.env.REACT_APP_SERVER}/api/recipe/`;
      return await axios.get(recipePostsURL).then((res) => res.data);
    },
  });

if (isLoading) return <>로딩페이지</>;
if (isError) return <>에러페이지</>;

발생할 수 있는 에러

• Starting with v5, only the "Object" form is allowed when calling query related functions. Please use the error stack to find the culprit call.
  리액트 쿼리 v5 이상부터는 쿼리의 파라미터는 객체형태만 허용한다고 한다. 만약 이를 어길시, 위와 같은 에러문구를 확인할 수 있다. 자세한 사항은 아래의 답변을 참고한다.
  https://stackoverflow.com/questions/77684535/uncaught-runtime-error-when-running-tanstack-react-query
• Query data cannot be undefined. Please make sure to return a value other than undefined from your query function.
  'useQuery'에 등록된 'queryFn' 함수는 Promise 결과를 반환하여야 한다. 만약 이를 어길시, 위와 같은 에러문구를 확인할 수 있다. 위의 코드에서 axios 요청 결과를 return을 통해 반환하는 이유이다.