useSWR에 사용되는 fetcher 오류

index.tsx

간략한 코드 흐름 설명

로그인 폼을 작성한후 제출을 누르면 onSubmit 함수가 실행 -> axios를 통해 back 서버에 email,passowrd 데이터와 함께 post 요청

-> post요청에 대해 응답이 오면 revalidate()함수 실행 -> revalidate()함수 실행하면 useSWR("http://localhost:3095/api/users",fetcher) 다시 실행 -> fetcher 함수 실행

fetcher함수에서 전달받은 url을 통해 axios.get요청으로 로그인한 유저의 정보 받아온 후, useSWR에서 data의 프로퍼티로 사용할 수 있게 return

 

내가 봉착했던 문제

fetcher함수를 호출한 뒤, 로그인한 user에 대한 값이 index.tsx의 data 값에 전달이 되지 않았다.

 

문제의 원인

const fetcher = (url:string) => {
    axios
    .get(url,{
        withCredentials:true,
    })
    .then((response)=>response.data);
}
    //서버와 클라이언트의 도메인이 다를 경우 서로 쿠키를 공유할 수 없기때문에, withCredentials를 사용해준다.

화살표 함수로 axios의 응답값을 바로 return 해주어야 하는 데 {}를 사용해서 return이 되지 않았다.

 

깨달은 점 : 화살표 함수를 사용할때, {} 사용을 주의해야 겠다.