리액트 쿼리

이해

 

1.yarn add react-query

2. App.jsx에 seQueryClient(); 상수 선언 및 QueryClientProvider

3. src > api 폴더 비동기 세팅 후 

4. useQuery사용

ex)  const { isLoading, isError, data } = useQuery("todos", getTodos);

                                                                                ㄴ첫번째인자 ㄴ두번째인자 

*첫번째 인자 : 쿼리 키라고 부름 (Query Keys) .

1. refetching 하는 데에 쓰여요.
2. 캐싱(caching) 처리를 하는 데에도 쓰이죠.
3. 애플리케이션 전체 맥락에서 이 쿼리를 공유하는 방법으로 쓰여요.
4. 한 단어일 수도 있구요. 배열의 형태일 수도 있고, 심지어는 nested 객체일 수도 있어요.

*두번째 인자 :    쿼리 함수(Query Functions)

1. 쿼리 함수는 promise 객체를 return 합니다.
2. promise 객체는 반드시 data를 resolve하거나 에러를 내야 해요

useQuery를 통해 얻은 결과물은 객체(object)

 = > isLoading, isError, data 

 

5. invaildation 하기 위해 App에 상수 선언 했던 거 

const queryClient = new QueryClient(); 

+

 

mutation은 CUD에서 사용

ex)

<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>   

===========================================================

const mutation = useMutation(addTodo, {                                   
  onSuccess: () => {
    // Invalidate and refresh
    // 이렇게 하면, todos라는 이름으로 만들었던 query를
    // invalidate 할 수 있어요.
    queryClient.invalidateQueries("todos");

                                                        ㄴ쿼리키.

[invalidate의 과정]

Input.jsx에서 값 입력으로 인해 서버 데이터가 변경됨

→ onSuccess가 일어나면 기존의 Query인 “todos”는 무효화

→ 새로운 데이터를 가져와서 “todos”를 최신화시킴

→ TodoList.jsx를 갱신함

  },
  });

 

중요한 거 mutation.mutate({ id: new Date(), title: 'Do Laundry' })

                                                        ㄴ인자에 반드시 한개의 변수 또는 객체.

1. useMutation은 hook. 함수. API
   1. mutation.mutate( 인자 )
      1. 인자는 반드시 한 개의 변수 또는 객체.
      2. mutation.mutate(인자1, 인자2) → 오류
   2. 결과를 객체(object 형태로) 갖고 있음
   3. 그 결과물 객체는 항상 어느 상태 중 하나에 속함.
      1. isIdle
      2. isLoading
      3. isError
         1. error 객체를 항상 품고 있음을 명심!
      4. isSuccess(query에만 있는게 아님)
         1. data 객체를 항상 품고 있음을 명심

=====================================================================

세팅

 

1.설치

yarn add react-query

 

2.환경 설정 

 

App.jsx 

import React from "react";
import Router from "./shared/Router";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = useQueryClient();

const App = () => {

  return (
    <QueryClientProvider client={queryClient}>
      <Router />;
    </QueryClientProvider>
  );
};

export default App;

======================================================

src>api> todos.js 

import axios from "axios";

// 모든 todos를 가져오는 api
const getTodos = async () => {
  const response = await axios.get("http://localhost:3000/todos");
  return response;
};

 

const addTodo = async (newTodo) => { await axios.post(`${SERVER_URI}/todos`, newTodo); };

export { getTodos };

 

=====================================================

 

Todolist.jsx

 

import React from "react";
import { StyledDiv, StyledTodoListHeader, StyledTodoListBox } from "./styles";
import Todo from "../Todo";
import { __getTodosThunk } from "../../modules/todosSlice";

import { getTodos } from "../../../api/todos";
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 (
    <StyledDiv>
      <StyledTodoListHeader>
        {isActive ? "해야 할 일 ⛱" : "완료한 일 ✅"}
      </StyledTodoListHeader>
      <StyledTodoListBox>
        {data
          .filter((item) => item.isDone === !isActive)
          .map((item) => {
            return <Todo key={item.id} todo={item} isActive={isActive} />;
          })}
      </StyledTodoListBox>
    </StyledDiv>
  );
}

export default TodoList;

 

================================================================

 

Input.jsx 

 

...
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
    // 이렇게 하면, todos라는 이름으로 만들었던 query를
    // invalidate 할 수 있어요.
    queryClient.invalidateQueries("todos");
  },
  });