@octanejs/apollo-client 0.1.0

package/src/react/hooks/useQuery.js

@@ -0,0 +1,234 @@
+/**
+ * Function parameters in this file try to follow a common order for the sake of
+ * readability and consistency. The order is as follows:
+ *
+ * resultData
+ * observable
+ * client
+ * query
+ * options
+ * watchQueryOptions
+ * makeWatchQueryOptions
+ */
+/**  */
+import { equal } from '@wry/equality';
+import * as React from 'octane';
+import { asapScheduler, observeOn } from 'rxjs';
+import { NetworkStatus } from '@apollo/client';
+import {
+	maybeDeepFreeze,
+	mergeOptions,
+	variablesUnknownSymbol,
+} from '@apollo/client/utilities/internal';
+import { skipToken } from './constants.js';
+import { useDeepMemo, wrapHook } from './internal/index.js';
+import { isCompilerSite } from './internal/site.js';
+import { useApolloClient } from './useApolloClient.js';
+import { useSyncExternalStore } from './useSyncExternalStore.js';
+const lastWatchOptions = Symbol();
+export const useQuery = function useQuery(query, options) {
+	'use no memo';
+	if (isCompilerSite(options, skipToken)) options = undefined;
+	return wrapHook(
+		'useQuery',
+		useQuery_,
+		useApolloClient(typeof options === 'object' ? options.client : undefined),
+	)(query, options);
+};
+function useQuery_(query, options = {}) {
+	const client = useApolloClient(typeof options === 'object' ? options.client : undefined);
+	const { ssr } = typeof options === 'object' ? options : {};
+	const watchQueryOptions = useOptions(query, options, client.defaultOptions.watchQuery);
+	function createState(previous) {
+		const observable = client.watchQuery(watchQueryOptions);
+		return {
+			client,
+			query,
+			observable,
+			resultData: {
+				current: observable.getCurrentResult(),
+				// Reuse previousData from previous InternalState (if any) to provide
+				// continuity of previousData even if/when the query or client changes.
+				previousData: previous?.resultData.current.data,
+				variables: observable.variables,
+			},
+		};
+	}
+	let [state, setState] = React.useState(createState);
+	if (client !== state.client || query !== state.query) {
+		// If the client or query have changed, we need to create a new InternalState.
+		// This will trigger a re-render with the new state, but it will also continue
+		// to run the current render function to completion.
+		// Since we sometimes trigger some side-effects in the render function, we
+		// re-assign `state` to the new state to ensure that those side-effects are
+		// triggered with the new state.
+		setState((state = createState(state)));
+	}
+	const { observable, resultData } = state;
+	useInitialFetchPolicyIfNecessary(watchQueryOptions, observable);
+	useResubscribeIfNecessary(
+		resultData, // might get mutated during render
+		observable, // might get mutated during render
+		watchQueryOptions,
+	);
+	const result = useResult(observable, resultData, ssr);
+	const obsQueryFields = React.useMemo(
+		() => ({
+			refetch: observable.refetch.bind(observable),
+			fetchMore: observable.fetchMore.bind(observable),
+			updateQuery: observable.updateQuery.bind(observable),
+			startPolling: observable.startPolling.bind(observable),
+			stopPolling: observable.stopPolling.bind(observable),
+			subscribeToMore: observable.subscribeToMore.bind(observable),
+		}),
+		[observable],
+	);
+	const previousData = resultData.previousData;
+	return React.useMemo(() => {
+		const { partial, ...rest } = result;
+		return {
+			...rest,
+			client,
+			observable,
+			variables: observable.variables,
+			previousData,
+			...obsQueryFields,
+		};
+	}, [result, client, observable, previousData, obsQueryFields]);
+}
+const fromSkipToken = Symbol();
+function useOptions(query, options, defaultOptions) {
+	return useDeepMemo(() => {
+		if (options === skipToken) {
+			const opts = {
+				...mergeOptions(defaultOptions, {
+					query,
+					fetchPolicy: 'standby',
+				}),
+				[variablesUnknownSymbol]: true,
+			};
+			opts[fromSkipToken] = true;
+			return opts;
+		}
+		const watchQueryOptions = mergeOptions(defaultOptions, { ...options, query });
+		if (options.skip) {
+			watchQueryOptions.initialFetchPolicy = options.initialFetchPolicy || options.fetchPolicy;
+			watchQueryOptions.fetchPolicy = 'standby';
+		}
+		return watchQueryOptions;
+	}, [query, options, defaultOptions]);
+}
+function useInitialFetchPolicyIfNecessary(watchQueryOptions, observable) {
+	'use no memo';
+	if (!watchQueryOptions.fetchPolicy) {
+		watchQueryOptions.fetchPolicy = observable.options.initialFetchPolicy;
+	}
+}
+function useResult(observable, resultData, ssr) {
+	'use no memo';
+	const fetchPolicy = observable.options.fetchPolicy;
+	return useSyncExternalStore(
+		React.useCallback(
+			(handleStoreChange) => {
+				const subscription = observable
+					// We use the asapScheduler here to prevent issues with trying to
+					// update in the middle of a render. `reobserve` is kicked off in the
+					// middle of a render and because RxJS emits values synchronously,
+					// its possible for this `handleStoreChange` to be called in that same
+					// render. This allows the render to complete before trying to emit a
+					// new value.
+					.pipe(observeOn(asapScheduler))
+					.subscribe((result) => {
+						const previous = resultData.current;
+						if (
+							// Avoid rerendering if the result is the same
+							equal(previous, result) &&
+							// Force rerender if the value was emitted because variables
+							// changed, such as when calling `refetch(newVars)` which returns
+							// the same data when `notifyOnNetworkStatusChange` is `false`.
+							equal(resultData.variables, observable.variables)
+						) {
+							return;
+						}
+						resultData.variables = observable.variables;
+						if (previous.data && !equal(previous.data, result.data)) {
+							resultData.previousData = previous.data;
+						}
+						resultData.current = result;
+						handleStoreChange();
+					});
+				// Do the "unsubscribe" with a short delay.
+				// This way, an existing subscription can be reused without an additional
+				// request if "unsubscribe"  and "resubscribe" to the same ObservableQuery
+				// happen in very fast succession.
+				return () => {
+					setTimeout(() => subscription.unsubscribe());
+				};
+			},
+			[observable, resultData],
+		),
+		() => resultData.current,
+		() =>
+			(fetchPolicy !== 'standby' && ssr === false) || fetchPolicy === 'no-cache'
+				? useQuery.ssrDisabledResult
+				: resultData.current,
+	);
+}
+// this hook is not compatible with any rules of React, and there's no good way to rewrite it.
+// it should stay a separate hook that will not be optimized by the compiler
+function useResubscribeIfNecessary(
+	/** this hook will mutate properties on `resultData` */
+	resultData,
+	/** this hook will mutate properties on `observable` */
+	observable,
+	watchQueryOptions,
+) {
+	'use no memo';
+	if (observable[lastWatchOptions] && !equal(observable[lastWatchOptions], watchQueryOptions)) {
+		// If skipToken was used to generate options, we won't know the correct
+		// initialFetchPolicy until the hook is rerendered with real options, so we
+		// set it the next time we get real options
+		if (observable[lastWatchOptions][fromSkipToken] && !watchQueryOptions.initialFetchPolicy) {
+			watchQueryOptions.initialFetchPolicy = watchQueryOptions.fetchPolicy;
+		}
+		// Though it might be tempting to postpone this reobserve call to the
+		// useEffect block, we need getCurrentResult to return an appropriate
+		// loading:true result synchronously (later within the same call to
+		// useQuery). Since we already have this.observable here (not true for
+		// the very first call to useQuery), we are not initiating any new
+		// subscriptions, though it does feel less than ideal that reobserve
+		// (potentially) kicks off a network request (for example, when the
+		// variables have changed), which is technically a side-effect.
+		if (shouldReobserve(observable[lastWatchOptions], watchQueryOptions)) {
+			observable.reobserve(watchQueryOptions);
+		} else {
+			observable.applyOptions(watchQueryOptions);
+		}
+		// Make sure getCurrentResult returns a fresh ApolloQueryResult<TData>,
+		// but save the current data as this.previousData, just like setResult
+		// usually does.
+		const result = observable.getCurrentResult();
+		if (!equal(result.data, resultData.current.data)) {
+			resultData.previousData = resultData.current.data || resultData.previousData;
+		}
+		resultData.current = result;
+		resultData.variables = observable.variables;
+	}
+	observable[lastWatchOptions] = watchQueryOptions;
+}
+function shouldReobserve(previousOptions, options) {
+	return (
+		previousOptions.query !== options.query ||
+		!equal(previousOptions.variables, options.variables) ||
+		(previousOptions.fetchPolicy !== options.fetchPolicy &&
+			(options.fetchPolicy === 'standby' || previousOptions.fetchPolicy === 'standby'))
+	);
+}
+useQuery.ssrDisabledResult = maybeDeepFreeze({
+	loading: true,
+	data: void 0,
+	dataState: 'empty',
+	error: void 0,
+	networkStatus: NetworkStatus.loading,
+	partial: true,
+});

