Next action:

• useQuery 사용법에 대해 조사해서 공유해오기
  • useQuery는 무엇인고 어떻게 사용하는지
  • 다른 곳에서는 useQuery를 어떻게 쓰고 있는지
  • 우리는 어떤 폴더 구조를 가지고 useQuery를 쓰면 좋을지

[React Query] useQuery 동작원리(1)

1. useQuery는 무엇인고 어떻게 사용하는지

• react-query의 핵심 hook으로, 서버상태를 관리하기 위한 선언적 방법을 제공.
• 기본 사용방법

function useQuery (
	queryKey: QueryKey,
	queryFn: QueryFunction,
	options?: UseQueryOptions
): UseQueryResult
--------------------------------------------------------------------
--------------------------------------------------------------------
// 1. useQuery 호출
const result = useQuery(['todos'], fetchTodos)

// 2. 내부적으로 Query 인스턴스 생성
const query = new Query({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  ...options
})
// 3. QueryCache에 쿼리 추가
queryClient.getQueryCache().add(query)

• react-query의 사용

core에는 핵심 객체 4개가 아주 중요하다

QueryClient , QueryCache, Query, QueryObserver

// _app.tsx

import { QueryClient } from '@tanstack/query-core';
import { QueryClientProvider } from '@tanstack/react-query';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

1. QueryClient

   • context api를 통해 전역적으로 사용할 수 있는 객체
   • QueryClientProvider 의 client로 넘겨주어 전역에서 사용할 수 있게 만들어짐.
   • 생성되면서 QueryCache 객체를 가지고있음.

2. QueryCache

   • queries 배열과 queriesMap 객체에 Query 객체들을 저장함.
   • useQuery() 인자로 넘겨준 queryKey를 이용해 queryHash를 만들고 queriesMap 객체의 key로써 사용됨. 그리고 value로 Query 객체가 저장됨

   export class QueryCache extends Subscribable<QueryCacheListener>{
   	config: QueryCacheConfig
   	
     private queries: Query<any, any, any, any>[]
     private queriesMap: QueryHashMap
     
     add(query: Query<any, any, any, any>): void {
       if (!this.queriesMap[query.queryHash]) {
         this.queriesMap[query.queryHash] = query
         this.queries.push(query)
         this.notify({
           type: 'added',
           query,
         })
       }
     }
   }
   

3. Query

   • 자신을 가지고있는 QueryCache와 자신의 상태가 변경되었을때 호출할 옵저버들을 가짐
   • 구독요청이 들어오면 this.observers에 옵저버가 추가되어 상태가 변경되면 등록된 옵저버들을 호출.
   • this.state에는 data, isLoading, isFetching등 useQuery()를 통해 얻을 수 있는 정보가 있음.

4. QueryObserver

   • QueryClient와 Query객체를 가지게됨
   • 구독 요청이 들어오면, Query객체에 옵저버로 QueryObserver가 등록ㅇ

   export class QueryObserver<...> extends Subscribable<QueryObserverListener<TData, TError>> {
     ...
     constructor(
       client: QueryClient,
       options: QueryObserverOptions<...>
     ) {
       super()
   
       this.client = client
       ...
       this.trackedProps = new Set()
       ...
     }
     ...
     protected onSubscribe(): void {
       if (this.listeners.length === 1) {
         this.currentQuery.addObserver(this)
   
         if (shouldFetchOnMount(this.currentQuery, this.options)) {
           this.executeFetch()
         }
         ...
       }
     }
     ...
     private updateQuery(): void {
       const query = this.client.getQueryCache().build(this.client, this.options)
   
       if (query === this.currentQuery) {
         return
       }
   
       this.currentQuery = query
       ...
     }
   }