[React] React Query 설치하기

실시간 데이터가 중요할 때 react-query 를 사용한다

 

서버를 사용하면서 ajax 성공했을 경우와 실패 했을 경우에 다른 html을 보여주고 싶은 경우

몇 초마다 자동으로 ajax 요청을 하고싶거나 실패시 몇 초후에 요청을 재시도 하고싶은 경우

 

실시간 데이터를 계속 가져와야하는 사이트들에서 사용하면 좋다

 

설치 하는 방법

 

npm i @tanstack/react-query

https://tanstack.com/query/v4/docs/react/installation

Installation | TanStack Query Docs

 

다음 방법으로 설치해 주면되는데 라이브러리 명이 자주 바뀌는거 같다

2024.01 월 기준 다음 방법으로 설치하니 npm 설치가 되었다

 

index.js 세팅 하기

 

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient();

 

index.js 안에 다음과 같이 선언을 해주고

<App/> 태그를   <QueryClientProvider>   태그로 감싸 주어야한다

 

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </QueryClientProvider>
);

 

 

react-query를 이용해서 ajax를 요청하기

 

react-query로 ajax를 요청하기 위해서는 useQuery()라는 함수를 사용해야한다

다음 함수를 사용하기 위해서 '@tanstack/react-query'를 선언을 해주어야한다

 

import {
  useQuery,useQueryClient
} from '@tanstack/react-query'

 

//방법 1
const { data, error, isError } = useQuery({
    queryKey:['myQueryKey2']
  ,queryFn:()=>
   {return axios.get('ajax를 요청 할 사이트주소').then((res=>res.data))}
   ,});

//방법 2
const MyComponent = () => {
  const { data, error, isError } = useQuery({
    queryKey: ["myQueryKey"],
    queryFn: async () => {
      const res = await axios.get(
        "ajax를 요청 할 사이트주소"
      );
      return res.data;
    },
  });
  if (isError) {
    console.error("요청 실패:", error);
    // 에러 처리 로직 작성
  } else if (data) {
    return (
      <div>
        <h2>{data.name}</h2>
        <h3>{data.email}</h3>
      </div>
    );
  }
};

useQuery를 사용하면 좋은점

변수 하나로 성공/실패/로딩중 을 쉽게 파악 가능하게 된다

위의 코드를 에서 보면 result 변수를 사용하는 방법

result.data //성공
result.isLoading //로딩중
result.error  // 실패

import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import {
  useQuery,
  useQueryClient,
  useQueryErrorResetBoundary,
} from "@tanstack/react-query";

const MyComponent = () => {
  const { data, error, isError } = useQuery({
    queryKey: ["myQueryKey"],
    queryFn: async () => {
      const res = await axios.get(
        "ajax를 요청 할 사이트주소"
      );
      return res.data;
    },
  });
  if (isError) {
    console.error("요청 실패:", error);
    // 에러 처리 로직 작성
  } else if (data) {
    return (
      <div>
        <h2>{data.name}</h2>
        <h3>{data.email}</h3>
      </div>
    );
  }
};
function App() {
  const { data, error, isError } = useQuery({
    queryKey:['myQueryKey2']
  ,queryFn:()=>
   {return axios.get( "ajax를 요청 할 사이트주소").then((res=>res.data))}
   ,});


  return (
    <div className="App">
    {<MyComponent></MyComponent>}
    </div>
  );
}

export default App;