React-Query 튜토리얼

1. Introduce

1-1. React Query의 사용 목적

• 귀하가 통제하거나 소유하지 않는 위치에 원격으로 유지됩니다.

• 데이터 fetching 및 업데이트를 위한 비동기 API가 필요합니다.

• 공유 소유권을 암시하며 사용자 모르게 다른 사람이 변경할 수 있습니다.

• 주의하지 않으면 응용 프로그램에서 잠재적으로 데이터가 “구식” 될 수 있습니다.

• 캐싱… (아마 프로그래밍에서 가장 어려운 일)

• 동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거

• 데이터가 “오래된”시점을 알고, 백그라운드에서 “오래된”데이터 업데이트

• 데이터 업데이트를 최대한 신속하게 반영

• pagination 및 lazy loading 데이터와 같은 성능 최적화

• 서버 상태의 메모리 관리 및 가비지 수집

• 애플리케이션에서 복잡하고 많은 코드 줄을 제거하고 몇 줄의 React Query 로직으로 대체할 수 있습니다.

• 새 server state 데이터 소스 연결에 대한 걱정없이 애플리케이션을 유지 관리하기 쉽고 새 기능을 쉽게 구축할 수 있습니다.

• 애플리케이션이 어느때보다 빠르고 응답성이 높게하여 사용자에게 직접적인 영향을 미칠 수 있습니다.

• 잠재적으로 대역폭을 절약하고 메모리 성능을 높일 수 있습니다.

2. Set up

2-1. Installation

$ npm i react-query
# or
$ yarn add react-query

2-2. QueryClientProvider

• client: QueryClient
필수 속성, QueryClient를 제공할 인스턴스

• contextSharing: boolean
기본값은 false, context 공유를 활성화하려면 이 설정을 true로 설정합니다.

QueryClientProvider | TanStack Query Docs

