Building a Minimal useQuery Hook with a Shared Cache Provider in React

import React, { createContext, useContext, useRef } from 'react';
import { QueryCache } from './QueryCache';

const QueryContext = createContext(null);

export function QueryProvider({ children, cache }) {
  const cacheRef = useRef(cache || new QueryCache());
  return (
    <QueryContext.Provider value={cacheRef.current}>
      {children}
    </QueryContext.Provider>
  );
}

export function useQueryClient() {
  const cache = useContext(QueryContext);
  if (!cache) {
    throw new Error('useQueryClient must be used within a <QueryProvider>');
  }
  return cache;
}

import { useCallback, useEffect, useSyncExternalStore } from 'react';
import { useQueryClient } from './QueryProvider';

export function useQuery(queryKey, queryFn, options = {}) {
  const { enabled = true } = options;
  const cache = useQueryClient();
  const key = JSON.stringify(queryKey);

  const subscribe = useCallback(
    (listener) => cache.subscribe(key, listener),
    [cache, key]
  );

  const getSnapshot = useCallback(
    () => cache.getEntry(key),
    [cache, key]
  );

  const entry = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

  const refetch = useCallback(
    () => cache.fetchQuery(key, () => queryFn(queryKey)),
    [cache, key, queryFn, queryKey]
  );

  useEffect(() => {
    if (!enabled) return;
    refetch().catch(() => {});
  }, [enabled, refetch]);

  return {
    data: entry.data,
    error: entry.error,
    status: entry.status,
    isLoading: entry.status === 'loading' && entry.data === undefined,
    isFetching: entry.status === 'loading',
    refetch,
  };
}

import React from 'react';
import { useQuery } from './useQuery';

async function fetchUser([, userId]) {
  const res = await fetch(`/api/users/${userId}`);
  if (!res.ok) throw new Error(`Failed to load user ${userId}`);
  return res.json();
}

export function UserProfile({ userId }) {
  const { data, error, isLoading, isFetching, refetch } = useQuery(
    ['user', userId],
    fetchUser
  );

  if (isLoading) return <p>Loading…</p>;
  if (error) return <p role="alert">{error.message}</p>;

  return (
    <section>
      <h2>{data.name}</h2>
      <p>{data.email}</p>
      <button onClick={refetch} disabled={isFetching}>
        {isFetching ? 'Refreshing…' : 'Refresh'}
      </button>
    </section>
  );
}