tanstack-query 탄스택 쿼리 사용하기 (usequery)

서론

현재 백엔드와 협업을 하면서 프로젝트를 구성중이다.
데이터를 가져오기 위해 tanstack-query를 이용하고자 한다.
기술 스택은 간략하게 react, typescript, axios등을 이용한다.

과정

탄스택 쿼리 공식문서: https://tanstack.com/query/latest/docs/framework/react/overview

axios 공식문서:
https://axios-http.com/kr/docs/intro

요약:
1. 먼저 axios를 통해 데이터를 받아온다.
(단, cors 문제를 해결하거나, 프록시를 이용해 우회했다는 가정 하에 한다.)
2. 탄스택 쿼리의 usequery 및 mutation를 이용해 데이터를 이용하고, 에러를 다룬다.

1. axios 이용하기

fetch를 이용하는 방법도 있지만
데이터를 처리하는 것과 여러 데이터 구조가 이용하기 어렵고,
비교적 느리다고 해서 axios를 이용하였다.

각 페이지 및 컴포넌트의 useEffect를 통해 직접 가져오지 않고,
api 폴더를 만들어 가져온 다음, 탄스택 쿼리를 이용한다.

*예시 : get 메소드

export const informationApi = async () => {
  try {
    const res = await axios.get(
      '[백엔드 api url를 작성해주세요]',
    );
    return res.data;
  } catch (error) {
    console.log(error);
  }
};

ts 파일을 만들고 각 api 함수를 만든 후 export를 해준다.

axios 공식문서의 get 사용 예시 링크 :https://axios-http.com/kr/docs/example
공식문서는 trycatch말고 .then catch를 이용했지만
나는 try catch가 더 직관적이고 깔끔해서 이걸 사용했다.

*예시 : post 메소드

import axios, { AxiosError } from 'axios';

interface LoginType {
  email: string;
  password: string;
}
export const loginApi = async (Login: LoginType) => {
  try {
    const res = await axios.post(
      '[백엔드 api url를 작성해주세요]',
      Login,
    );
    return res.data;
  } catch (error) {
    const axiosError = error as AxiosError;
    throw axiosError.response?.data;
  }
};

post의 예시가 좀 의아할 수 있다.
로그인을 위해 post를 이용하는 것이 보안상 좋다고 하여 post를 이용했기에
login api 예시를 가져왔다.

post를 보낼 것이기 때문에 파라미터로 Login을 적고,
axois를 통해 들어온 error 응답 중 데이터를 처리한다.

이 데이터는 백엔드가 만들어준 것으로 필요에 따라 console.log, throw error 등으로
처리 가능하다.

2. get 및 post api를 통해 데이터 다루기

get을 다룬 것은 map을 이용하여 페이지를 구성했다.

import { useQuery } from '@tanstack/react-query';
import { informationApi } from 'api/openApi';

//... 생략
 const { data, isError, isLoading, isSuccess } = useQuery({
    queryKey: ['info'],
    queryFn: informationApi,
  });
   //... 생략
  {data?.slice(pageCount, pageCount + 3).map((value) => (
          <St.SearchInnerWrapper key={value.trsmicnm}>
          
         // ... 생략

쿼리키는 데이터 쿠키를 저장할 수 있어 쓰인다고 한다. 임의로 지정할 수 있으므로
상관하지 않고 식별가능한 키를 적으면 된다.

post를 다뤄 로그인 컴포넌트를 구성했다.

import { useMutation } from '@tanstack/react-query';


  const [loginForm, setLoginForm] = useState({ email: '', password: '' });
  const { email, password } = loginForm;
   // ... 생략
  const mutation = useMutation({
    mutationFn: loginApi,
  });
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setLoginForm((data) => ({
      ...data,
      [name]: value,
    }));
  };
     // ... 생략
   const emailLoginHandler = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    mutation.mutate(
      { email: email, password: password },
      {
        onSuccess: (data) => {
          if (data) alert('로그인 되었습니다!');
          //navigate('/');
        },
        onError: (error) => {
          if (email && password) {
            alert(error.message);
          } else {
            alert('이메일 또는 비밀번호 입력해주세요');
          }
        },
      },
    );
  };
   // ... 생략

form 태그 및 input은 생략했다.
loginHandler는 form에 넣어줬다.

결론

탄스택 쿼리를 다룰 수 있는 기회가 있어 재미있었다.
후에 html을 기반으로 제이쿼리 등도 한번 사용해 볼 예정이다.