@tanstack/solid-query 6.0.0-beta.7 → 6.0.0-rc.0

package/build/index.js

@@ -1,9 +1,161 @@
-import { MutationObserver, shouldThrowError, QueriesObserver, QueryClient as QueryClient$1, replaceEqualDeep, noop, notifyManager, QueryObserver, InfiniteQueryObserver } from '@tanstack/query-core';
+import { MutationObserver, shouldThrowError, QueriesObserver, QueryClient as QueryClient$1, replaceEqualDeep, noop, hydrate, notifyManager, QueryObserver, InfiniteQueryObserver } from '@tanstack/query-core';
 export * from '@tanstack/query-core';
-import { createContext, useContext, onCleanup, createMemo, untrack, createRenderEffect, createStore, runWithOwner, merge, createEffect, reconcile, createSignal, isPending, refresh, snapshot } from 'solid-js';
+import { createContext, useContext, onCleanup, createSignal, createRenderEffect, createMemo, untrack, createStore, runWithOwner, merge, createEffect, reconcile, isPending, refresh, snapshot } from 'solid-js';
 import { createComponent } from '@solidjs/web';
 
 // src/useQuery.ts
+function createServerDehydrationChannel(client) {
+  const cache = client.getQueryCache();
+  const entryCache = /* @__PURE__ */ new Map();
+  const snapshot2 = () => {
+    const entries = [];
+    for (const query of cache.getAll()) {
+      if (query.state.status !== "success") continue;
+      let cached = entryCache.get(query.queryHash);
+      if (!cached || cached.state !== query.state) {
+        cached = {
+          state: query.state,
+          entry: {
+            dehydratedAt: Date.now(),
+            state: query.state,
+            queryKey: query.queryKey,
+            queryHash: query.queryHash,
+            ...query.meta && { meta: query.meta },
+            ...query.queryType && { queryType: query.queryType }
+          }
+        };
+        entryCache.set(query.queryHash, cached);
+      }
+      entries.push(cached.entry);
+    }
+    return entries;
+  };
+  let closed = false;
+  let pull = null;
+  const buffered = [];
+  const emit = (value) => {
+    if (closed) return;
+    if (value.done) closed = true;
+    if (pull) {
+      const resolve = pull;
+      pull = null;
+      resolve({ done: false, value });
+    } else {
+      buffered.push(value);
+    }
+  };
+  let closeTimer = null;
+  const scheduleCloseCheck = () => {
+    if (closed || closeTimer !== null) return;
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
+      if (closed) return;
+      if (client.isFetching() === 0) {
+        unsubscribe();
+        emit({ entries: snapshot2(), done: true });
+      }
+    }, 0);
+  };
+  const unsubscribe = cache.subscribe((event) => {
+    if (closed) return;
+    if (event.type === "updated" && event.action.type === "success") {
+      emit({ entries: snapshot2(), done: false });
+    }
+    scheduleCloseCheck();
+  });
+  scheduleCloseCheck();
+  return {
+    [Symbol.asyncIterator]() {
+      return {
+        next() {
+          if (buffered.length > 0) {
+            return Promise.resolve({ done: false, value: buffered.shift() });
+          }
+          if (closed) {
+            return Promise.resolve({
+              done: true,
+              value: void 0
+            });
+          }
+          return new Promise(
+            (resolve) => {
+              pull = resolve;
+            }
+          );
+        },
+        return(value) {
+          if (!closed) {
+            closed = true;
+            unsubscribe();
+            if (closeTimer !== null) {
+              clearTimeout(closeTimer);
+              closeTimer = null;
+            }
+            const resolve = pull;
+            pull = null;
+            resolve?.({ done: true, value: void 0 });
+          }
+          return Promise.resolve({
+            done: true,
+            value
+          });
+        }
+      };
+    }
+  };
+}
+function createHydrationCoordinator(client) {
+  const applied = /* @__PURE__ */ new Map();
+  const waiters = /* @__PURE__ */ new Map();
+  let channelDone = false;
+  const fireWaiters = (queryHash) => {
+    const callbacks = waiters.get(queryHash);
+    if (!callbacks) return;
+    waiters.delete(queryHash);
+    for (const callback of callbacks) queueMicrotask(callback);
+  };
+  return {
+    applyYield(value) {
+      const fresh = value.entries.filter(
+        (entry) => applied.get(entry.queryHash) !== entry.state.dataUpdatedAt
+      );
+      if (fresh.length > 0) {
+        runWithOwner(
+          null,
+          () => hydrate(client(), { queries: fresh, mutations: [] })
+        );
+        for (const entry of fresh) {
+          applied.set(entry.queryHash, entry.state.dataUpdatedAt);
+          fireWaiters(entry.queryHash);
+        }
+      }
+      if (value.done && !channelDone) {
+        channelDone = true;
+        const remaining = [...waiters.values()];
+        waiters.clear();
+        for (const callbacks of remaining) {
+          for (const callback of callbacks) queueMicrotask(callback);
+        }
+      }
+    },
+    whenQueryPrimed(queryHash, callback) {
+      if (channelDone || applied.has(queryHash)) {
+        queueMicrotask(callback);
+        return;
+      }
+      let list = waiters.get(queryHash);
+      if (!list) {
+        list = [];
+        waiters.set(queryHash, list);
+      }
+      list.push(callback);
+    }
+  };
+}
+var HydrationCoordinatorContext = createContext(null);
+
+// src/QueryClientProvider.tsx
+var isServer = typeof window === "undefined";
 var QueryClientContext = createContext(null);
 var useQueryClient = (queryClient) => {
   if (queryClient) {
@@ -18,10 +170,22 @@ var useQueryClient = (queryClient) => {
 var QueryClientProvider = (props) => {
   props.client.mount();
   onCleanup(() => props.client.unmount());
+  const [channelValue] = createSignal(() => isServer ? createServerDehydrationChannel(props.client) : void 0);
+  const coordinator = isServer ? null : createHydrationCoordinator(() => props.client);
+  createRenderEffect(() => isServer ? void 0 : channelValue(), (value) => {
+    if (value && coordinator) {
+      coordinator.applyYield(value);
+    }
+  });
   return createComponent(QueryClientContext, {
     value: () => props.client,
     get children() {
-      return props.children;
+      return createComponent(HydrationCoordinatorContext, {
+        value: coordinator,
+        get children() {
+          return props.children;
+        }
+      });
     }
   });
 };
@@ -29,9 +193,9 @@ var IsRestoringContext = createContext(() => false);
 var useIsRestoring = () => useContext(IsRestoringContext);
 
 // src/useBaseQuery.ts
-var isServer = typeof window === "undefined";
+var isServer2 = typeof window === "undefined";
 function _stripFnsForSSR(obj) {
-  if (!isServer) return obj;
+  if (!isServer2) return obj;
   const out = {};
   for (const k of Object.keys(obj)) {
     if (k === "refetch" || k === "fetchNextPage" || k === "fetchPreviousPage") {
@@ -62,8 +226,8 @@ function reconcileFn(store, result, reconcileOption, queryHash) {
   }
   return { ...result, data };
 }
-var hydratableObserverResult = (query, result) => {
-  if (!isServer) return result;
+var hydratableObserverResult = (_query, result) => {
+  if (!isServer2) return result;
   const obj = {
     ...snapshot(result),
     // During SSR, functions cannot be serialized, so we need to remove them
@@ -74,12 +238,6 @@ var hydratableObserverResult = (query, result) => {
     obj.fetchNextPage = void 0;
     obj.fetchPreviousPage = void 0;
   }
-  obj.hydrationData = {
-    state: query.state,
-    queryKey: query.queryKey,
-    queryHash: query.queryHash,
-    ...query.meta && { meta: query.meta }
-  };
   return obj;
 };
 function useBaseQuery(options, Observer, queryClient) {
@@ -90,7 +248,7 @@ function useBaseQuery(options, Observer, queryClient) {
     const defaultOptions = client().defaultQueryOptions(options());
     defaultOptions._optimisticResults = isRestoring() ? "isRestoring" : "optimistic";
     defaultOptions.structuralSharing = false;
-    if (isServer) {
+    if (isServer2) {
       defaultOptions.retry = false;
       defaultOptions.throwOnError = true;
       defaultOptions.experimental_prefetchInRender = true;
@@ -162,11 +320,25 @@ function useBaseQuery(options, Observer, queryClient) {
   }
   let unsubscribe = null;
   let disposed = false;
+  const coordinator = useContext(HydrationCoordinatorContext);
+  const attachHydratedSubscriber = () => {
+    if (!unsubscribe && !disposed && !isRestoring()) {
+      unsubscribe = createClientSubscriber();
+    }
+  };
+  const scheduleHydratedAttach = () => {
+    const queryHash = untrack(() => observer.getCurrentQuery().queryHash);
+    if (coordinator) {
+      coordinator.whenQueryPrimed(queryHash, attachHydratedSubscriber);
+    } else {
+      queueMicrotask(attachHydratedSubscriber);
+    }
+  };
   let resolver = null;
   const [queryResource] = createSignal(() => {
     const opts = trackedDefaultedOptions();
     const restoring = isRestoring();
-    if (isServer) {
+    if (isServer2) {
       const cached = observer.getOptimisticResult(opts);
       if (!cached.isLoading) {
         observerResult = cached;
@@ -179,9 +351,11 @@ function useBaseQuery(options, Observer, queryClient) {
         );
       }
     }
-    return new Promise((resolve, reject) => {
+    const replayProbe = { executorRan: false };
+    const resource = new Promise((resolve, reject) => {
+      replayProbe.executorRan = true;
       resolver = resolve;
-      if (isServer) {
+      if (isServer2) {
         unsubscribe = createServerSubscriber((data) => {
           resolve(data);
         }, reject);
@@ -214,10 +388,14 @@ function useBaseQuery(options, Observer, queryClient) {
         );
       }
     });
+    if (!isServer2 && !replayProbe.executorRan) {
+      scheduleHydratedAttach();
+    }
+    return resource;
   });
   onCleanup(() => {
     disposed = true;
-    if (isServer && isPending(queryResource)) {
+    if (isServer2 && isPending(queryResource)) {
       unsubscribeQueued = true;
       return;
     }
@@ -225,7 +403,7 @@ function useBaseQuery(options, Observer, queryClient) {
       unsubscribe();
       unsubscribe = null;
     }
-    if (resolver && !isServer) {
+    if (resolver && !isServer2) {
       resolver(observerResult);
       resolver = null;
     }
@@ -243,7 +421,7 @@ function useBaseQuery(options, Observer, queryClient) {
       if (typeof prop === "symbol") {
         return Reflect.get(target, prop, receiver);
       }
-      if (isServer) {
+      if (isServer2) {
         const resolved = queryResource();
         if (prop in resolved) {
           return Reflect.get(resolved, prop);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-query",
-  "version": "6.0.0-beta.7",
+  "version": "6.0.0-rc.0",
   "description": "Primitives for managing, caching and syncing asynchronous and remote data in Solid",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -52,16 +52,16 @@
     "@babel/core": "^7.28.0",
     "@babel/preset-typescript": "^7.18.6",
     "@solidjs/testing-library": "^0.8.10",
-    "@solidjs/web": "2.0.0-beta.29",
-    "babel-preset-solid": "2.0.0-beta.29",
+    "@solidjs/vite-plugin": "^3.0.0-next.27",
+    "@solidjs/web": "^2.0.0-rc.0",
+    "babel-preset-solid": "^2.0.0-rc.0",
     "npm-run-all2": "^5.0.0",
-    "solid-js": "2.0.0-beta.29",
+    "solid-js": "^2.0.0-rc.0",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "3.0.0-next.21",
     "@tanstack/query-test-utils": "0.0.0"
   },
   "peerDependencies": {
-    "solid-js": ">=2.0.0-beta.0 <3.0.0"
+    "solid-js": ">=2.0.0-rc.0 <3.0.0"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/QueryClientProvider.tsx

@@ -1,7 +1,21 @@
-import { createContext, onCleanup, useContext } from 'solid-js'
+import {
+  createContext,
+  createRenderEffect,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
+import {
+  HydrationCoordinatorContext,
+  createHydrationCoordinator,
+  createServerDehydrationChannel,
+} from './hydrationChannel'
+import type { DehydrationChannelYield } from './hydrationChannel'
 import type { QueryClient } from './QueryClient'
 import type { JSX } from '@solidjs/web'
 
+const isServer = typeof window === 'undefined'
+
 export const QueryClientContext = createContext<(() => QueryClient) | null>(
   null,
 )
@@ -30,9 +44,53 @@ export const QueryClientProvider = (
   props.client.mount()
   onCleanup(() => props.client.unmount())
 
+  // Library-owned serialization channel for SSR dehydration.
+  //
+  // Server: the computation's value IS the channel's async iterable, so
+  // Solid serializes it through its normal per-computation signal path:
+  // the server runtime tees the iterator into the hydration serializer
+  // (`ctx.serialize(id, tapped)` in solid-js' `processResult`) and
+  // seroval streams each cumulative dehydrated-cache snapshot to the
+  // client as a chunk riding the SSR stream, with the entry objects
+  // inside deduplicated by reference against everything else in the
+  // payload. Nothing reads the signal during SSR, so it never suspends
+  // anything.
+  //
+  // Client, hydrating: Solid replays the serialized iterable through the
+  // per-computation signal path (`hydrateSignalFromAsyncIterable`).
+  // Yields that were still buffered when hydration began are conflated
+  // to the LATEST yield (`normalizeIterator`) — lossless here because
+  // every yield is a cumulative snapshot — and live yields after that
+  // apply one at a time. Requires a solid-js build with the buffered
+  // async-iterable replay conflation fix (> 2.0.0-beta.32): before it,
+  // the replay dropped every buffered yield after the first, including
+  // the terminal `done` snapshot. The render effect below hands each
+  // signal value to the coordinator, which primes the QueryClient via
+  // query-core hydrate() (newer-wins) and unblocks `useBaseQuery`
+  // subscribers waiting on their query's entry.
+  //
+  // Client, fresh mount: the compute returns undefined and the effect
+  // never fires.
+  const [channelValue] = createSignal<DehydrationChannelYield | undefined>(
+    () => (isServer ? createServerDehydrationChannel(props.client) : undefined),
+  )
+  const coordinator = isServer
+    ? null
+    : createHydrationCoordinator(() => props.client)
+  createRenderEffect(
+    () => (isServer ? undefined : channelValue()),
+    (value) => {
+      if (value && coordinator) {
+        coordinator.applyYield(value)
+      }
+    },
+  )
+
   return (
     <QueryClientContext value={() => props.client}>
-      {props.children}
+      <HydrationCoordinatorContext value={coordinator}>
+        {props.children}
+      </HydrationCoordinatorContext>
     </QueryClientContext>
   )
 }

package/src/hydrationChannel.ts

@@ -0,0 +1,260 @@
+import { hydrate } from '@tanstack/query-core'
+import { createContext, runWithOwner } from 'solid-js'
+import type { DehydratedState, QueryState } from '@tanstack/query-core'
+import type { QueryClient } from './QueryClient'
+
+type DehydratedQueryEntry = DehydratedState['queries'][number]
+
+/**
+ * A single message on the dehydration channel. `entries` is *cumulative* —
+ * every yield carries all entries settled so far. Two reasons:
+ *
+ * - It is what makes Solid's signal-path hydration replay lossless.
+ *   Yields still buffered when hydration begins are conflated to the
+ *   LATEST one (`normalizeIterator` drains synchronously available
+ *   results, keeps the last data yield, and delivers the stream's done
+ *   result on a subsequent pull), so each yield must be self-contained:
+ *   the latest cumulative snapshot alone carries everything the dropped
+ *   intermediates did. Requires the solid-js build with that conflation
+ *   behavior (> 2.0.0-beta.32); earlier betas pinned the replay at the
+ *   FIRST buffered yield, dropping every later entry and the `done`
+ *   marker.
+ * - Entry objects keep their identity across yields, so seroval's
+ *   cross-reference serialization emits each entry once and later yields
+ *   only reference it — the cumulative shape costs bytes proportional to
+ *   the number of entries, not its square.
+ *
+ * `done: true` marks the final yield. The client uses it to release
+ * subscribers still waiting for entries that will never arrive (e.g.
+ * queries that errored during SSR and were not dehydrated).
+ */
+export interface DehydrationChannelYield {
+  entries: Array<DehydratedQueryEntry>
+  done: boolean
+}
+
+/**
+ * Server side of the library-owned serialization channel.
+ *
+ * Returns an AsyncIterable that yields a cumulative snapshot of the
+ * dehydrated query cache (success entries, per query-core `dehydrate()`
+ * shapes) every time a query settles during SSR. `QueryClientProvider`
+ * holds it as a signal value, so Solid serializes it through the normal
+ * per-computation path: the server runtime tees the iterator into the
+ * hydration serializer (`ctx.serialize(id, tapped)` in solid-js'
+ * `processResult`) and seroval streams each yield to the client as a
+ * script chunk riding the SSR stream.
+ *
+ * The iterable must terminate for the SSR stream to complete: the
+ * hydration serializer's `flush()` only fires its `onDone` once all
+ * pending streams have closed, and the render root is disposed *after*
+ * that, so neither `onCleanup` nor the serializer itself can close the
+ * channel. Instead the channel closes itself on cache quiescence: after
+ * every cache event (and once at creation) it schedules a timer-task
+ * check; if no query is fetching by then, no further settle can occur —
+ * suspense retry passes that start waterfall fetches are scheduled on
+ * microtasks, so they have begun before the check runs — and the channel
+ * emits its final cumulative snapshot with `done: true` and completes.
+ *
+ * Single-consumer by design: solid-js creates exactly one iterator from
+ * the value and shares it between the memo and the serializer tap.
+ */
+export function createServerDehydrationChannel(
+  client: QueryClient,
+): AsyncIterable<DehydrationChannelYield> {
+  const cache = client.getQueryCache()
+  // Entry objects are reused across yields while the query's state object
+  // is unchanged, both so seroval can deduplicate them by reference and
+  // so the client can cheaply skip already-applied entries.
+  const entryCache = new Map<
+    string,
+    { state: QueryState<unknown, unknown>; entry: DehydratedQueryEntry }
+  >()
+
+  const snapshot = (): Array<DehydratedQueryEntry> => {
+    const entries: Array<DehydratedQueryEntry> = []
+    for (const query of cache.getAll()) {
+      // Mirrors query-core's defaultShouldDehydrateQuery.
+      if (query.state.status !== 'success') continue
+      let cached = entryCache.get(query.queryHash)
+      if (!cached || cached.state !== query.state) {
+        cached = {
+          state: query.state,
+          entry: {
+            dehydratedAt: Date.now(),
+            state: query.state,
+            queryKey: query.queryKey,
+            queryHash: query.queryHash,
+            ...(query.meta && { meta: query.meta }),
+            ...(query.queryType && { queryType: query.queryType }),
+          },
+        }
+        entryCache.set(query.queryHash, cached)
+      }
+      entries.push(cached.entry)
+    }
+    return entries
+  }
+
+  let closed = false
+  let pull: ((result: IteratorResult<DehydrationChannelYield>) => void) | null =
+    null
+  const buffered: Array<DehydrationChannelYield> = []
+
+  const emit = (value: DehydrationChannelYield) => {
+    if (closed) return
+    if (value.done) closed = true
+    if (pull) {
+      const resolve = pull
+      pull = null
+      resolve({ done: false, value })
+    } else {
+      buffered.push(value)
+    }
+  }
+
+  let closeTimer: ReturnType<typeof setTimeout> | null = null
+  const scheduleCloseCheck = () => {
+    if (closed || closeTimer !== null) return
+    closeTimer = setTimeout(() => {
+      closeTimer = null
+      if (closed) return
+      if (client.isFetching() === 0) {
+        unsubscribe()
+        emit({ entries: snapshot(), done: true })
+      }
+    }, 0)
+  }
+
+  const unsubscribe = cache.subscribe((event) => {
+    if (closed) return
+    if (event.type === 'updated' && event.action.type === 'success') {
+      emit({ entries: snapshot(), done: false })
+    }
+    scheduleCloseCheck()
+  })
+  scheduleCloseCheck()
+
+  return {
+    [Symbol.asyncIterator]() {
+      return {
+        next() {
+          if (buffered.length > 0) {
+            return Promise.resolve({ done: false, value: buffered.shift()! })
+          }
+          if (closed) {
+            return Promise.resolve({
+              done: true as const,
+              value: undefined,
+            })
+          }
+          return new Promise<IteratorResult<DehydrationChannelYield>>(
+            (resolve) => {
+              pull = resolve
+            },
+          )
+        },
+        return(value?: unknown) {
+          if (!closed) {
+            closed = true
+            unsubscribe()
+            if (closeTimer !== null) {
+              clearTimeout(closeTimer)
+              closeTimer = null
+            }
+            const resolve = pull
+            pull = null
+            resolve?.({ done: true, value: undefined })
+          }
+          return Promise.resolve({
+            done: true as const,
+            value: value as DehydrationChannelYield,
+          })
+        },
+      }
+    },
+  }
+}
+
+interface HydrationCoordinator {
+  /**
+   * Prime the QueryClient from a channel yield. Entries already applied
+   * (same queryHash and dataUpdatedAt) are skipped; the rest go through
+   * query-core `hydrate()`, which keeps whichever data is newer.
+   */
+  applyYield: (value: DehydrationChannelYield) => void
+  /**
+   * Invoke `callback` (on a microtask) once the entry for `queryHash` has
+   * been applied — or immediately-on-a-microtask if it already was, or
+   * when the channel completes without one (SSR-errored queries are not
+   * dehydrated, so their components must not wait forever).
+   */
+  whenQueryPrimed: (queryHash: string, callback: () => void) => void
+}
+
+/**
+ * Client side of the channel. Created by `QueryClientProvider` on the
+ * client and handed to `useBaseQuery` via context so hydrated components
+ * can attach their observers as soon as their query's entry has been
+ * primed — per query, not at global hydration end, which keeps
+ * early-hydrated components live while other boundaries still stream.
+ */
+export function createHydrationCoordinator(
+  client: () => QueryClient,
+): HydrationCoordinator {
+  // queryHash -> dataUpdatedAt of the applied entry
+  const applied = new Map<string, number>()
+  const waiters = new Map<string, Array<() => void>>()
+  let channelDone = false
+
+  const fireWaiters = (queryHash: string) => {
+    const callbacks = waiters.get(queryHash)
+    if (!callbacks) return
+    waiters.delete(queryHash)
+    for (const callback of callbacks) queueMicrotask(callback)
+  }
+
+  return {
+    applyYield(value) {
+      const fresh = value.entries.filter(
+        (entry) => applied.get(entry.queryHash) !== entry.state.dataUpdatedAt,
+      )
+      if (fresh.length > 0) {
+        // hydrate() synchronously notifies cache subscribers which may
+        // write to stores/signals; escape the owned scope (this runs
+        // inside the provider's render effect) so those writes are
+        // allowed.
+        runWithOwner(null, () =>
+          hydrate(client(), { queries: fresh, mutations: [] }),
+        )
+        for (const entry of fresh) {
+          applied.set(entry.queryHash, entry.state.dataUpdatedAt)
+          fireWaiters(entry.queryHash)
+        }
+      }
+      if (value.done && !channelDone) {
+        channelDone = true
+        const remaining = [...waiters.values()]
+        waiters.clear()
+        for (const callbacks of remaining) {
+          for (const callback of callbacks) queueMicrotask(callback)
+        }
+      }
+    },
+    whenQueryPrimed(queryHash, callback) {
+      if (channelDone || applied.has(queryHash)) {
+        queueMicrotask(callback)
+        return
+      }
+      let list = waiters.get(queryHash)
+      if (!list) {
+        list = []
+        waiters.set(queryHash, list)
+      }
+      list.push(callback)
+    },
+  }
+}
+
+export const HydrationCoordinatorContext =
+  createContext<HydrationCoordinator | null>(null)