package/src/react/hooks/useQueryRefHandlers.d.ts

@@ -0,0 +1,85 @@
+import type { DataState, OperationVariables } from '@apollo/client';
+import type { SubscribeToMoreFunction } from '@apollo/client';
+import type { QueryRef } from '@octanejs/apollo-client/react';
+import type { FetchMoreFunction, RefetchFunction } from '@octanejs/apollo-client/react/internal';
+export declare namespace useQueryRefHandlers {
+	interface Result<TData = unknown, TVariables extends OperationVariables = OperationVariables> {
+		/**
+		 * Update the variables of this observable query, and fetch the new results.
+		 * This method should be preferred over `setVariables` in most use cases.
+		 *
+		 * Returns a `ResultPromise` with an additional `.retain()` method. Calling
+		 * `.retain()` keeps the network operation running even if the `ObservableQuery`
+		 * no longer requires the result.
+		 *
+		 * Note: `refetch()` guarantees that a value will be emitted from the
+		 * observable, even if the result is deep equal to the previous value.
+		 *
+		 * @param variables - The new set of variables. If there are missing variables,
+		 * the previous values of those variables will be used.
+		 */
+		refetch: RefetchFunction<TData, TVariables>;
+		/**
+		 * A function that helps you fetch the next set of results for a [paginated list field](https://www.apollographql.com/docs/react/pagination/core-api/).
+		 */
+		fetchMore: FetchMoreFunction<TData, TVariables>;
+		/**
+		 * A function that enables you to execute a [subscription](https://www.apollographql.com/docs/react/data/subscriptions/), usually to subscribe to specific fields that were included in the query.
+		 *
+		 * This function returns _another_ function that you can call to terminate the subscription.
+		 */
+		subscribeToMore: SubscribeToMoreFunction<TData, TVariables>;
+	}
+	namespace DocumentationTypes {
+		/**
+		 * A React hook that returns a `refetch` and `fetchMore` function for a given
+		 * `queryRef`.
+		 *
+		 * This is useful to get access to handlers for a `queryRef` that was created by
+		 * `createQueryPreloader` or when the handlers for a `queryRef` produced in
+		 * a different component are inaccessible.
+		 *
+		 * @example
+		 *
+		 * ```tsx
+		 * const MyComponent({ queryRef }) {
+		 *   const { refetch, fetchMore } = useQueryRefHandlers(queryRef);
+		 *
+		 *   // ...
+		 * }
+		 * ```
+		 *
+		 * @param queryRef - A `QueryRef` returned from `useBackgroundQuery`, `useLoadableQuery`, or `createQueryPreloader`.
+		 */
+		function useQueryRefHandlers<
+			TData = unknown,
+			TVariables extends OperationVariables = OperationVariables,
+		>(queryRef: QueryRef<TData, TVariables>): useQueryRefHandlers.Result<TData, TVariables>;
+	}
+}
+/**
+ * A React hook that returns a `refetch` and `fetchMore` function for a given
+ * `queryRef`.
+ *
+ * This is useful to get access to handlers for a `queryRef` that was created by
+ * `createQueryPreloader` or when the handlers for a `queryRef` produced in
+ * a different component are inaccessible.
+ *
+ * @example
+ *
+ * ```tsx
+ * const MyComponent({ queryRef }) {
+ *   const { refetch, fetchMore } = useQueryRefHandlers(queryRef);
+ *
+ *   // ...
+ * }
+ * ```
+ *
+ * @param queryRef - A `QueryRef` returned from `useBackgroundQuery`, `useLoadableQuery`, or `createQueryPreloader`.
+ */
+export declare function useQueryRefHandlers<
+	TData = unknown,
+	TVariables extends OperationVariables = OperationVariables,
+>(
+	queryRef: QueryRef<TData, TVariables, DataState<TData>['dataState']>,
+): useQueryRefHandlers.Result<TData, TVariables>;