Use the QueryClientProvider component to connect and provide a QueryClient to your application: `js

https://tanstack.com/query/v3/docs/react/reference/QueryClientProvider

2-3. QueryClient

import { QueryClient } from 'react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
})

await queryClient.prefetchQuery('posts', fetchPosts)

QueryClient | TanStack Query Docs

QueryClient The QueryClient can be used to interact with a cache:

https://tanstack.com/query/v3/docs/react/reference/QueryClient

예제. QueryProvider, QueryClient 생성

// App.js
import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

3. Fetcing Data with useQuery

3-1. useQuery

const {} = useQuery(
	'queryKey', queryFn, { options }
)

• queryKey: string | unknown[ ]
필수속성, 해당쿼리에 사용할 쿼리 키입니다.
쿼리 키는 안정적인 해시로 해시됩니다.
이 키가 변경되면 쿼리가 자동으로 업데이트 됩니다.(enabled가 false로 설정되지 않은 경우)

• queryFn: (context: QueryFunctionContext) => Promise<TData>
필수 속성, 하지만 기본 쿼리 함수가 정의되지 않은 경우에만 해당합니다.
쿼리가 데이터를 요청하는 데 사용하는 함수입니다.
응답 데이터 혹은 에러를 발생시키는 Promise를 반환해야 합니다.

useQuery | TanStack Query Docs

const { data,

https://tanstack.com/query/v3/docs/react/reference/useQuery

예제. useQuery

• Not Use react-query

// SuperHeroes.page.js
import { useState, useEffect } from "react";
import axios from "axios";

export const SuperHeroesPage = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:4000/superheroes")
      .then((res) => {
        setData(res.data);
        setIsLoading(false);
      })
  }, []);

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  return (
    <>
      <h2>Super Heroes Page</h2>
      {data.map((hero) => {
        return <div>{hero.name}</div>;
      })}
    </>
  );
};

• Use react-query

// RQSuperHeroes.page.js
import { useQuery } from "react-query";
import axios from "axios";

const fetchSuperHeroes = () => {
  return axios.get("http://localhost:4000/superheroes");
};

export const RQSuperHeroesPage = () => {
  const { isLoading, data } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
  );

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  return (
    <>
      <h2>React Query Super Heroes Page</h2>
      {data.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
};

• isLoading: boolean
데이터를 로딩중인지 판단하는 변수입니다.
로딩중이면 true, 아니면 false 입니다.

• data: TData
기본값은 undefined, 쿼리에 대해 성공적으로 응답받은 최신 데이터입니다.
 

4. Handling Query Error

예제. useQuery

• Not Use react-query

import { useState, useEffect } from "react";
import axios from "axios";

export const SuperHeroesPage = () => {
  const [isLoading, setIsLoading] = useState(true);
	// ✨new 
  const [error, setError] = useState("");
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:4000/superheroes")
      .then((res) => {
        setData(res.data);
        setIsLoading(false);
      }) // ✨new 
      .catch((error) => {
        setError(error.message);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

	// ✨new 
  if (error) {
    return <h2>{error}</h2>;
  }

  return (
    <>
      <h2>Super Heroes Page</h2>
      {data.map((hero) => {
        return <div>{hero.name}</div>;
      })}
    </>
  );
};

• Use react-query

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

const fetchSuperHeroes = () => {
  return axios.get("http://localhost:4000/superheroes");
};

export const RQSuperHeroesPage = () => {
	// ✨new 
  const { isLoading, data, isError, error } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
  );

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

	// ✨new 
  if (isError) {
    return <h2>{error.message}</h2>;
  }

  return (
    <>
      <h2>React Query Super Heroes Page</h2>
      {data.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
};

• isError: boolean
오류가 발생한지 상태를 판단하는 변수입니다.
에러가 발생하면 true, 아니면 false 입니다.

• error: null | TError
기본값은 null, 오류가 발생한 경우 쿼리에 대한 오류 객체입니다.

5. React Query Devtools

import { ReactQueryDevtools } from 'react-query/devtools'

• fresh : 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 → 컴포넌트가 마운트, 업데이트되어도 데이터 재요청 X

• fetching: 요청 중인 쿼리

• stale: 만료된 쿼리 → 컴포넌트가 마운트, 업데이트 되면 데이터 재요청

• inactive: 비활성화된 쿼리 → 캐시 시간이 지나면 가비지 컬렉터에 위해 제거

5-1. Floating Mode

import { QueryClient, QueryClientProvider } from "react-query";
// ✨new 
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
			// ✨new 
			<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
    </QueryClientProvider>
  );
}

export default App;

• initalIsOpen: Boolean
개발 도구가 기본적으로 열려 있도록 하려면 true로 설정

• panelProps: PropsObject
이 속성을 사용하여 패널에 props을 추가합니다. 예를 들어 className, style 등을 추가할 수 있습니다.

• closeButtonProps: PropsObject
이 속성을 사용하여 닫기 버튼에 props을 추가합니다. 예를 들어 className, style, onClick 등을 추가할 수 있습니다.

• toggleButtonProps: PropsObject
이 속성을 사용하여 토글 버튼에 props를 추가합니다.

• position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
기본값은 “bottom-left”, devtools 버튼의 위치를 설정합니다.

5-2. Embedded Mode

import { ReactQueryDevtoolsPanel } from 'react-query/devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtoolsPanel style={styles} className={className} />
    </QueryClientProvider>
  )
}

• style: StyleObject
인라인 스타일로 컴포넌트의 스타일을 지정하는 데 사용되는 표준 React 스타일 객체

• className: string
class로 컴포넌트의 스타일을 지정하는 데 사용되는 표준 React className 속성

Devtools | TanStack Query Docs

Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳 When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!

https://tanstack.com/query/v3/docs/react/devtools

6. Query Cache

예제. cache Time

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

const fetchSuperHeroes = () => {
  return axios.get("http://localhost:4000/superheroes");
};

export const RQSuperHeroesPage = () => {
	// ✨new
  const { isLoading, data, isError, error, isFetching } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
    // ✨new
    {
      cacheTime: 5000,
    }
  );

  console.log({ isLoading, isFetching });
  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  if (isError) {
    return <h2>{error.message}</h2>;
  }

  return (
    <>
      <h2>React Query Super Heroes Page</h2>
      {data.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
};

• cacheTime: number | Infinity
기본값은 5분으로 기본적으로 5분간 데이터를 캐싱한다.
unused/inactive 캐시 데티터가 메모리에 남아있는 시간입니다. 쿼리 캐시가 사용되지 않거나 비활성화되면 해당 캐시 데이터는 가비지에 수집됩니다.
Infinity로 설정하면 가비지 컬렉션이 비활성화됩니다.

• isFetching: boolean
백그라운드에서 refetch 하는 것 뿐만 아니라 초기 로드를 포함하여 요청이 진행 중일 때마다 true입니다.

7. Stale Time

예제. staleTime

export const RQSuperHeroesPage = () => {
  const { isLoading, data, isError, error, isFetching } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
    {
			 // ✨new
       staleTime: 30000,
    }
  );
};

• staleTime: number | Infinity
선택 사항이고 기본 값은 0이다.
데이터가 fresh → stale 상태로 변경되는데 걸리는 시간이다.
fresh 상태는 쿼리 인스턴스가 새롭게 mount되어도 refetch가 일어나지 않는다.
데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 unmount 후 mount 되어도 fetch가 일어나지 않는다.
Infinity로 설정하면 데이터가 오래되었다고 판단하지 않습니다. → refetch하지 않는다, 항상 fresh인 상태

[react query] stale이란? (feat, 캐싱,use query,fetch, react query에 대해 알아보)

React-Query의 캐싱개념은 stale과 cachetime을 통해 이루어진다 Stale과 cacheTime은 무엇인지 먼저 알아보자. | Stale 이란? react query는 기본적으로 캐싱된 data를 stale한 상태로 여긴다. stale의 사전적 의미는 "신선하지 않는"이라는 뜻을 가진다. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 이미 오래된 낡은 데이터가 되었으므로 stale하다고 말하는 것이다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. refetch 되는 조건들을 확인해보자. 1. 새로운 query inst..

https://2ham-s.tistory.com/407

7-1. Stale Time과 cache Time의 차이점

• Stale Time
데이터가 fresh 상태에서 stale 상태로 변경되는데 걸리는 시간을 말한다. fresh 상태일때는 페이지를 이동했다가 돌아왔을 경우에도 fetch가 일어나지 않는다.
즉, 데이터가 한번 fetch 되고 staleTIme이 지나지 않았다면 unmount 후 mount가 발생해도 다시 fetch가 발생하지 않는다.
 
default 값이 0이기 때문에 받아오는 즉지 stale하다고 판단해서 캐싱 데이터와는 무관하게 계속 fetching을 수행한다. 그러므로 staleTime을 지정하지 않고 사용한다면 React Query의 캐싱 기능을 활용할 수 없다.
자주 변경되는 데이터라면 지정하지 않는 편이 좋지만, 정적인 데이터 또는 자주 변경될 필요가 없는 데이터라면 staleTime을 지정해서 서버의 부담을 줄여주는 것이 좋다.

• cacheTime
데이터가 inactive 상태일 때 캐싱된 상태로 남아있는 시간을 말한다.
쿼리 인스턴스가 unmount되면 데이터는 inactive 상태로 변경되며, 캐시는 cacheTime 만큼 유지된다. 이걸 cacheTime 만큼 유지시키는 이유는 쿼리 인스턴스가 다시 마운트되면 데이터를 fatch하는 동안 cacheTime이 지나지 않은 캐시 데이터를 보여준다.
cacheTime이 지나면 가비지 콜렉터로 삭제가 된다.
 

8. Refetch Defaults

예제. refetchOn

export const RQSuperHeroesPage = () => {
  const { isLoading, data, isError, error, isFetching } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
    {
			 // ✨new
       refetchOnMount: true,
			 refetchOnWindowFocus: true,
    }
  );
};

• refetchOnMount: boolean | "always" | ((query: Query) => boolean | "always")
선택사항이고 기본 값은 true이다.
true로 설정하면 데이터가 stale 경우 쿼리가 마운트 시 다시 가져온다.
false로 설정하면 마운트 시 쿼리를 다시 가져오지 않습니다. ( 이전 데이터를 가져옴 )
always로 설정하면 마운트 시 쿼리는 항상 다시 가져온다.
함수로 설정하면 쿼리와 함께 함수가 실행되어 값을 계산한다.

• refetchOnWindowFocus: boolean | "always" | ((query: Query) => boolean | "always")
선택사항이고 기본 값은 true이다.
true로 설정하면 쿼리가 stale 경우 창을 포커스 할 때 데이터를 다시 가져온다.
false로 설정하면 쿼리를 창을 포커스 할 때 데이터를 다시 가져오지 않는다.
always로 설정하면 쿼리는 항상 창을 포커스할 때 다시 가져온다.
함수로 설정하면 쿼리와 함께 함수가 실행되어 값을 계산한다.

9. Polling

예제. refetchInterval

export const RQSuperHeroesPage = () => {
  const { isLoading, data, isError, error, isFetching } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
    {
			 // ✨new
       refetchInterval: 2000,
	     refetchIntervalInBackground: true,
    }
  );
};

• refetchInterval: number | false | ((data: TData | undefined, query: Query) => number | false)
선택사항이고, 숫자로 설정하면 모든 쿼리가 ms단위로 지속적으로 다시 가져온다.
함수로 설정하면 최신 데이터와 쿼리로 함수를 실행하여 빈도를 계산한다.

• refetchIntervalInBackground: boolean
선택사항이고, true로 설정하면 refetchInterval을 사용하여 지속적으로 다시 가져오도록 설정된 쿼리는 탭/창이 백그라운드에 있는 동안 계속 다시 가져옵니다.

10. useQuery on click

예제. refetch, enabled

export const RQSuperHeroesPage = () => {
  const { isLoading, data, isError, error, isFetching, refetch } = useQuery(
    "super-heroes",
    fetchSuperHeroes,
    {
			// ✨new
      enabled: false,
    }
  );
  return (
    <>
      <h2>React Query Super Heroes Page</h2>
			// ✨new
      <button onClick={refetch}>Fetch heroes</button>
      {data?.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
};

• enabled: boolean
쿼리가 자동으로 실행되지 않도록 하려면 이것을 false로 설정한다.

• refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>
쿼리를 수동으로 다시 가져오는 기능이다.
쿼리 오류인 경우 오류만 기록된다. 오류를 발생시키려면 throwOnError: true 옵션을 지정해주면 된다.

마무리

느낀점

References

react-query

react-query는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다.

https://velog.io/@jkl1545/React-Query