react query

React Query

React 애플리케이션에서 서버 state를 fetching, caching, synchronizing, updating할 수 있도록 도와주는 라이브러리 "global state"를 건드리지 않고 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트합니다.

// Create a client
const queryClient = new QueryClient()

// Provide the client to your App
QueryClientProvider client={queryClient}

url: https://react-query.tanstack.com/quick-start

Queries

쿼리는 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 메서드 포함)와 함께 사용할 수 있습니다. 제공한 고유 키는 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하는 데 내부적으로 사용됩니다. useQuery에서 반환된 쿼리 결과에는 템플릿 및 기타 데이터 사용에 필요한 쿼리에 대한 모든 정보가 포함되어 있습니다.

const result = useQuery('todos', fetchTodoList)

url
https://react-query.tanstack.com/guides/queries
https://react-query.tanstack.com/reference/useQuery#_top

Query Key

핵심적으로 React Query는 쿼리 키를 기반으로 쿼리 캐싱을 관리합니다. 쿼리 키는 문자열처럼 단순할 수도 있고 많은 문자열과 중첩 개체의 배열처럼 복잡할 수도 있습니다.

const result = useQuery(['todos', todoId], () => fetchTodoById(todoId));

url https://react-query.tanstack.com/guides/query-keys

React Query Devtools

React Query의 모든 내부 작동을 시각화하는 데 도움이 되며 문제가 발생하면 디버깅 시간을 절약할 수 있습니다!
기본적으로 React Query Devtools는 process.env.NODE_ENV === 'development'인 경우에만 번들에 포함되므로 프로덕션 빌드 중에 제외하는 것에 대해 걱정할 필요가 없습니다.

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

< ReactQueryDevtools initialIsOpen={false} / >

url: https://react-query.tanstack.com/devtools#_top

Grip 개인과제에서 쓴 코드

suspense와 error boundary를 쓰기 때문에 초기 설정을 다음과 같이 설정 하였다.

// 초기 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      useErrorBoundary: true,
    },
  },
})

keyword가 없을시 작동이 안되게 설정 하였으며 다음 페이지가 넘어가기 전에까지 전 데이터가 유지하기 원하기 때문에 keepPreviousData true로 설정하였다.

const { data, isFetching, refetch, isPreviousData } = useQuery(
    ['movies', { keyword, page }],
    () => getMoviesApi({ page, keyword }),
    {
      enabled: !!keyword,
      keepPreviousData: true,
    }
  )

data && data.response ? (
	data.search.map((movie, movieIndex) => {
    	const key = `${movie.imdbId}-${movieIndex + prevMovies.length}`
    	return <Movie key={key} movie={movie} />
    })