package/src/react/hooks/useQueryRefHandlers.js

@@ -0,0 +1,79 @@
+import * as React from 'octane';
+import {
+	assertWrappedQueryRef,
+	getWrappedPromise,
+	unwrapQueryRef,
+	updateWrappedQueryRef,
+	wrapQueryRef,
+} from '@octanejs/apollo-client/react/internal';
+import { wrapHook } from './internal/index.js';
+import { useApolloClient } from './useApolloClient.js';
+/**
+ * A React hook that returns a `refetch` and `fetchMore` function for a given
+ * `queryRef`.
+ *
+ * This is useful to get access to handlers for a `queryRef` that was created by
+ * `createQueryPreloader` or when the handlers for a `queryRef` produced in
+ * a different component are inaccessible.
+ *
+ * @example
+ *
+ * ```tsx
+ * const MyComponent({ queryRef }) {
+ *   const { refetch, fetchMore } = useQueryRefHandlers(queryRef);
+ *
+ *   // ...
+ * }
+ * ```
+ *
+ * @param queryRef - A `QueryRef` returned from `useBackgroundQuery`, `useLoadableQuery`, or `createQueryPreloader`.
+ */
+export function useQueryRefHandlers(queryRef) {
+	'use no memo';
+	const unwrapped = unwrapQueryRef(queryRef);
+	const clientOrObsQuery = useApolloClient(
+		unwrapped
+			? // passing an `ObservableQuery` is not supported by the types, but it will
+				// return any truthy value that is passed in as an override so we cast the result
+				unwrapped['observable']
+			: undefined,
+	);
+	return wrapHook('useQueryRefHandlers', useQueryRefHandlers_, clientOrObsQuery)(queryRef);
+}
+function useQueryRefHandlers_(queryRef) {
+	assertWrappedQueryRef(queryRef);
+	const [previousQueryRef, setPreviousQueryRef] = React.useState(queryRef);
+	const [wrappedQueryRef, setWrappedQueryRef] = React.useState(queryRef);
+	const internalQueryRef = unwrapQueryRef(queryRef);
+	// To ensure we can support React transitions, this hook needs to manage the
+	// queryRef state and apply React's state value immediately to the existing
+	// queryRef since this hook doesn't return the queryRef directly
+	if (previousQueryRef !== queryRef) {
+		setPreviousQueryRef(queryRef);
+		setWrappedQueryRef(queryRef);
+	} else {
+		updateWrappedQueryRef(queryRef, getWrappedPromise(wrappedQueryRef));
+	}
+	const refetch = React.useCallback(
+		(variables) => {
+			const promise = internalQueryRef.refetch(variables);
+			setWrappedQueryRef(wrapQueryRef(internalQueryRef));
+			return promise;
+		},
+		[internalQueryRef],
+	);
+	const fetchMore = React.useCallback(
+		(options) => {
+			const promise = internalQueryRef.fetchMore(options);
+			setWrappedQueryRef(wrapQueryRef(internalQueryRef));
+			return promise;
+		},
+		[internalQueryRef],
+	);
+	return {
+		refetch,
+		fetchMore,
+		// TODO: The internalQueryRef doesn't have TVariables' type information so we have to cast it here
+		subscribeToMore: internalQueryRef.observable.subscribeToMore,
+	};
+}

