yarn add @tanstack/react-query

@tanstack
  ├── query-core
  │     ├── notifyManager.ts
  │     ├── query.ts
  │     ├── queryCache.ts
  │     ├── queryClient.ts
  │     └── queryObserver.ts
  │
  └── react-query
        ├── useBaseQuery.ts
        └── useQuery.ts

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

// QueryClient 인스턴스 생성
const queryClient = new QueryClient()

function App() {
  return (
    // 리액트 앱에 적용시키기
    <QueryClientProvider client={queryClient}>
      <RestOfYourApp />
    </QueryClientProvider>
  )
}

export class QueryClient {
  #queryCache: QueryCache
  #mutationCache : MutationCache
  #defaultOptions : DefaultOptions
  #queryDefaults : Map<string, QueryDefaults>
  #mutationDefaults : Map<string, MutationDefaults>
  #mountCount : number
  #unsubscribeFocus?: () => void
  #unsubscribeOnline? : () => void

  constructor(config: QueryClientConfig = {}) {
    this.#queryCache = config.queryCache || new QueryCache()
    //이하 생략
  }

interface QueryCacheconfig {
    onError?: (
        error: DefaultError,
        query: Query<unknown, unknown, unknown>,
    ) => void
    onSuccess?: (data: unknown, query: QueryQuery<unknown, unknown, unknown>) => void
    onSettled?: (
        data: unknown | undefined,
        error: DefaultError | null,
        query: Query<unknown, unknown, unknown>,
    ) => void
}

export interface QueryStore {
    has: (queryHash: string) => boolean
    set: (queryHash: string, query : Query) => void
    get: (queryHash: string) => Query | undefined
    delete: (queryHash: string) => void
}

// CLASS

export class QueryCache extends Subscribable<QueryCacheListener> {
  #queries: QueryStore

