TIL48-01 ReactQuery- QueryClient, 여러개의 쿼리 호출시 data 처리

QueryClient

• React Query 인스턴스는 QueryClient 클래스를 사용하여 생성할 수 있습니다. 아래는 React 애플리케이션에서 QueryClient 인스턴스를 생성하는 예시 코드입니다.

import { QueryClient, QueryClientProvider } from 'react-query'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 여기에 React 컴포넌트를 작성합니다. */}
    </QueryClientProvider>
  )
}

• 위 코드에서 QueryClient 클래스의 생성자를 호출하여 QueryClient 인스턴스를 생성합니다. 이후, QueryClientProvider 컴포넌트의 client prop에 생성한 queryClient 인스턴스를 전달하여, 애플리케이션 전체에서 사용할 수 있도록 합니다.

• QueryClient 인스턴스를 생성한 후, queryClient 객체를 이용하여 쿼리를 등록하고 캐시를 관리할 수 있습니다. 예를 들어, queryClient.query 메서드를 사용하여 새로운 쿼리를 등록할 수 있습니다. 이를 이용하여, React 컴포넌트에서 쉽게 쿼리를 호출하고 결과를 처리할 수 있습니다.

여러개의 쿼리가 호출 될 때

• React Query에서는 여러 개의 쿼리를 호출하고, 각각의 쿼리 결과를 처리하는 것이 가능합니다. 이를 위해서는 각각의 쿼리에 대한 결과 데이터를 적절히 관리해야 합니다.

• 가장 간단한 방법은, 각각의 쿼리에 대한 데이터를 별도의 변수에 저장하는 것입니다. 예를 들어, 아래와 같이 여러 개의 쿼리를 호출하고, 각각의 쿼리 결과를 변수에 저장할 수 있습니다.

import { useQuery } from 'react-query'

function MyComponent() {
  const { data: users } = useQuery('users', fetchUsers)
  const { data: posts } = useQuery('posts', fetchPosts)
  const { data: comments } = useQuery('comments', fetchComments)

  // 이후에 users, posts, comments 변수를 이용하여 결과 데이터를 처리합니다.
  // ...
}

• 위 코드에서는 useQuery 훅을 사용하여 각각의 쿼리를 호출하고, data 속성을 이용하여 각각의 결과 데이터를 저장합니다. 이후에는 각각의 결과 데이터를 처리하는 방법은, 일반적인 JavaScript 객체를 처리하는 것과 동일합니다.

• 하지만, 위와 같은 방식으로 각각의 쿼리 결과를 저장하는 경우, 관리해야 할 변수의 수가 증가하여 코드의 복잡도가 증가할 수 있습니다.

• 이러한 경우에는 useQueries 훅을 사용하여 여러 개의 쿼리를 한 번에 호출하고, 결과를 처리할 수 있습니다. useQueries 훅은 여러 개의 쿼리를 배열로 전달하여, 각각의 쿼리 결과를 배열로 반환합니다.

useQureies

import { useQueries } from 'react-query'

function MyComponent() {
  const queries = [
    { queryKey: 'users', queryFn: fetchUsers },
    { queryKey: 'posts', queryFn: fetchPosts },
    { queryKey: 'comments', queryFn: fetchComments },
  ]

  const results = useQueries(queries)

  // 이후에 results 배열을 이용하여 각각의 쿼리 결과 데이터를 처리합니다.
  // ...
}

• 위 코드에서는 useQueries 훅을 사용하여 queries 배열에 저장된 각각의 쿼리를 호출하고, 결과를 results 배열로 저장합니다. 이후에는 results 배열을 이용하여 각각의 쿼리 결과 데이터를 처리할 수 있습니다. 이 방식은 코드의 가독성을 향상시키며, 관리해야 할 변수의 수를 줄일 수 있습니다.