package/src/react/hooks/useReactiveVar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactiveVar } from '@apollo/client';
+/**
+ * Reads the value of a [reactive variable](https://www.apollographql.com/docs/react/local-state/reactive-variables/) and re-renders the containing component whenever that variable's value changes. This enables a reactive variable to trigger changes _without_ relying on the `useQuery` hook.
+ *
+ * @example
+ *
+ * ```jsx
+ * import { makeVar } from "@apollo/client";
+ * import { useReactiveVar } from "@octanejs/apollo-client/react";
+ * export const cartItemsVar = makeVar([]);
+ *
+ * export function Cart() {
+ *   const cartItems = useReactiveVar(cartItemsVar);
+ *   // ...
+ * }
+ * ```
+ *
+ * @param rv - A reactive variable.
+ * @returns The current value of the reactive variable.
+ */
+export declare function useReactiveVar<T>(rv: ReactiveVar<T>): T;

package/src/react/hooks/useReactiveVar.js

@@ -0,0 +1,41 @@
+import * as React from 'octane';
+import { useSyncExternalStore } from './useSyncExternalStore.js';
+/**
+ * Reads the value of a [reactive variable](https://www.apollographql.com/docs/react/local-state/reactive-variables/) and re-renders the containing component whenever that variable's value changes. This enables a reactive variable to trigger changes _without_ relying on the `useQuery` hook.
+ *
+ * @example
+ *
+ * ```jsx
+ * import { makeVar } from "@apollo/client";
+ * import { useReactiveVar } from "@octanejs/apollo-client/react";
+ * export const cartItemsVar = makeVar([]);
+ *
+ * export function Cart() {
+ *   const cartItems = useReactiveVar(cartItemsVar);
+ *   // ...
+ * }
+ * ```
+ *
+ * @param rv - A reactive variable.
+ * @returns The current value of the reactive variable.
+ */
+export function useReactiveVar(rv) {
+	return useSyncExternalStore(
+		React.useCallback(
+			(update) => {
+				// By reusing the same onNext function in the nested call to
+				// rv.onNextChange(onNext), we can keep using the initial clean-up function
+				// returned by rv.onNextChange(function onNext(v){...}), without having to
+				// register the new clean-up function (returned by the nested
+				// rv.onNextChange(onNext)) with yet another callback.
+				return rv.onNextChange(function onNext() {
+					update();
+					rv.onNextChange(onNext);
+				});
+			},
+			[rv],
+		),
+		rv,
+		rv,
+	);
+}

