React-query
요즘 비슷한걸 많이 해서 목적성에 대해 조금 더 깊게 공부해야한다.]
다른 서버와의 API 통신과 비동기 데이터 관리를 위해 Redux-thunk등 미들웨어를 선택해서 사용할 수 있다.
하지만 보일러 플레이트가 너무 많은 것은 코드짤 때 매우 힘들기 때문에 나온게 react query이다.\
리액트 쿼리의 가장 큰 이점은 validation 기능인데,
기존의 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있다.
그래서 최신상태가 아닐 수 있는 점을 감안해 기존의 쿼리를 무효화 시킨 후에 최신화 시키는 기능이 바로 Query Invalidation이다.
일단
//app.jsx
import React from "react";
import Router from "./shared/Router";
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();
const App = () => {
return (
<QueryClientProvider client={queryClient}>
<Router />;
</QueryClientProvider>
);
};
export default App;QueryClientProvider는 데이터를 읽어오는 기능을 어플리케이션 전체에 주입하도록 하는 API 이다.
-> SRC > api > todos.js
//todos.js
import axios from "axios";
// 모든 todos를 가져오는 api
const getTodos = async () => {
const response = await axios.get("http://localhost:3000/todos");
return response;
};
export { getTodos };todo.js로 서버에 있는 데이터를 비동기로 가져온다.
//todoList.jsx
import React from "react";
...
import { useQuery } from "react-query";
function TodoList({ isActive }) {
const { isLoading, isError, data } = useQuery("todos", getTodos);
if (isLoading) {
return <p>로딩중입니다....!</p>;
}
if (isError) {
return <p>오류가 발생하였습니다...!</p>;
}
return (
...
);
}
export default TodoList;Thunk를 사용하면 isLoading, isError등을 다 직접 만들어야했지만,
React Query는 return 문에 도착하기 전에 isLoading, isError에 따라 별도의 처리를 해주기 때문에
대기 상태 처리/오류 처리에 대한 코드도 아주 쉽게 구현할 수 있겠다.
useQuery를 통해 얻은 결과물은 객체(object)이다.
그 안에는 여러분이 ‘조회’를 요청한 결과에 대한 거의 모든 정보가 들어있고 그 과정에 대한 정보도 다음과 같이 들어있어요.
- 시작 하면, isLoading이
true가 돼요. - 조회 결과 오류가 나면 isError가
true가 돼요. isLoading은false가 됨.
error 객체를 통해 좀 더 상세한 오류 내용을 볼 수 있음. - 조회 결과 정상이 되면 isSuccess가
true가 돼요. isLoading은false가 됨.
data 객체를 통해 좀 더 상세한 조회 결과를 확인할 수 있다.
mutation
query와는 다르게 mutation은 CUD에서 사용된다.
function App() {
const mutation = useMutation(newTodo => {
return axios.post('/todos', newTodo)
})
return (
<div>
{mutation.isLoading ? (
'Adding todo...'
) : (
<>
{mutation.isError ? (
<div>An error occurred: {mutation.error.message}</div>
) : null}
{mutation.isSuccess ? <div>Todo added!</div> : null}
<button
onClick={() => {
mutation.mutate({ id: new Date(), title: 'Do Laundry' })
}}
>
Create Todo
</button>
</>
)}
</div>
)결과를 객체(object 형태로) 갖고 있다.
3. 그 결과물 객체는 항상 어느 상태 중 하나에 속한다.
1. isIdle
2. isLoading
3. isError
- error 객체를 항상 품고 있음을 명심!
4. isSuccess(query에만 있는게 아니에요)
- data 객체를 항상 품고 있음을 명심
invalidation
...
import { addTodo } from "../../../api/todos";
import { QueryClient, useMutation } from "react-query";
...
function Input() {
...
const queryClient = new QueryClient();
const mutation = useMutation(addTodo, {
onSuccess: () => {
// Invalidate and refresh
queryClient.invalidateQueries("todos");
},
});Input.jsx에서 값 입력으로 인해 서버 데이터가 변경됨
→ onSuccess가 일어나면 기존의 Query인 “todos”는 무효화
→ 새로운 데이터를 가져와서 “todos”를 최신화시킴
→ TodoList.jsx를 갱신함
