[React-query] 리액트 쿼리 #2

Queries

useQuery

• useQuery 훅은 데이터를 GET할 때 사용한다.
• 파라미터로 queryKey와 queryFn을 필수로 들어가야한다.

사용 예시

import axios from "axios";
import React from "react";
import { useQuery } from "react-query";

const Inner = () => {
  
  // queryFn
  const getData = async () => {
    const { data } = await axios.get("http://localhost:4000/posts");
    return data;
  };

  const query = useQuery("data", getData);
  // const {isLoading, data, error} = useQuery("data", getData) 	구조분해할당으로 간단하게 작성도 가능하다. 
  
  const {isLoading, data, error} = query;

  if (isLoading) return "Loading .....";

  if (error) return "An error has occurred:" + error.message;

  return (
    <div>
      <h3>Inner Component</h3>
      <div>
        {data.map((item) => (
          <p key={item.id}>{item.title}</p>
        ))}
      </div>
    </div>
  );
};

export default Inner;

useQueries

• useQuery를 비동기로 여러개 실행할 경우 promise.all처럼 useQuery를 하나로 묶고, 하나의 배열에 각 쿼리에 대한 상태 값을 반환한다.

사용예시

// 📌 useQueries -> useQuery를 하나로 묶기 가능
  const result = useQueries([
    {
      queryKey: ["data"],
      queryFn: getData,
      staleTime: 10000,
      cacheTime: 50000,
    },
    {
      queryKey: ["dummy"],
      queryFn: getDummyData,
      staleTime: 10000,
      cacheTime: 50000,
    },
  ]);

// 배열 형태로 데이터가 들어온다.
// promise.all과 비슷

  useEffect(() => {
    console.log("result is ", result);
  }, [result]);

Mutation

useMutation

• useMutation은 React-query를 이용해 서버에 데이터 변경 작업을 요청할 때 사용한다. (insert, updata, delete 가 포함된다.)

Options
mutationFn (variables) => Promise

• Required
• 비동기 작업을 수행하고 프로미스를 반환하는 함수이다. (쉽게 말해 API 요청하는 함수)
• variables 는 mutate가 전달하는 객체이다.

**onMutate**: (variables) => Promise

• onMutate 는 mutation 함수가 실행되기 전에 실행되고 mutation 함수가 받을 동일한 변수가 전달된다.
• optimistic update 사용 시 유용한 함수이다.

onSuccess: (data, variables, context) => Promise

• onSuccess 는 mutation 이 성공하고 결과를 전달할 때 실행된다.

onError: (err, variables, context) => Promise

• onError 는 mutation 이 error 를 만났을 때 실행된다.

onSettled: (data, error, variables, context) => Promise

• onSettled 는 mutation 이 성공해서 성공한 데이터 또는 error가 전달될 때 실행된다. (성공하든 실패하든 아무튼 결과가 전달된다)

사용예시

import axios from "axios";
import React, { useState } from "react";
import { useCallback } from "react";
import { useMutation, useQuery, useQueryClient } from "react-query";

// 📌 POST 하는 API
const addList = async (list) => {
  const { data } = await axios.post("http://localhost:4000/posts", list);
  return data;
};

const Inner = () => {
  const queryClient = useQueryClient();
  const [value, setValue] = useState("");

  const handleInput = useCallback(
    (e) => {
      const { value } = e.target;
      setValue(value);
    },
    [value]
  );

  // 📌 useMutation
  const { mutate, isError, isSusscess } = useMutation(addList, {
    onMutate: (list) => {
      console.log("mutation", list)
    },

    onSuccess: (result, variables, context) => {
      console.log("성공 메시지:", result);
      console.log("변수:", variables);
      console.log("onMutate에서 넘어온 값:", context);
    },

    onError: (error, variables, context) => {
      console.log("error", error.message)
    },

    onSettled: () => {
      queryClient.invalidateQueries("data");
    } 
    // onSettled - 요청이 성공했거나 실패했을 경우 모두 발생한다. 
    // invalidateQueries - "data" 쿼리를 갖는 쿼리를 무효화 시켜서 refetch 하여 데이터를 서버와 일치시킨다.
  });

  return (
    <div>
      <h3>Inner Component</h3>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
      <input
        type="text"
        onChange={handleInput}
        placeholder="내용을 입력하세요"
        value={value}
      />
      <button
        onClick={() => {
          mutate({ title: `${value}` });
          setValue("");
        }}
      >
        추가하기
      </button>
    </div>
  );
};

export default Inner;