package/src/react/hooks/useReadQuery.d.ts

@@ -0,0 +1,104 @@
+import type { DataState, ErrorLike, GetDataState, NetworkStatus } from '@apollo/client';
+import type { MaybeMasked } from '@apollo/client/masking';
+import type { QueryRef } from '@octanejs/apollo-client/react';
+import type { DocumentationTypes as UtilityDocumentationTypes } from '@apollo/client/utilities/internal';
+export declare namespace useReadQuery {
+	namespace Base {
+		interface Result<TData = unknown> {
+			/**
+			 * A single ErrorLike object describing the error that occurred during the latest
+			 * query execution.
+			 *
+			 * For more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).
+			 *
+			 * @docGroup 1. Operation data
+			 *
+			 *
+			 * This property can be ignored when using the default `errorPolicy` or an
+			 * `errorPolicy` of `none`. The hook will throw the error instead of setting
+			 * this property.
+			 */
+			error: ErrorLike | undefined;
+			/**
+			 * A number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)
+			 *
+			 * Used in conjunction with the [`notifyOnNetworkStatusChange`](#notifyonnetworkstatuschange) option.
+			 *
+			 * @docGroup 2. Network info
+			 */
+			networkStatus: NetworkStatus;
+		}
+	}
+	type Result<
+		TData = unknown,
+		TStates extends DataState<TData>['dataState'] = DataState<TData>['dataState'],
+	> = Base.Result<TData> & GetDataState<MaybeMasked<TData>, TStates>;
+	namespace DocumentationTypes {
+		namespace useReadQuery {
+			interface Result<TData = unknown>
+				extends Base.Result<TData>, UtilityDocumentationTypes.DataState<TData> {}
+		}
+		/**
+		 * For a detailed explanation of `useReadQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense#avoiding-request-waterfalls).
+		 *
+		 * @param queryRef - The `QueryRef` that was generated via `useBackgroundQuery`.
+		 * @returns An object containing the query result data, error, and network status.
+		 *
+		 * @example
+		 *
+		 * ```jsx
+		 * import { Suspense } from "octane";
+		 * import { useBackgroundQuery, useReadQuery } from "@apollo/client";
+		 *
+		 * function Parent() {
+		 *   const [queryRef] = useBackgroundQuery(query);
+		 *
+		 *   return (
+		 *     <Suspense fallback={<div>Loading...</div>}>
+		 *       <Child queryRef={queryRef} />
+		 *     </Suspense>
+		 *   );
+		 * }
+		 *
+		 * function Child({ queryRef }) {
+		 *   const { data } = useReadQuery(queryRef);
+		 *
+		 *   return <div>{data.name}</div>;
+		 * }
+		 * ```
+		 */
+		function useReadQuery<TData>(queryRef: QueryRef<TData>): useReadQuery.Result<TData>;
+	}
+}
+/**
+ * For a detailed explanation of `useReadQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense#avoiding-request-waterfalls).
+ *
+ * @param queryRef - The `QueryRef` that was generated via `useBackgroundQuery`.
+ * @returns An object containing the query result data, error, and network status.
+ *
+ * @example
+ *
+ * ```jsx
+ * import { Suspense } from "octane";
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client";
+ *
+ * function Parent() {
+ *   const [queryRef] = useBackgroundQuery(query);
+ *
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <Child queryRef={queryRef} />
+ *     </Suspense>
+ *   );
+ * }
+ *
+ * function Child({ queryRef }) {
+ *   const { data } = useReadQuery(queryRef);
+ *
+ *   return <div>{data.name}</div>;
+ * }
+ * ```
+ */
+export declare function useReadQuery<TData, TStates extends DataState<TData>['dataState']>(
+	queryRef: QueryRef<TData, any, TStates>,
+): useReadQuery.Result<TData, TStates>;

