24일차 / useApolloClient, React-Hook-Form, Yup, Common-Component

김혜진·2022년 4월 14일

여러가지 쿼리방식

useQuery
=> api 요청이 날아가고 받아와서 화면에 그림이 그려지게 함
요청: 자동 / 그림: 자동

내가 원할 때 쿼리가 날아갔으면 좋겠는데...

useLazyQuery
useMutation 처럼 함수를 만들 수 있고, 함수를 실행할 때 데이터 요청이 날아가고, 데이터가 받아진 후로는 useQuery와 동일하게 화면에 그림이 그려짐
useQuery와 다른점은 실행만 내가 원할 때 할 수 있다는 것
요청: 수동 / 그림: 자동 (리렌더링이 자동으로 된다는 것)

useApolloClient
axios랑 비슷하며 자동으로 화면에 그려주지 않는다.
요청: 수동 / 그림: 수동

useApolloClient

const client = useApolloClient();
import { useApolloClient } from "@apollo/client";

     const resultUserInfo = await client.query({
      query: FETCH_USER_LOGGED_IN,
      context: {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      },
    });
    const userInfo = resultUserInfo.data.fetchUserLoggedIn;
    console.log(userInfo);

    });

유저 정보 받아오기

context: 옵션형태로 추가 입력하고 싶은 데이터가 있을 때

스토어도 유저스토어, 게시판스토어 등 스테이트를 나눠서 관리하면 좋을 것

 localStorage.setItem("userInfo", JSON.stringify(userInfo));

객체는 로컬스토리지나 세션스토리지에 저장이 안되므로 객체를 문자열로 바꿔서 저장해야한다.

  const [userInfo, setUserInfo] = useRecoilState(userInfoState);

  useEffect(() => {
    const accessToken = localStorage.getItem("accessToken");
    const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
    setAccessToken(accessToken || "");
    setUserInfo(userInfo || "");
  });

새로고침하면 데이터가 날아가므로 userInfo의 정보도 apollo 페이지에서 getItem을 추가한다.
불러올 때는 문자열을 객체로 풀어서야 하므로 JSON.parse 사용

배열의 순서가 중요하므로 앞에 걸 안쓰더라도 콤마를 꼭 찍어주고, 뒤에 걸 안 쓰게 되면 콤마는 필요없다.

React-Hook-Form

폼 안에서 button type="reset"은 input이 빈값으로 변경되게 한다.
type="submit"은 onSubmit={} 안이 실행이 되면서 백엔드로 전송
type 지정을 안해준다면 ?
type="submit"이 default 값이므로 타입 지정을 안 해준 것과, type="submit"이 함께 실행된다.