  constructor(public config: QueryCacheConfig = {}) {
    super()
    this.queries = new Map<string, Query>()
  }
  ...
  add(query: Query<any, any, any, any>): void {
    if (!this.#queries.has(query.queryHash)) {
      this.#queries.set(query.queryHash, query)
      this.notify({
        type: 'added',
        query,
      })
    }
  }
  ...
}

export class Query<

  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
> extends Removable {
  queryKey: TQueryKey
  queryHash: string
  options!: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
  state: QueryState<TData, TError>
  isFetchingOptimistic?: boolean
 
  #initialState: QueryState<TData, TError>
  #revertState?: QueryState<TData, TError>
  #cache: QueryCache
  #retryer?: Retryer<TData>
  observers: Array<QueryObserver<any, any, any, any, any>>
  #defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
  #abortSignalConsumed: boolean

  constructor(config: QueryConfig<TQueryFnData, TError, TData, TQueryKey>) {

    super()
    this.observers = []
    this.#cache = config.cache
    this.queryKey = config.queryKey
    this.queryHash = config.queryHash
    this.#initialState = getDefaultState(this.options)
    this.state = config.state ?? this.#initialState
    ...
}

export class QueryObserver<
  TQueryFnData = unknown,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
> extends Subscribable<QueryObserverListener<TData, TError>> {
    super()

    this.#client = client
    this.#selectError = null
    this.bindMethods()
    this.setOptions(options)
   ...
    #trackedProps = new Set<keyof QueryObserverResult>()

    protected onSubscribe(): void {
      if (this.listeners.size === 1) {
        this.#currentQuery.addObserver(this)

        if (shouldFetchOnMount(this.#currentQuery, this.options)) {
          this.#executeFetch()
        } else {
          this.updateResult()
        }
        this.#updateTimers()
      }
    }

  ...

    #updateQuery(): void {
      const query = this.#client.getQueryCache().build(this.#client, this.options)

      if (query === this.#currentQuery) {
        return
      }

      const prevQuery = this.#currentQuery as
        | Query<TQueryFnData, TError, TQueryData, TQueryKey>
        | undefined
      this.#currentQuery = query
      this.#currentQueryInitialState = query.state

      if (this.hasListeners()) {
        prevQuery?.removeObserver(this)
        query.addObserver(this)
      }
    }
  ...

}

export function createNotifyManager() {

  let queue: Array<NotifyCallback> = []
  let transactions = 0
  let notifyFn: NotifyFunction = (callback) => {
    callback()
  }
  let batchNotifyFn: BatchNotifyFunction = (callback: () => void) => {
    callback()
  }
  let scheduleFn: ScheduleFunction = (cb) => setTimeout(cb, 0)
  const setScheduler = (fn: ScheduleFunction) => {
    scheduleFn = fn
  }

  const batch = <T>(callback: () => T): T => {
  ...
  }

  const schedule = (callback: NotifyCallback): void => {
  ...
  }
 
  const batchCalls = <T extends Array<unknown>>(
    callback: BatchCallsCallback<T>,
  ): BatchCallsCallback<T> => {
  ...
  }

  const flush = (): void => {
  ...
  }

  return {
    batch,
    batchCalls,
    schedule,
    ...
  } as const

}

// SINGLETON

export const notifyManager = createNotifyManager()

import axios from 'axios';
import { useQuery } from '@tanstack/react-query';

const DanalComponent = () => {
  const { isLoading, error, data, isFetching } = useQuery({
    queryKey: ['danalData'],
    queryFn: () =>
      axios
        .get('<https://danal.api.com/api/v1/test>')
        .then((res) => {
          return res.data;
        }),
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>An error has occurred: + {error.message}</div>;
  return (<div>{JSON.stringify(data)}</div>)
};

export default DanalComponent;

export function useQuery<
  TQueryFnData,
  TError = DefaultError,
  TData = TQueryFnData,
  TQueryKey extends QueryKey = QueryKey,
>(
  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>,
  queryClient?: QueryClient
): UseQueryReturnType<TData, TError> | UseQueryDefinedReturnType<TData, TError> {
  return useBaseQuery(QueryObserver, options, queryClient)
}

export function useBaseQuery(options, Observer) {
  const queryClient = useQueryClient({ context: options.context })
  const defaultedOptions = queryClient.defaultQueryOptions(options)

  const [observer] = React.useState(() => new Observer(queryClient, defaultedOptions))
  const result = observer.getOptimisticResult(defaultedOptions)

  useSyncExternalStore(
    React.useCallback(
      (onStoreChange) => {
        const unsubscribe = observer.subscribe(notifyManager.batchCalls(onStoreChange))
        // Update result to make sure we did not miss any query updates
        // between creating the observer and subscribing to it.
        observer.updateResult()
        return unsubscribe
      },
      [observer]
    ),
    () => observer.getCurrentResult(),
    () => observer.getCurrentResult()
  )
  // Handle result property usage tracking
  return !defaultedOptions.notifyOnChangeProps ? observer.trackResult(result) : result
}

export class Subscribable<TListener extends Function> {
  protected listeners = new Set<TListener>()

  constructor() {
    this.subscribe = this.subscribe.bind(this)
  }

  subscribe(listener: TListener): () => void {
    this.listeners.add(listener)
    this.onSubscribe()

    return () => {
      this.listeners.delete(listener)
      this.onUnsubscribe()
    }
  }

  hasListeners(): boolean {
    return this.listeners.size > 0
  }

  protected onSubscribe(): void {
    // Do nothing
  }

  protected onUnsubscribe(): void {
    // Do nothing
  }
}

export class QueriesObserver<
  TCombinedResult = Array<QueryObserverResult>,
> extends Subscribable<QueriesObserverListener> {

  constructor() {}
  ...
  #notify(): void {
    notifyManager.batch(() => {
      this.listeners.forEach((listener) => {
        listener(this.#result)
      })
    })
  }
}