package/src/react/hooks/useReadQuery.js

@@ -0,0 +1,83 @@
+import * as React from 'octane';
+import {
+	assertWrappedQueryRef,
+	getWrappedPromise,
+	unwrapQueryRef,
+	updateWrappedQueryRef,
+} from '@octanejs/apollo-client/react/internal';
+import { __use, wrapHook } from './internal/index.js';
+import { useApolloClient } from './useApolloClient.js';
+import { useSyncExternalStore } from './useSyncExternalStore.js';
+/**
+ * For a detailed explanation of `useReadQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense#avoiding-request-waterfalls).
+ *
+ * @param queryRef - The `QueryRef` that was generated via `useBackgroundQuery`.
+ * @returns An object containing the query result data, error, and network status.
+ *
+ * @example
+ *
+ * ```jsx
+ * import { Suspense } from "octane";
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client";
+ *
+ * function Parent() {
+ *   const [queryRef] = useBackgroundQuery(query);
+ *
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <Child queryRef={queryRef} />
+ *     </Suspense>
+ *   );
+ * }
+ *
+ * function Child({ queryRef }) {
+ *   const { data } = useReadQuery(queryRef);
+ *
+ *   return <div>{data.name}</div>;
+ * }
+ * ```
+ */
+export function useReadQuery(queryRef, site) {
+	'use no memo';
+	const unwrapped = unwrapQueryRef(queryRef);
+	const clientOrObsQuery = useApolloClient(
+		unwrapped
+			? // passing an `ObservableQuery` is not supported by the types, but it will
+				// return any truthy value that is passed in as an override so we cast the result
+				unwrapped['observable']
+			: undefined,
+	);
+	return wrapHook('useReadQuery', useReadQuery_, clientOrObsQuery)(queryRef, site);
+}
+function useReadQuery_(queryRef, site) {
+	assertWrappedQueryRef(queryRef);
+	const internalQueryRef = React.useMemo(() => unwrapQueryRef(queryRef), [queryRef]);
+	const getPromise = React.useCallback(() => getWrappedPromise(queryRef), [queryRef]);
+	if (internalQueryRef.disposed) {
+		internalQueryRef.reinitialize();
+		updateWrappedQueryRef(queryRef, internalQueryRef.promise);
+	}
+	React.useEffect(() => internalQueryRef.retain(), [internalQueryRef]);
+	const promise = useSyncExternalStore(
+		React.useCallback(
+			(forceUpdate) => {
+				return internalQueryRef.listen((promise) => {
+					updateWrappedQueryRef(queryRef, promise);
+					forceUpdate();
+				});
+			},
+			[internalQueryRef, queryRef],
+		),
+		getPromise,
+		getPromise,
+	);
+	const result = __use(promise, site);
+	return React.useMemo(() => {
+		return {
+			data: result.data,
+			dataState: result.dataState,
+			networkStatus: result.networkStatus,
+			error: result.error,
+		};
+	}, [result]);
+}