useSWR 로직을 hooks로 사용하는 경우

로그인 유지를 swr 방식으로 교체하려고 합니다.

https://swr.vercel.app/ko/docs/getting-started

공식문서에는 useSWR을 hook으로 활용하는 가이드를 제시하고 있습니다.

(재사용 가능하게 만들기 항목)

가이드와 같은 방식으로 외부 파일에 hooks를 만들고, 적용했습니다.

useMyInfo.js

import axios from 'axios';

export default function useMyInfo(useSWR) {
  const fetcher = url =>
    axios.get(url, { withCredentials: true }).then(result => result.data);

  const {
    data: me,
    error: myInfoError,
    isLoading: myInfoLoading,
  } = useSWR(`${process.env.NEXT_PUBLIC_BACK_END_DOMAIN}/user/me`, fetcher);

  // mutate('ME', { me, myInfoError, myInfoLoading });

  return {
    me,
    myInfoError,
    myInfoLoading,
  };
}

index.js

const Home = () => {
  const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } =
    useSelector(state => state.post);

  useEffect(() => {
    useMyInfo(); // hooks 호출
  }, []);

...// 생략

매개변수로 전달하는 방식으로도 바꿔봤습니다.

import useSWR from 'swr'

const Home = () => {
  const { freePosts, loadFreePostsStatus, postTotal, addPostStatus } =
    useSelector(state => state.post);

  useEffect(() => {
    useMyInfo(useSWR); // hooks 호출, hooks에서는 매개변수 받아서 적용하는 방식으로 변경했음
  }, []);

...// 생략

여전히 같은 에러가 뜹니다.

공식문서 가이드와 달리 hook으로 만들어 재사용하는 것이 잘 안되는데 어떻게 해결할수 있나요? 간단한 get요청 하나 가져오는게 편할줄 알았는데 redux 보다 어려운거 같네요..

 mutate('ME', { me, myInfoError, myInfoLoading});

const { data: me } = useSWR('ME');