SWR로 로그인 처리해보기

들어가기

로그인이 성공되었다.
그럼 백엔드 서버에서 로그인한 유저의 정보를 프론트로 보내주는데,
프론트 입장에서는 이 정보를 담아야 하는데 전역적으로 어떻게 담을 것인가?

1. 리덕스
2. Context API
3. SWR (v)
4. 그래프큐엘 makeVar

등등...

오늘은 3번째 방법으로 로그인 처리를 간단하게 구현해보고,
컴포넌트를 넘나들며 전역적으로 상태관리를 해보는 방법을 알아보자.

---

SWR?

HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revaslidate에서 유래된 것으로 먼저 캐시로 부터 데이터를 반환한 후에 fetch 요청을 하고 최정적으로 최신화된 데이터를 가져오는 전략인 즉, 데이터를 가져오기 위한 react hooks.

그리고 다른 탭에서 다시 swr로 만든 서비스로 돌아왔을 때마다 요청을 보내줘서 항상 최신상태를 유지할 수 있게 해준다.

요청을 계속 보낸다...? 잠깐만...
계속 API 요청하게 하기 싫은뎁... 서버에 무리가 간단말이야...

그렇다면,  직접 컨트롤 가능!

컨트롤 2가지 방법

1. 내가 원할 때만 요청하기
API가 성공했을 때 revalidate()를 호출하게 되면 revalidate에 의해서 fetcher가 실행되게 할 수 있다.

'아폴로 그래프큐엘에 useLazyQuery 같은건가...?'

ex) 로그인 성공했을 때만 api 실행하기

const {data, error, revalidate} = useSWR(url, fetcher);
...
const handleSubmit = useCallback((e)=>{
    ...
    .then(()=>{
        revalidate();
    })
    ...
}, [dep])

 

2. 주기적으로 하는 요청을 컨트롤하기

const {data, error} = useSWR(url, fetcher, { dedupingInterval: 100000 })

• dedupingInterval: 설정한 시간 내에는 캐시를 불러온다.
• 이외의 많은 옵션은 여기서 확인하기

 

swr 설치

npm i swr

fetcher 유틸 만들기

useSWR(api 주소, api 주소 처리 함수);

useSWR의 역할은 api 주소를 처리하는 함수로 api 주소를 넘기는 기능만 있을 뿐.
따라서, fetcher 처리 유틸을 만들어보자.

// utils/fetcher.ts
import axios from 'axios';
const fetcher = (url) => axios.get(url).then((response)=>response.data);
export default fetcher;

로그인 처리

통상적으로 swr은 get 요청으로 보내야하는데 로그인은 post...
그럼 어떻게 하지 약간 애매한데? 생각 들겠지만,
그냥 서버에 '나 로그인했어 정보 보내줘!'라는 get을 한번더 보내기로 했다.

GET /users가 유저가 로그인한 정보를 가져오는 엔드포인트라고 할 때 요청.

💡여기서 잠깐, 로그인 지식!?

로그인은 쿠키로 관리하는 경우가 많다. 근데 프론트와 백엔드 api 주소가 달라서 생기는 네트워크 문제로 쿠키가 생성이 안되는 현상이 발생할 경우 withCredentials 설정을 true로 바꾸자. (post는 3번째 인자 위치, get은 2번째 인자 위치에!)

const {data, error} = useSWR(url, fetcher);

...
const handleSubmit = useCallback((e)=>{
...
axios
    .post(
        'url',
        {email, password},
        {withCredential: true}
    )
    .then(()=>{
        mutate();
    })
    .catch((e)=>{
        // 에러 메세지 출력
    })
...
}, [])

if (!error) return <Redirect to='url'/>

...

⚠️ 주의하기
`return`은 훅스 아래에서 처리할 것!

마치며...

쓰면 쓸수록 아폴로가 전역 상태 처리 하는데 심플하니 최고 인 것 같다!
비슷한 라이브러리로는 react-query가 있다.