axios와 react-query 기본

axios와 react-query 기본

안녕하세요 TriplexLab 입니다.
오늘은 axios와 react-query를 가지고 맛보기을 해보겠습니다.

👉 react-query GET 요청

react-query를 사용하기 위해서는 공식문서에서 나온예시처럼 똑같이 세팅을 해줘야 합니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from "react-query";
import {ReactQueryDevtools} from "react-query/devtools"
import App from './App';

const queryClient = new QueryClient() //react-query를 사용하기 위한 인터스턴 생성

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <QueryClientProvider client={queryClient}> //react-query 설치
        <ReactQueryDevtools initialIsOpen={true}/> //Devtools를 보기위해서 설치 
        <App />
    </QueryClientProvider>
);

api.js라는 axios를 따로 파일을 만들어서 관리합니다.
지금은 단순한 get요청하나만 하지만 나중에 다양한 요청을 할때 추가를 해면 됩니다.

//api.js
import axios from "axios";

const api = axios.create({
	baseURL: "http://localhost:5001/",
	headers: {
		'Content-type': 'application/json; charset=UTF-8',
		accept: 'application/json,',
	}
});

export const apis = {
	get: () => api.get('/posts'), //지금은 단순한 get요청
	// 코드 추가시...
}

"queryKey" 이부분은 문자열 queryKey가 들어갑니다.[참고]

queryKey: string | unknown[]

// App.js
import { useQuery } from "react-query";
import { apis } from "./api";
 
function App() {
  const { isLoading, data } = useQuery("queryKey", apis.get);

  return (
    <div className="App">
      {
      isLoading ||
      data.data?.slice(0, 100).map((el, idx)=>{
        return (
          <div key={idx}>
            {el.name}
          </div>
        );
      })}
    </div>
  );
}

export default App;

👉 react-query POST 요청

useMutation을 사용해서 POST를 요청해보겠습니다.

// api.js
import axios from "axios";

const api = axios.create({
	baseURL: "http://localhost:5001",
	headers: {
		'Content-type': 'application/json; charset=UTF-8',
		accept: 'application/json,',
	}
});

export const apis = {
	// post
	get: () => api.get('/posts'),
	update: (data) => api.post('/posts', data) //update 시킬 함수 추가
}

invalidateQueries을 사용해서 해당 쿼리부분 무효화를 시킬수 있습니다.
즉 데이터가 최신으로 변경되었으니 이전 데이터를 무효화 시키겠다는 의미 입니다.

그렇게 하면 자동으로 최신 데이터가 리스트에 추가되어 나오게 됩니다.

// App.js
import { useRef } from "react";
import { useQuery, useMutation, useQueryClient } from "react-query";
import { apis } from "./api";
 
function App() {
  const day_input = useRef("");
  const time_input = useRef("");
  const queryClient = useQueryClient();
  const { isLoading, data } = useQuery("all", apis.get, {
    staleTime: 10000
  });
  const {mutate} = useMutation(apis.update, {
    onSuccess: () => {
      queryClient.invalidateQueries("all"); //invalidateQueries(무효화 시킬 queryKey 이름)
      day_input.current.value = "";
      time_input.current.value = "";
    }
  });
  console.log(data)
  return (
    <div className="App">
      {
      isLoading ||
      data.data?.slice(0, 100).map((el, idx)=>{
        return (
          <li key={idx}>
            <div>{el.title}</div>
            <div>{el.body}</div>
          </li>
        );
      })
      }
      <div>
        <input ref={day_input}/>
        <input ref={time_input} />
        <button onClick={() => {
            const data = {
              title: day_input.current.value,
              body : time_input.current.value
            }
            mutate(data);
        }}>데이터 추가하기</button>
      </div>
    </div>
  );
}

export default App;

👉전체 코드 공유

GitHub - younhoso/younhoso

React-query와 axios에 관해서 간단하게 살펴 봤습니다.
일단 여기까지는 크게 어려운 부분은 없는것 같아서 만족하고 있습니다.ㅎㅎ

나중에 시간 있을때 React-query와 axios를 가지고 CRUD에 관해서 이야기를 해보도록 하겠습니다.
감사합니다.😃😃👏👍👍