[모각코][React] useQuery

React Query

: 리액트에서 비동기 로직을 간편하게 다룰 수 있게 해주는 라이브러리

기존의 useState로 value를 설정하고 loading을 설정해야 하는 코드를 없애고 한 줄로 바꾸어줌!!!!!!

(깔끔해져서 좋았음)

 

설치방법

npm i react-query
yarn add react-query

 

QueryClientProvider

리액트 쿼리 사용을 위해 최상단에 QueryClientProvider로 감싸주어야 한다.

그 후 쿼리 인스턴스를 생성 해 client를 지정해준다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
  </React.StrictMode>
);

 

useQuery

import { useQuery } from "react-query";

const { isLoading, data, , error } = useQuery(queryKey, queryFn, options)
// 주로 사용되는 3가지 return 값 
//외에도 더 많은 return 값들이 있다
// 순서는 딱히 상관 없는 듯

 

Query Key

문자열 또는 배열로 지정할 수 있음

// 문자열
useQuery('todos', ...)
// 배열
useQuery(['todos'], ...)

const { data, isLoading, error } = useQuery(['todos', id], () => axios.get(`http://.../${id}`));
// 쿼리가 변수가 필요할 경우 대괄호 안에 해당 변수를 추가해주어야 한다.

 

Query Function

useQuery의 두번째 인자에는 Promise를 반환하는 함수를 넣어주어야 함

useQuery(['todos', todoId], () => fetchTodoById(todoId));
useQuery(['todos', todoId], async () => {
   const data = await fetchTodoById(todoId);
   return data
 });
useQuery(['todos', todoId], ({ queryKey }) => fetchTodoById(queryKey[1]));

 

Query Options

써본게 refetchInterver밖에 없어서 ㅎㅎ(〃^▽^〃)ゝ... 얘만 적어보겠다...

뭐 정리할 것도 없다 그냥 세번째 인자에

{refetchInterval:5000,}

이런식으로 넣어주면 api를 5초에 한번씩 새로 받아온다.