tanstackQuery딥다이브-1

// Provider.tsx
'use client';

import React from 'react';

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

type Props = {
  children: React.ReactNode;
};

function Providers({ children }: Props) {
  const [client] = React.useState(
    new QueryClient()
  );

  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
}

export default Providers;

export const QueryClientProvider = ({
  client,
  children,
  context,
  contextSharing = false,
}: QueryClientProviderProps): JSX.Element => {
  React.useEffect(() => {
    client.mount()
    return () => {
      client.unmount()
    }
  }, [client])

  const Context = getQueryClientContext(context, contextSharing)

  return (
    <QueryClientSharingContext.Provider value={!context && contextSharing}>
      <Context.Provider value={client}>{children}</Context.Provider>
    </QueryClientSharingContext.Provider>
  )
}

type QueryClientProviderPropsBase = {
  client: QueryClient
  children?: React.ReactNode
}

export interface ContextOptions {
  /**
   * Use this to pass your React Query context. Otherwise, `defaultContext` will be used.
   */
  context?: React.Context<QueryClient | undefined>
}

function getQueryClientContext(
  context: React.Context<QueryClient | undefined> | undefined,
  contextSharing: boolean,
) {
  if (context) {
    return context
  }
  if (contextSharing && typeof window !== 'undefined') {
    if (!window.ReactQueryClientContext) {
      window.ReactQueryClientContext = defaultContext
    }

    return window.ReactQueryClientContext
  }

  return defaultContext
}

constructor(config: QueryClientConfig = {}) {
    this.queryCache = config.queryCache || new QueryCache()
    this.mutationCache = config.mutationCache || new MutationCache()
    this.defaultOptions = config.defaultOptions || {}
    this.queryDefaults = []
    this.mutationDefaults = []
    this.mountCount = 0
}

build<TQueryFnData, TError, TData, TQueryKey extends QueryKey>(
  client: QueryClient,
  options: QueryOptions<TQueryFnData, TError, TData, TQueryKey>,
  state?: QueryState<TData, TError>,
): Query<TQueryFnData, TError, TData, TQueryKey> {
  const queryKey = options.queryKey!
  const queryHash =
    options.queryHash ?? hashQueryKeyByOptions(queryKey, options)
  let query = this.get<TQueryFnData, TError, TData, TQueryKey>(queryHash)

  if (!query) {
    query = new Query({
      cache: this,
      logger: client.getLogger(),
      queryKey,
      queryHash,
      options: client.defaultQueryOptions(options),
      state,
      defaultOptions: client.getQueryDefaults(queryKey),
    })
    this.add(query)
  }

  return query
}

 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,
      })
    }
  }

notify(event: QueryCacheNotifyEvent) {
    notifyManager.batch(() => {
      this.listeners.forEach(({ listener }) => {
        listener(event)
      })
    })
}

getQueryData<TQueryFnData = unknown>(
    queryKey: QueryKey,
    filters?: QueryFilters,
  ): TQueryFnData | undefined {
    return this.queryCache.find<TQueryFnData>(queryKey, filters)?.state.data
}

const observer = new QueryObserver(queryClient, { queryKey:['posts'] }

import { notifyManager } from './notifyManager'
import { focusManager } from './focusManager'
import { Subscribable } from './subscribable'
import { fetchState } from './query'

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

type Listener = () => void

export class Subscribable<TListener extends Function = Listener> {
  //현재 구독된 리스너들을 저장하는 Set이다.
  //중복된 리스너의 추가를 막아준다.
  protected listeners: Set<TListener>

  //리스너들을 저장할 set을 초기화
  constructor() {
    this.listeners = new Set()
    this.subscribe = this.subscribe.bind(this)
  }
  
  //리스너가 추가되면 onSubscribr메서드를 호출해준다.
  subscribe(listener: TListener): () => void {
    this.listeners.add(listener)

    this.onSubscribe()
    
    //반환값으로 리스너를 제거해주고 onUnsubscribe를 호출하는 함수 혼
    return () => {
      this.listeners.delete(listener)
      this.onUnsubscribe()
    }
  }
  //현재 구독된 리스너가 있는지 여
  hasListeners(): boolean {
    return this.listeners.size > 0
  }

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

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

function batch<T>(callback: () => T) : T

type BatchCallsCallback<T extends Array<unknown>> = (...args: T) => void

function batchCalls<T extends Array<unknown>>(
  callback: BatchCallsCallback<T>,
): BatchCallsCallback<T>

function schedule(callback: () => void): void

import { notifyManager } from '@tanstack/react-query'
import { act } from 'react-dom/test-utils'

notifyManager.setNotifyFunction(act)

import { notifyManager } from '@tanstack/query-core'
import { batch } from 'solid-js'

notifyManager.setBatchNotifyFunction(batch)

import { notifyManager } from '@tanstack/react-query'

// 다음 마이크로태스크에서 배치를 스케줄링
notifyManager.setScheduler(queueMicrotask)

// 다음 프레임이 렌더링되기 전에 배치를 스케줄링
notifyManager.setScheduler(requestAnimationFrame)

// 미래의 어느 시점에서 배치를 스케줄링
notifyManager.setScheduler((cb) => setTimeout(cb, 10))