React Query(Tanstack Query)

자주 사용하는 라이브러리 중 데이터를 관리하고 동기화 해주는 react-query에 대해 정리해보고자 한다.

react-qury?

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다.

 

공식 홈

Overview | TanStack Query React Docs

 

react-qury 장점

• 캐싱을 통해 동일한 데이터에 대한 반복적인 비동기 데이터 호출을 방지하고, 이는 불필요한 API 콜을 줄여 서버에 대한 부하를 줄이는 결과를 가져온다.
• 오래된 데이터의 상태를 파악하여 업데이트를 진행한다.
• 비동기 과정을 선언적으로 관리할 수 있다.
• 동일 데이터에 대한 중복 요청을 제거한다.
• React Hooks 와 유사한 인터페이스를 제공한다.
• 서버 상태(ex. 로딩 중, 에러, 성공) 관리를 쉽게 할 수 있다.
• 실시간 데이트 업데이트와 자동 동기화를 하여 서버와 클라이언트 데이터의 일관성을 유지한다.

 

react-qury 사용법

설치

npm install @tanstack/react-query
npm install @tanstack/react-query-devtools

 

적용 - pages router 기준

// src/pages/_app.js
import React from "react";
import {
  Hydrate,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";

export default function App({ Component, pageProps: { session, ...pageProps }, ...appProps}) {
  
	const [queryClient] = React.useState(() => new QueryClient());
  
  return (
    <QueryClientProvider client={queryClient}>
        <Hydrate state={pageProps.dehydratedState}>
           <Component {...pageProps} />
        </Hydrate>
    </QueryClientProvider>
  );
}

 

Query

useQuery

• 데이터를 get 하기 위한 api이다.
• 첫 번째 파라미터로 unique Key가 들어가고, 두 번째 파라미터로 비동기 함수(api 호출 함수 : Promise를 반환하는 형태 )가 들어갑니다.
• 최종 반환 값은 API의 성공, 실패 여부, 반환 값을 포함한 객체이다.

// 기본형
const { data } = useQuery(
	queryKey,
	queryFunction,
	options,
)

// 사용 예시
function Test() {
  const { status, data, error } = useQuery("tests", fetchTestList);

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

  return (
    <ul>
      {data.map(test => (
        <li key={test.id}>{test.title}</li>
      ))}
    </ul>
  );
}

 

 

useQuery를 동기적으로 실행하는 방법

비동기 함수인 useQuery를 동기적으로 사용하고자 하면 enabled 옵션을 사용하면 된다.

enabled가 true 일 때 실행된다.

const { data: testList, error: testError } = useQuery("tests", fetchTestList);
const { data: testTwo, error } = useQuery(
  "testTwos",
  fetchTestTwosList,
  {
    enabled: !!testList // true가 되면 fetchTestTwosList를 실행한다
  }
);

 

useQueries

다 수의 useQuery를 동시에 실행하고자 하고 싶을 때 묶어서 실행하면 된다.

const results = useQueries({
  queries: [
    { queryKey: ['tests'], queryFn: fetchTestList},
    { queryKey: ['testTwos'], queryFn: fetchTestTwosList}
  ]
})

 

Mutation

Mutaion 함수를 사용하여 데이터를 업데이트하고 캐시를 업데이트 할 수 있다. Mutation 함수는 데이터 생성, 수정, 삭제 용으로 사용되며 POST, PUT, DELETE 요청시에 사용한다.

첫번째 인자는 Mutation Function으로 Promise를 반환하는 함수입니다. useQuery 에서와 마찬가지로 fetch, axios등의 함수를 의미한다.

두번째 인자는 useMutation에 사용되는 옵션을 지정하는 객체다.

//기본형
const { mutate } = useMutation(
  mutationFn,
  options,
);


//사용 예시
import { useMutation, useQueryClient } from 'react-query';

// 데이터 업데이트 함수
function updateUser(userId, updatedData) {
  return fetch(`/api/user/${userId}`, {
    method: 'PUT',
    body: JSON.stringify(updatedData),
  }).then((response) => response.json());
}

function UserProfileEditor({ userId }) {
  const queryClient = useQueryClient();
  
  const { mutate } = useMutation((updatedData) => updateUser(userId, updatedData), {
    onSuccess: () => {
      // 데이터 업데이트 후 캐시를 재로드
      queryClient.invalidateQueries(['user', userId]);
    },
  });

  const handleSubmit = (updatedData) => {
    mutate(updatedData); // mutate는 자동으로 실행되지 않기 때문에 submit 시에 mutate 실행
  };

  return (
    <div>
      <h2>Edit User Profile</h2>
      <UserForm onSubmit={handleSubmit} />
    </div>
  );
}

  return (
    <div>
      <h2>Edit User Profile</h2>
      <UserForm onSubmit={handleSubmit} />
    </div>
  );
}

 

데이터 캐싱

staletime, cachetime 옵션을 사용하면 React Query에서 자체적으로 제공하는 데이터 캐싱 기능을 이용 할 수있다.

 

staletime (갱신 지연 시간)

staletime은 캐시된 데이터의 유효 기간을 나타내는 옵션입니다. 호출한 데이터는 리액트 쿼리 자체적으로 저장하는데 staletime은 기본적으로 0으로 설정되어 있어, 데이터가 한 번 캐시되면 즉시 만료되고 다시 요청된다.

이 값을 조정해서 데이터를 일정 시간 동안 캐시로 사용하고, 그 이후에만 다시 요청할 수있다

const { data } = useQuery(['data', getServerData,{
  staletime: 10 * 60 * 1000;
})

 

cachetime (캐시 유지 시간)

cachetime은 캐시된 데이터가 얼마나 오랫동안 메모리에 유지될지를 나타내는 옵션다.

이 값을 설정하면 캐시된 데이터가 일정 시간 도안 메모리에 유지된 후 자동으로 삭제된다.

데이터가 일정 기간 동안 메모리에 남아 있게 함으로써 같은 데이터를 다시 요청할 때 캐시에서 가져오기 때문에 성능을 향상 시킬 수 있다.

const { data } = useQuery(['data', getServerData], {
  cachetime: 30 * 60 * 1000, // 30분
})