노마드코더 인스타그램 클론코딩 바로가기 https://nomadcoders.co/instaclone

Backend & Frontend의 연결 후 Login SignUp 기능 구현

Apollo Client

FrontEnd와 BackEnd의 연결을 위해 사용할 Apollo Client

연결방법

1. ApolloClient 생성

// apollo.js

export const client = new ApolloClient({
   uri:"http://localhost:4000/graphql",
   cache:new InMemoryCache(),
})

uri는 현재 내가 구동한 backend 서버의 주소를 뜻하고
cache는 apollo client는 local에서 data를 가져오는데 같은 정보를 매번 가져오는 것을 방지 하기 위한 방법이다.

2. ApolloProvider

Provider로 App을 감싸줘야지 App과 Backend Client와 연결이 된다.

// App.js

return(
   <ApolloProvider client={client}>
      <HelmetProvider>
         <ThemeProvider theme={darkMode?darkTheme:lightTheme}>
            <GlobalStyles/>
            <Router>
            ...
   </ApolloProvider>
)

Login Mutation

apolloclient로 frontend와 backend를 연결했으므로 우리가 구현한 backend 서버를 frontend에서 이용 가능

🔅 1. Login Mutation 생성

const LOGIN_MUTATION = gql`
   mutation Login($username:String!,$password:String!){
      login(username:$username,password:$password){
         ok
         token
         error
   }
}
`

useMutation

useMutation이라는 ReactHook을 이용해 graphql mutation을 이용할 수 있다.

const onCompleted = (data)=>{
   const {login:{ok,error,token}} = data;
   if(!ok){
      setError("result",{
         message:error,
      })
   }
   if(token){
      logUserIn(token);
   }
}

const [login,{loading:mutationLoading}] = useMutation(LOGIN_MUTATION,{onCompleted,})

const onSubmitValid = (data)=>{
   if(mutationLoading){
      return;
   }
   const {username,password} = getValues();
   login({
      variables:{
         username,
         password,
      }
   })
}

const clearLoginError =() =>{
   clearErrors("result");
};

간단 코드 리뷰

onCompleted 함수는 useMutation에서 전달받은 LOGIN_MUTATION이 성공적으로 완료 되었을 때 실행되는 콜백함수이다.
useMutation에서 options으로 들어가는 것을 볼 수 있고 성공적으로 완료되었을때 호출되는 onCompleted 함수는 data를 전달 받고 그 data에는 login mutation의 result object가 들어있다.
이를 이용해 로그인 실패했을 경우의 UI를 setError를 통해서 구현하고
로그인 성공했을 경우에는 token이 존재 할 것이고 이 token을 localStorage에 저장하는 login util 함수(logUserIn)를 구현해 주었다.

1. onComplted

• useMutation에서 전달받은 LOGIN_MUTATION이 성공적으로 완료되었을 때 호출되는 콜백
• data : login mutation의 result object가 return
• setError : 로그인 실패시 result라는 이름을 가진 error message를 생성
• 로그인이 성공적으로 되었을 때는 token값이 return 되고 이를 localStorage에 저장해준다.

2. onSubmitValid

• form이 제출될 때 호출되는 함수
• mutationLoading: useMutation이 진행 중인지를 판단하는 Boolean 값
• getValues() : 현재 form의 각 input 값을 return
• login({variables}) : login mutation을 실행하는데 이때 필요한 값들을 variables을 통해 전달

3. clearLoginError

• input이 변경될 때마다 errors중 result라는 이름을 가진 error를 clear해준다.
• 로그인이 실패 했을때 result error가 발생하는데 input이 onChange될 때마다 clear 해주지 않으면 새로고침을 해야만 다시 로그인 버튼이 활성화 되는 것을 볼 수 있다.

코드 진행 순서

1. 각 input Validate
2. 로그인 버튼 클릭시 onSubmitVliad 호출 -> login mutation실행
3. mutation이 정상적으로 완료 되었을때 onComplted 호출