[React] react-query와 API 정리

 

 

 

 

 

---

 

 

 

◽ react-query란?

React에서 상태 관리를 하다보면 클라이언트와 서버 데이터가 공존하면서 생기는 문제들이 있다고 한다.

• 캐싱이 가능하다.
• get을 한 데이터에 대해 update를 하면 자동으로 get을 수행한다.
• 동일 데이터를 여러번 요청하는 경우 한번만 요청한다.

 

 

◽ react-query 설치하기

$ npm i react-query

 

 

◽ react-query 기본 형태

import { QueryClient, QueryClientProvider, useQuery } from 'react-query'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isLoading, error, data } = useQuery('repoData', () =>
    fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
      res.json()
    )
  )

  if (isLoading) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
    </div>
  )
}

 

 

 

---

 

 

react-query의 주요 API

 

1. useQuery( param1 queryKey(=uniqueKey), param2 queryFn(=API 호출 함수), param3 옵션값 )

데이터를 get하기 위한 api 이다.

• 첫번째 파라미터: unique key를 설정한다. string과 배열 둘 다 key가 될 수 있다.
• 두번째 파라미터: API를 호출하는 비동기로 작동하는 함수가 들어간다.
• 세번째 파라미터: enabled 등의 옵션값이 들어간다.

 

 

📄 예제 1. 기본 예제

const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList, {
    refetchOnWindowFocus: false, // 재실행 여부 옵션
    retry: 0, // 실패시 재호출 시도 횟수
    onSuccess: data => {
      // 성공시 호출
      console.log(data);
    },
    onError: e => {
      // 실패시 호출 401, 404 같은 error가 아니라 api 호출 자체가 실패한 경우
      console.log(e.message);
    }
});

 

📄 예제 2. status로 한번에 처리하기

isLoading, isSuccess 말고 한번에 처리가 가능하다.

function Todos() {
  const { status, data, error } = useQuery("todos", fetchTodoList);

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

 

📄 예제 3. enabled을 사용하여 동기적으로 호출하기

enabled를 사용하면 useQuery를 동기적으로 호출할 수 있다.

const { data: todoList, error, isFetching } = useQuery("todos", fetchTodoList);
const { data: nextTodo, error, isFetching } = useQuery(
  "nextTodos",
  fetchNextTodoList,
  {
    enabled: !!todoList // true가 되면 fetchNextTodoList를 실행한다
  }
);

 

 

 

 

2. useQueries([ param1 queryKey(=uniqueKey), param2 queryFn(=API 호출 함수) ])

post, update에 사용한다.

const result = useQueries([
  {
    queryKey: ["getRune", riot.version],
    queryFn: () => api.getRunInfo(riot.version)
  },
  {
    queryKey: ["getSpell", riot.version],
    queryFn: () => api.getSpellInfo(riot.version)
  }
]);

 

 

 

 

3. useMutation( param1 queryKey(=uniqueKey), param2 queryFn(=API 호출 함수), param3 옵션값 )

post, update 시에 사용한다.

• onMutate: mutation 함수가 실행되기 전에 실행되고 mutation 함수가 받을 동일한 변수가 전달된다.
• onError: mutation이 error를 만났을 때 실행된다.
• onSuccess: mutation이 성공하고 결과를 전달할 때 실행된다.
• onSettled: 성공여부에 관계없이 실행된다.

 

const loginMutation = useMutation(loginApi, {
    onMutate: variable => {
      console.log("onMutate", variable);
      // variable : {loginId: 'xxx', password; 'xxx'}
    },
    onError: (error, variable, context) => {
      // error
    },
    onSuccess: (data, variables, context) => {
      console.log("success", data, variables, context);
    },
    onSettled: () => {
      console.log("end");
    }
  });

 

 

 

 

---

 

 

 

 

출처

Installation | TanStack Query Docs

react-query 개념 및 정리

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.