@effector-tanstack-query/react 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# @effector-tanstack-query/react
+
+React hooks for [`@effector-tanstack-query/core`](https://www.npmjs.com/package/@effector-tanstack-query/core) — subscribe a component to a query/mutation with auto mount/unmount lifecycle.
+
+- `useQuery(query)` — subscribes to query stores, returns `{ data, error, isFetching, refresh, … }`
+- `useMutation(mutation)` — returns `{ data, mutate, mutateWith, reset, … }`
+- `useInfiniteQuery(query)` — paginated variant
+- `useSuspenseQuery(query)` / `useSuspenseInfiniteQuery(query)` — Suspense-friendly with non-nullable `data`
+
+```bash
+npm install @effector-tanstack-query/core @effector-tanstack-query/react \
+  @tanstack/query-core effector effector-react
+```
+
+```tsx
+import { useQuery } from '@effector-tanstack-query/react'
+
+function UserProfile() {
+  const { data, isPending, error, refresh } = useQuery(userQuery)
+  if (isPending) return <p>Loading…</p>
+  if (error) return <p>Error: {error.message}</p>
+  return (
+    <div>
+      <h1>{data.name}</h1>
+      <button onClick={refresh}>refresh</button>
+    </div>
+  )
+}
+```
+
+**Full documentation:** https://ilyaagarkov.github.io/effector-tanstack-query/
+
+**Source & examples:** https://github.com/ilyaagarkov/effector-tanstack-query
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,203 @@
+'use strict';
+
+var React = require('react');
+var effectorReact = require('effector-react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.ts
+function useQuery(query) {
+  const state = effectorReact.useUnit({
+    data: query.$data,
+    error: query.$error,
+    status: query.$status,
+    isPending: query.$isPending,
+    isFetching: query.$isFetching,
+    isSuccess: query.$isSuccess,
+    isError: query.$isError,
+    isPlaceholderData: query.$isPlaceholderData,
+    fetchStatus: query.$fetchStatus
+  });
+  const mount = effectorReact.useUnit(query.mounted);
+  const unmount = effectorReact.useUnit(query.unmounted);
+  const refresh = effectorReact.useUnit(query.refresh);
+  React__namespace.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  return { ...state, refresh };
+}
+function useMutation(mutation) {
+  const state = effectorReact.useUnit({
+    data: mutation.$data,
+    error: mutation.$error,
+    status: mutation.$status,
+    variables: mutation.$variables,
+    isPaused: mutation.$isPaused,
+    isPending: mutation.$isPending,
+    isSuccess: mutation.$isSuccess,
+    isError: mutation.$isError,
+    isIdle: mutation.$isIdle
+  });
+  const start = effectorReact.useUnit(mutation.start);
+  const unmount = effectorReact.useUnit(mutation.unmounted);
+  const mutate = effectorReact.useUnit(mutation.mutate);
+  const mutateWith = effectorReact.useUnit(mutation.mutateWith);
+  const reset = effectorReact.useUnit(mutation.reset);
+  React__namespace.useEffect(() => {
+    start();
+    return () => unmount();
+  }, [start, unmount]);
+  return { ...state, mutate, mutateWith, reset };
+}
+function useInfiniteQuery(query) {
+  const state = effectorReact.useUnit({
+    data: query.$data,
+    error: query.$error,
+    status: query.$status,
+    isPending: query.$isPending,
+    isFetching: query.$isFetching,
+    isSuccess: query.$isSuccess,
+    isError: query.$isError,
+    isPlaceholderData: query.$isPlaceholderData,
+    fetchStatus: query.$fetchStatus,
+    hasNextPage: query.$hasNextPage,
+    hasPreviousPage: query.$hasPreviousPage,
+    isFetchingNextPage: query.$isFetchingNextPage,
+    isFetchingPreviousPage: query.$isFetchingPreviousPage,
+    isFetchNextPageError: query.$isFetchNextPageError,
+    isFetchPreviousPageError: query.$isFetchPreviousPageError
+  });
+  const mount = effectorReact.useUnit(query.mounted);
+  const unmount = effectorReact.useUnit(query.unmounted);
+  const refresh = effectorReact.useUnit(query.refresh);
+  const fetchNextPage = effectorReact.useUnit(query.fetchNextPage);
+  const fetchPreviousPage = effectorReact.useUnit(query.fetchPreviousPage);
+  React__namespace.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  return { ...state, refresh, fetchNextPage, fetchPreviousPage };
+}
+function useObserverRerender(observer) {
+  const [, forceRender] = React__namespace.useReducer((x) => x + 1, 0);
+  React__namespace.useEffect(() => {
+    if (!observer) return;
+    return observer.subscribe(forceRender);
+  }, [observer]);
+}
+function useSuspenseQuery(query) {
+  const mount = effectorReact.useUnit(query.mounted);
+  const unmount = effectorReact.useUnit(query.unmounted);
+  const refresh = effectorReact.useUnit(query.refresh);
+  React__namespace.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  const observer = useSuspenseObserver(query);
+  useObserverRerender(observer);
+  const result = observer.getOptimisticResult(observer.options);
+  if (result.status === "error") throw result.error;
+  if (result.status === "pending") {
+    throw observer.fetchOptimistic(observer.options);
+  }
+  return {
+    data: result.data,
+    error: result.error,
+    status: "success",
+    isPending: false,
+    isSuccess: true,
+    isError: false,
+    isFetching: result.isFetching,
+    isPlaceholderData: result.isPlaceholderData,
+    fetchStatus: result.fetchStatus,
+    refresh
+  };
+}
+function useSuspenseInfiniteQuery(query) {
+  const mount = effectorReact.useUnit(query.mounted);
+  const unmount = effectorReact.useUnit(query.unmounted);
+  const refresh = effectorReact.useUnit(query.refresh);
+  const fetchNextPage = effectorReact.useUnit(query.fetchNextPage);
+  const fetchPreviousPage = effectorReact.useUnit(query.fetchPreviousPage);
+  React__namespace.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  const observer = useSuspenseObserver(query);
+  useObserverRerender(observer);
+  const result = observer.getOptimisticResult(observer.options);
+  if (result.status === "error") throw result.error;
+  if (result.status === "pending") {
+    throw observer.fetchOptimistic(observer.options);
+  }
+  const r = result;
+  return {
+    data: r.data,
+    error: r.error,
+    status: "success",
+    isPending: false,
+    isSuccess: true,
+    isError: false,
+    isFetching: r.isFetching,
+    isPlaceholderData: r.isPlaceholderData,
+    fetchStatus: r.fetchStatus,
+    hasNextPage: r.hasNextPage,
+    hasPreviousPage: r.hasPreviousPage,
+    isFetchingNextPage: r.isFetchingNextPage,
+    isFetchingPreviousPage: r.isFetchingPreviousPage,
+    isFetchNextPageError: r.isFetchNextPageError,
+    isFetchPreviousPageError: r.isFetchPreviousPageError,
+    refresh,
+    fetchNextPage,
+    fetchPreviousPage
+  };
+}
+function useSuspenseObserver(query) {
+  const factory = query;
+  const observerInScope = effectorReact.useUnit(query.$observer);
+  const qc = effectorReact.useUnit(query.$queryClient);
+  const queryKey = effectorReact.useUnit(factory.__resolvedKey);
+  const enabled = effectorReact.useUnit(factory.__enabled);
+  const transient = React__namespace.useMemo(() => {
+    if (observerInScope || !qc) return null;
+    return factory.__createObserver(qc, { queryKey, enabled });
+  }, [observerInScope, qc, factory]);
+  React__namespace.useEffect(() => {
+    if (!transient) return;
+    transient.setOptions({ ...transient.options, queryKey, enabled });
+  }, [transient, queryKey, enabled]);
+  const observer = observerInScope ?? transient;
+  if (!observer) {
+    throw new Error(
+      "[@effector-tanstack-query/react] useSuspenseQuery: no QueryClient is set. Call setQueryClient(qc) or pass it to fork({ values: [[$queryClient, qc]] })."
+    );
+  }
+  return observer;
+}
+
+exports.useInfiniteQuery = useInfiniteQuery;
+exports.useMutation = useMutation;
+exports.useQuery = useQuery;
+exports.useSuspenseInfiniteQuery = useSuspenseInfiniteQuery;
+exports.useSuspenseQuery = useSuspenseQuery;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["useUnit","React"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from 'react'\nimport { useUnit } from 'effector-react'\nimport type {\n  FetchStatus,\n  MutateOptions,\n  QueryStatus,\n} from '@tanstack/query-core'\nimport type {\n  InfiniteQueryResult,\n  MutationResult,\n  MutationStatus,\n  QueryResult,\n} from '@effector-tanstack-query/core'\n\nexport interface UseQueryResult<TData, TError = Error> {\n  data: TData | undefined\n  error: TError | null\n  status: QueryStatus\n  isPending: boolean\n  isFetching: boolean\n  isSuccess: boolean\n  isError: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  refresh: () => void\n}\n\n/**\n * Subscribes a React component to a query, automatically calling\n * `mounted()` on mount and `unmounted()` on cleanup.\n */\nexport function useQuery<TData, TError = Error>(\n  query: QueryResult<TData, TError>,\n): UseQueryResult<TData, TError> {\n  const state = useUnit({\n    data: query.$data,\n    error: query.$error,\n    status: query.$status,\n    isPending: query.$isPending,\n    isFetching: query.$isFetching,\n    isSuccess: query.$isSuccess,\n    isError: query.$isError,\n    isPlaceholderData: query.$isPlaceholderData,\n    fetchStatus: query.$fetchStatus,\n  })\n\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  return { ...state, refresh }\n}\n\nexport interface UseMutationResult<TData, TError, TVariables> {\n  data: TData | undefined\n  error: TError | null\n  status: MutationStatus\n  variables: TVariables | undefined\n  isPaused: boolean\n  isPending: boolean\n  isSuccess: boolean\n  isError: boolean\n  isIdle: boolean\n  mutate: (variables: TVariables) => void\n  /**\n   * Trigger the mutation with per-call callbacks layered on top of the\n   * observer-level ones (`onSuccess` / `onError` / `onSettled` in\n   * `createMutation` options). Use this for component-local reactions\n   * that don't fit module-level `sample` wiring — navigation after success,\n   * one-shot toasts, etc.\n   */\n  mutateWith: (args: {\n    variables: TVariables\n    onSuccess?: MutateOptions<TData, TError, TVariables>['onSuccess']\n    onError?: MutateOptions<TData, TError, TVariables>['onError']\n    onSettled?: MutateOptions<TData, TError, TVariables>['onSettled']\n  }) => void\n  reset: () => void\n}\n\n/**\n * Subscribes a React component to a mutation, automatically calling\n * `start()` on mount and `unmounted()` on cleanup so the queryClient can\n * garbage-collect the mutation entry once no observers remain.\n */\nexport function useMutation<TData = unknown, TError = Error, TVariables = void>(\n  mutation: MutationResult<TData, TError, TVariables>,\n): UseMutationResult<TData, TError, TVariables> {\n  const state = useUnit({\n    data: mutation.$data,\n    error: mutation.$error,\n    status: mutation.$status,\n    variables: mutation.$variables,\n    isPaused: mutation.$isPaused,\n    isPending: mutation.$isPending,\n    isSuccess: mutation.$isSuccess,\n    isError: mutation.$isError,\n    isIdle: mutation.$isIdle,\n  })\n\n  const start = useUnit(mutation.start)\n  const unmount = useUnit(mutation.unmounted)\n  const mutate = useUnit(mutation.mutate)\n  const mutateWith = useUnit(mutation.mutateWith)\n  const reset = useUnit(mutation.reset)\n\n  React.useEffect(() => {\n    start()\n    return () => unmount()\n  }, [start, unmount])\n\n  return { ...state, mutate, mutateWith, reset }\n}\n\nexport interface UseInfiniteQueryResult<TData, TError> {\n  data: TData | undefined\n  error: TError | null\n  status: QueryStatus\n  isPending: boolean\n  isFetching: boolean\n  isSuccess: boolean\n  isError: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  hasNextPage: boolean\n  hasPreviousPage: boolean\n  isFetchingNextPage: boolean\n  isFetchingPreviousPage: boolean\n  isFetchNextPageError: boolean\n  isFetchPreviousPageError: boolean\n  refresh: () => void\n  fetchNextPage: () => void\n  fetchPreviousPage: () => void\n}\n\n/**\n * Subscribes a React component to an infinite query, with auto mount/unmount\n * lifecycle and bound `fetchNextPage` / `fetchPreviousPage` callbacks.\n */\nexport function useInfiniteQuery<TData, TError = Error, TPageParam = unknown>(\n  query: InfiniteQueryResult<TData, TError, TPageParam>,\n): UseInfiniteQueryResult<TData, TError> {\n  const state = useUnit({\n    data: query.$data,\n    error: query.$error,\n    status: query.$status,\n    isPending: query.$isPending,\n    isFetching: query.$isFetching,\n    isSuccess: query.$isSuccess,\n    isError: query.$isError,\n    isPlaceholderData: query.$isPlaceholderData,\n    fetchStatus: query.$fetchStatus,\n    hasNextPage: query.$hasNextPage,\n    hasPreviousPage: query.$hasPreviousPage,\n    isFetchingNextPage: query.$isFetchingNextPage,\n    isFetchingPreviousPage: query.$isFetchingPreviousPage,\n    isFetchNextPageError: query.$isFetchNextPageError,\n    isFetchPreviousPageError: query.$isFetchPreviousPageError,\n  })\n\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n  const fetchNextPage = useUnit(query.fetchNextPage)\n  const fetchPreviousPage = useUnit(query.fetchPreviousPage)\n\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  return { ...state, refresh, fetchNextPage, fetchPreviousPage }\n}\n\n// Suspense data path: read from a per-scope observer.\n//\n// The scope mount chain runs in useEffect, which is skipped while a component\n// is suspended — so on the very first render the scope's `$observer` may be\n// null. To get synchronous access to the observer's promise during suspense,\n// we construct a transient observer via the factory's hidden\n// `__createObserver(qc, { queryKey, enabled })` helper. The transient observer\n// reads from / writes to the same queryClient cache as the eventual scope\n// observer (which is created when mountFx runs after useEffect commits).\n//\n// The mount/unmount effect is still wired up so that other consumers reading\n// the same query through `useUnit` / `useQuery` see updates in scope state.\n\nfunction useObserverRerender(\n  observer: { subscribe: (cb: () => void) => () => void } | null,\n): void {\n  const [, forceRender] = React.useReducer((x: number) => x + 1, 0)\n  React.useEffect(() => {\n    if (!observer) return\n    return observer.subscribe(forceRender)\n  }, [observer])\n}\n\ninterface SuspenseFactory<TObserver> {\n  __createObserver(\n    qc: import('@tanstack/query-core').QueryClient,\n    init: { queryKey: unknown; enabled: boolean },\n  ): TObserver\n  __resolvedKey: import('effector').Store<unknown>\n  __enabled: import('effector').Store<boolean>\n}\n\nexport interface UseSuspenseQueryResult<TData, TError = Error> {\n  /** Resolved query data — non-nullable inside the rendered subtree (Suspense\n   * absorbed the pending state). */\n  data: TData\n  /** Always `null` past the Suspense gate; errors are thrown to the nearest\n   * `<ErrorBoundary>`. Typed as `TError | null` for consistency with\n   * `useQuery` so the same destructure works in both. */\n  error: TError | null\n  status: 'success'\n  isPending: false\n  isSuccess: true\n  isError: false\n  /** `true` while a background refetch is running. Use for refresh spinners. */\n  isFetching: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  refresh: () => void\n}\n\n/**\n * Reads a query for use inside a `<Suspense>` boundary. While the query is\n * pending, throws an inflight promise (queryClient-deduplicated). On error,\n * throws the error — catch with `<ErrorBoundary>`. Returns the same shape as\n * `useQuery`, but with `data` narrowed to non-nullable `TData` since the\n * pending state is impossible past the Suspense gate.\n */\nexport function useSuspenseQuery<TData, TError = Error>(\n  query: QueryResult<TData, TError>,\n): UseSuspenseQueryResult<TData, TError> {\n  // Auto-mount lifecycle so concurrent consumers (useUnit / useQuery) reading\n  // the same query through the effector scope stay in sync.\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  const observer = useSuspenseObserver(query)\n\n  useObserverRerender(observer)\n\n  const result = observer.getOptimisticResult(observer.options as any)\n\n  if (result.status === 'error') throw result.error\n  if (result.status === 'pending') {\n    throw observer.fetchOptimistic(observer.options as any)\n  }\n\n  // Read all secondary fields from the observer result, not the effector\n  // stores: stores are only populated after mountFx fires from useEffect,\n  // which on the very first successful render hasn't run yet. The observer\n  // result is always live and consistent.\n  return {\n    data: result.data as TData,\n    error: result.error as TError | null,\n    status: 'success',\n    isPending: false,\n    isSuccess: true,\n    isError: false,\n    isFetching: result.isFetching,\n    isPlaceholderData: result.isPlaceholderData,\n    fetchStatus: result.fetchStatus,\n    refresh,\n  }\n}\n\nexport interface UseSuspenseInfiniteQueryResult<TData, TError = Error> {\n  data: TData\n  error: TError | null\n  status: 'success'\n  isPending: false\n  isSuccess: true\n  isError: false\n  isFetching: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  hasNextPage: boolean\n  hasPreviousPage: boolean\n  isFetchingNextPage: boolean\n  isFetchingPreviousPage: boolean\n  isFetchNextPageError: boolean\n  isFetchPreviousPageError: boolean\n  refresh: () => void\n  fetchNextPage: () => void\n  fetchPreviousPage: () => void\n}\n\n/**\n * Suspense variant of {@link useInfiniteQuery}. Same shape as `useInfiniteQuery`,\n * with `data` narrowed to non-nullable.\n */\nexport function useSuspenseInfiniteQuery<\n  TData,\n  TError = Error,\n  TPageParam = unknown,\n>(\n  query: InfiniteQueryResult<TData, TError, TPageParam>,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n  const fetchNextPage = useUnit(query.fetchNextPage)\n  const fetchPreviousPage = useUnit(query.fetchPreviousPage)\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  const observer = useSuspenseObserver(query)\n\n  useObserverRerender(observer)\n\n  const result = observer.getOptimisticResult(observer.options as any)\n\n  if (result.status === 'error') throw result.error\n  if (result.status === 'pending') {\n    throw (\n      observer as unknown as {\n        fetchOptimistic: (\n          options: typeof observer.options,\n        ) => Promise<unknown>\n      }\n    ).fetchOptimistic(observer.options)\n  }\n\n  const r = result as typeof result & {\n    hasNextPage: boolean\n    hasPreviousPage: boolean\n    isFetchingNextPage: boolean\n    isFetchingPreviousPage: boolean\n    isFetchNextPageError: boolean\n    isFetchPreviousPageError: boolean\n  }\n\n  return {\n    data: r.data as TData,\n    error: r.error as TError | null,\n    status: 'success',\n    isPending: false,\n    isSuccess: true,\n    isError: false,\n    isFetching: r.isFetching,\n    isPlaceholderData: r.isPlaceholderData,\n    fetchStatus: r.fetchStatus,\n    hasNextPage: r.hasNextPage,\n    hasPreviousPage: r.hasPreviousPage,\n    isFetchingNextPage: r.isFetchingNextPage,\n    isFetchingPreviousPage: r.isFetchingPreviousPage,\n    isFetchNextPageError: r.isFetchNextPageError,\n    isFetchPreviousPageError: r.isFetchPreviousPageError,\n    refresh,\n    fetchNextPage,\n    fetchPreviousPage,\n  }\n}\n\n/**\n * Resolves a per-scope observer for suspense usage. Prefers the scope's\n * `$observer` (set by mountFx); falls back to a transient observer\n * constructed via `__createObserver` so that the very first render — before\n * useEffect has fired — has a working observer. Both flavors read/write the\n * same queryClient cache, so the transient observer is a thin wrapper.\n */\nfunction useSuspenseObserver<\n  TQuery extends {\n    $observer: import('effector').Store<TObserver | null>\n    $queryClient: import('effector').Store<\n      import('@tanstack/query-core').QueryClient | null\n    >\n  },\n  TObserver extends {\n    options: { queryKey: unknown }\n    setOptions(options: any): void\n    subscribe(cb: () => void): () => void\n    getOptimisticResult(options: any): {\n      status: 'pending' | 'success' | 'error'\n      data: unknown\n      error: unknown\n      isFetching: boolean\n      isPlaceholderData: boolean\n      fetchStatus: FetchStatus\n      // Infinite-query result fields — present at runtime when the underlying\n      // observer is an InfiniteQueryObserver; the suspense hooks narrow as\n      // needed. Typed as `any` here to keep the constraint loose.\n      hasNextPage?: any\n      hasPreviousPage?: any\n      isFetchingNextPage?: any\n      isFetchingPreviousPage?: any\n      isFetchNextPageError?: any\n      isFetchPreviousPageError?: any\n    }\n    fetchOptimistic(options: any): Promise<unknown>\n  },\n>(query: TQuery): TObserver {\n  const factory = query as unknown as TQuery & SuspenseFactory<TObserver>\n  const observerInScope = useUnit(query.$observer) as TObserver | null\n  const qc = useUnit(query.$queryClient)\n  const queryKey = useUnit(factory.__resolvedKey)\n  const enabled = useUnit(factory.__enabled)\n\n  // Memoize a transient observer keyed by qc, so it survives across renders\n  // while the scope observer is null. Once observerInScope appears, we\n  // switch — the transient one is unsubscribed and abandoned (it never\n  // subscribed to queryCache, so there is nothing to leak).\n  const transient = React.useMemo(() => {\n    if (observerInScope || !qc) return null\n    return factory.__createObserver(qc, { queryKey, enabled })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [observerInScope, qc, factory])\n\n  // Keep the transient observer's options in sync with reactive key/enabled,\n  // so re-suspending on key changes still works through it.\n  React.useEffect(() => {\n    if (!transient) return\n    transient.setOptions({ ...transient.options, queryKey, enabled })\n  }, [transient, queryKey, enabled])\n\n  const observer = observerInScope ?? transient\n  if (!observer) {\n    throw new Error(\n      '[@effector-tanstack-query/react] useSuspenseQuery: no QueryClient is set. ' +\n        'Call setQueryClient(qc) or pass it to fork({ values: [[$queryClient, qc]] }).',\n    )\n  }\n  return observer\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,130 @@
+import { QueryStatus, FetchStatus, MutateOptions } from '@tanstack/query-core';
+import { MutationStatus, InfiniteQueryResult, MutationResult, QueryResult } from '@effector-tanstack-query/core';
+
+interface UseQueryResult<TData, TError = Error> {
+    data: TData | undefined;
+    error: TError | null;
+    status: QueryStatus;
+    isPending: boolean;
+    isFetching: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    refresh: () => void;
+}
+/**
+ * Subscribes a React component to a query, automatically calling
+ * `mounted()` on mount and `unmounted()` on cleanup.
+ */
+declare function useQuery<TData, TError = Error>(query: QueryResult<TData, TError>): UseQueryResult<TData, TError>;
+interface UseMutationResult<TData, TError, TVariables> {
+    data: TData | undefined;
+    error: TError | null;
+    status: MutationStatus;
+    variables: TVariables | undefined;
+    isPaused: boolean;
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isIdle: boolean;
+    mutate: (variables: TVariables) => void;
+    /**
+     * Trigger the mutation with per-call callbacks layered on top of the
+     * observer-level ones (`onSuccess` / `onError` / `onSettled` in
+     * `createMutation` options). Use this for component-local reactions
+     * that don't fit module-level `sample` wiring — navigation after success,
+     * one-shot toasts, etc.
+     */
+    mutateWith: (args: {
+        variables: TVariables;
+        onSuccess?: MutateOptions<TData, TError, TVariables>['onSuccess'];
+        onError?: MutateOptions<TData, TError, TVariables>['onError'];
+        onSettled?: MutateOptions<TData, TError, TVariables>['onSettled'];
+    }) => void;
+    reset: () => void;
+}
+/**
+ * Subscribes a React component to a mutation, automatically calling
+ * `start()` on mount and `unmounted()` on cleanup so the queryClient can
+ * garbage-collect the mutation entry once no observers remain.
+ */
+declare function useMutation<TData = unknown, TError = Error, TVariables = void>(mutation: MutationResult<TData, TError, TVariables>): UseMutationResult<TData, TError, TVariables>;
+interface UseInfiniteQueryResult<TData, TError> {
+    data: TData | undefined;
+    error: TError | null;
+    status: QueryStatus;
+    isPending: boolean;
+    isFetching: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    refresh: () => void;
+    fetchNextPage: () => void;
+    fetchPreviousPage: () => void;
+}
+/**
+ * Subscribes a React component to an infinite query, with auto mount/unmount
+ * lifecycle and bound `fetchNextPage` / `fetchPreviousPage` callbacks.
+ */
+declare function useInfiniteQuery<TData, TError = Error, TPageParam = unknown>(query: InfiniteQueryResult<TData, TError, TPageParam>): UseInfiniteQueryResult<TData, TError>;
+interface UseSuspenseQueryResult<TData, TError = Error> {
+    /** Resolved query data — non-nullable inside the rendered subtree (Suspense
+     * absorbed the pending state). */
+    data: TData;
+    /** Always `null` past the Suspense gate; errors are thrown to the nearest
+     * `<ErrorBoundary>`. Typed as `TError | null` for consistency with
+     * `useQuery` so the same destructure works in both. */
+    error: TError | null;
+    status: 'success';
+    isPending: false;
+    isSuccess: true;
+    isError: false;
+    /** `true` while a background refetch is running. Use for refresh spinners. */
+    isFetching: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    refresh: () => void;
+}
+/**
+ * Reads a query for use inside a `<Suspense>` boundary. While the query is
+ * pending, throws an inflight promise (queryClient-deduplicated). On error,
+ * throws the error — catch with `<ErrorBoundary>`. Returns the same shape as
+ * `useQuery`, but with `data` narrowed to non-nullable `TData` since the
+ * pending state is impossible past the Suspense gate.
+ */
+declare function useSuspenseQuery<TData, TError = Error>(query: QueryResult<TData, TError>): UseSuspenseQueryResult<TData, TError>;
+interface UseSuspenseInfiniteQueryResult<TData, TError = Error> {
+    data: TData;
+    error: TError | null;
+    status: 'success';
+    isPending: false;
+    isSuccess: true;
+    isError: false;
+    isFetching: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    refresh: () => void;
+    fetchNextPage: () => void;
+    fetchPreviousPage: () => void;
+}
+/**
+ * Suspense variant of {@link useInfiniteQuery}. Same shape as `useInfiniteQuery`,
+ * with `data` narrowed to non-nullable.
+ */
+declare function useSuspenseInfiniteQuery<TData, TError = Error, TPageParam = unknown>(query: InfiniteQueryResult<TData, TError, TPageParam>): UseSuspenseInfiniteQueryResult<TData, TError>;
+
+export { type UseInfiniteQueryResult, type UseMutationResult, type UseQueryResult, type UseSuspenseInfiniteQueryResult, type UseSuspenseQueryResult, useInfiniteQuery, useMutation, useQuery, useSuspenseInfiniteQuery, useSuspenseQuery };

package/dist/index.d.ts

@@ -0,0 +1,130 @@
+import { QueryStatus, FetchStatus, MutateOptions } from '@tanstack/query-core';
+import { MutationStatus, InfiniteQueryResult, MutationResult, QueryResult } from '@effector-tanstack-query/core';
+
+interface UseQueryResult<TData, TError = Error> {
+    data: TData | undefined;
+    error: TError | null;
+    status: QueryStatus;
+    isPending: boolean;
+    isFetching: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    refresh: () => void;
+}
+/**
+ * Subscribes a React component to a query, automatically calling
+ * `mounted()` on mount and `unmounted()` on cleanup.
+ */
+declare function useQuery<TData, TError = Error>(query: QueryResult<TData, TError>): UseQueryResult<TData, TError>;
+interface UseMutationResult<TData, TError, TVariables> {
+    data: TData | undefined;
+    error: TError | null;
+    status: MutationStatus;
+    variables: TVariables | undefined;
+    isPaused: boolean;
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isIdle: boolean;
+    mutate: (variables: TVariables) => void;
+    /**
+     * Trigger the mutation with per-call callbacks layered on top of the
+     * observer-level ones (`onSuccess` / `onError` / `onSettled` in
+     * `createMutation` options). Use this for component-local reactions
+     * that don't fit module-level `sample` wiring — navigation after success,
+     * one-shot toasts, etc.
+     */
+    mutateWith: (args: {
+        variables: TVariables;
+        onSuccess?: MutateOptions<TData, TError, TVariables>['onSuccess'];
+        onError?: MutateOptions<TData, TError, TVariables>['onError'];
+        onSettled?: MutateOptions<TData, TError, TVariables>['onSettled'];
+    }) => void;
+    reset: () => void;
+}
+/**
+ * Subscribes a React component to a mutation, automatically calling
+ * `start()` on mount and `unmounted()` on cleanup so the queryClient can
+ * garbage-collect the mutation entry once no observers remain.
+ */
+declare function useMutation<TData = unknown, TError = Error, TVariables = void>(mutation: MutationResult<TData, TError, TVariables>): UseMutationResult<TData, TError, TVariables>;
+interface UseInfiniteQueryResult<TData, TError> {
+    data: TData | undefined;
+    error: TError | null;
+    status: QueryStatus;
+    isPending: boolean;
+    isFetching: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    refresh: () => void;
+    fetchNextPage: () => void;
+    fetchPreviousPage: () => void;
+}
+/**
+ * Subscribes a React component to an infinite query, with auto mount/unmount
+ * lifecycle and bound `fetchNextPage` / `fetchPreviousPage` callbacks.
+ */
+declare function useInfiniteQuery<TData, TError = Error, TPageParam = unknown>(query: InfiniteQueryResult<TData, TError, TPageParam>): UseInfiniteQueryResult<TData, TError>;
+interface UseSuspenseQueryResult<TData, TError = Error> {
+    /** Resolved query data — non-nullable inside the rendered subtree (Suspense
+     * absorbed the pending state). */
+    data: TData;
+    /** Always `null` past the Suspense gate; errors are thrown to the nearest
+     * `<ErrorBoundary>`. Typed as `TError | null` for consistency with
+     * `useQuery` so the same destructure works in both. */
+    error: TError | null;
+    status: 'success';
+    isPending: false;
+    isSuccess: true;
+    isError: false;
+    /** `true` while a background refetch is running. Use for refresh spinners. */
+    isFetching: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    refresh: () => void;
+}
+/**
+ * Reads a query for use inside a `<Suspense>` boundary. While the query is
+ * pending, throws an inflight promise (queryClient-deduplicated). On error,
+ * throws the error — catch with `<ErrorBoundary>`. Returns the same shape as
+ * `useQuery`, but with `data` narrowed to non-nullable `TData` since the
+ * pending state is impossible past the Suspense gate.
+ */
+declare function useSuspenseQuery<TData, TError = Error>(query: QueryResult<TData, TError>): UseSuspenseQueryResult<TData, TError>;
+interface UseSuspenseInfiniteQueryResult<TData, TError = Error> {
+    data: TData;
+    error: TError | null;
+    status: 'success';
+    isPending: false;
+    isSuccess: true;
+    isError: false;
+    isFetching: boolean;
+    isPlaceholderData: boolean;
+    fetchStatus: FetchStatus;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    refresh: () => void;
+    fetchNextPage: () => void;
+    fetchPreviousPage: () => void;
+}
+/**
+ * Suspense variant of {@link useInfiniteQuery}. Same shape as `useInfiniteQuery`,
+ * with `data` narrowed to non-nullable.
+ */
+declare function useSuspenseInfiniteQuery<TData, TError = Error, TPageParam = unknown>(query: InfiniteQueryResult<TData, TError, TPageParam>): UseSuspenseInfiniteQueryResult<TData, TError>;
+
+export { type UseInfiniteQueryResult, type UseMutationResult, type UseQueryResult, type UseSuspenseInfiniteQueryResult, type UseSuspenseQueryResult, useInfiniteQuery, useMutation, useQuery, useSuspenseInfiniteQuery, useSuspenseQuery };

package/dist/index.js

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import { useUnit } from 'effector-react';
+
+// src/index.ts
+function useQuery(query) {
+  const state = useUnit({
+    data: query.$data,
+    error: query.$error,
+    status: query.$status,
+    isPending: query.$isPending,
+    isFetching: query.$isFetching,
+    isSuccess: query.$isSuccess,
+    isError: query.$isError,
+    isPlaceholderData: query.$isPlaceholderData,
+    fetchStatus: query.$fetchStatus
+  });
+  const mount = useUnit(query.mounted);
+  const unmount = useUnit(query.unmounted);
+  const refresh = useUnit(query.refresh);
+  React.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  return { ...state, refresh };
+}
+function useMutation(mutation) {
+  const state = useUnit({
+    data: mutation.$data,
+    error: mutation.$error,
+    status: mutation.$status,
+    variables: mutation.$variables,
+    isPaused: mutation.$isPaused,
+    isPending: mutation.$isPending,
+    isSuccess: mutation.$isSuccess,
+    isError: mutation.$isError,
+    isIdle: mutation.$isIdle
+  });
+  const start = useUnit(mutation.start);
+  const unmount = useUnit(mutation.unmounted);
+  const mutate = useUnit(mutation.mutate);
+  const mutateWith = useUnit(mutation.mutateWith);
+  const reset = useUnit(mutation.reset);
+  React.useEffect(() => {
+    start();
+    return () => unmount();
+  }, [start, unmount]);
+  return { ...state, mutate, mutateWith, reset };
+}
+function useInfiniteQuery(query) {
+  const state = useUnit({
+    data: query.$data,
+    error: query.$error,
+    status: query.$status,
+    isPending: query.$isPending,
+    isFetching: query.$isFetching,
+    isSuccess: query.$isSuccess,
+    isError: query.$isError,
+    isPlaceholderData: query.$isPlaceholderData,
+    fetchStatus: query.$fetchStatus,
+    hasNextPage: query.$hasNextPage,
+    hasPreviousPage: query.$hasPreviousPage,
+    isFetchingNextPage: query.$isFetchingNextPage,
+    isFetchingPreviousPage: query.$isFetchingPreviousPage,
+    isFetchNextPageError: query.$isFetchNextPageError,
+    isFetchPreviousPageError: query.$isFetchPreviousPageError
+  });
+  const mount = useUnit(query.mounted);
+  const unmount = useUnit(query.unmounted);
+  const refresh = useUnit(query.refresh);
+  const fetchNextPage = useUnit(query.fetchNextPage);
+  const fetchPreviousPage = useUnit(query.fetchPreviousPage);
+  React.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  return { ...state, refresh, fetchNextPage, fetchPreviousPage };
+}
+function useObserverRerender(observer) {
+  const [, forceRender] = React.useReducer((x) => x + 1, 0);
+  React.useEffect(() => {
+    if (!observer) return;
+    return observer.subscribe(forceRender);
+  }, [observer]);
+}
+function useSuspenseQuery(query) {
+  const mount = useUnit(query.mounted);
+  const unmount = useUnit(query.unmounted);
+  const refresh = useUnit(query.refresh);
+  React.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  const observer = useSuspenseObserver(query);
+  useObserverRerender(observer);
+  const result = observer.getOptimisticResult(observer.options);
+  if (result.status === "error") throw result.error;
+  if (result.status === "pending") {
+    throw observer.fetchOptimistic(observer.options);
+  }
+  return {
+    data: result.data,
+    error: result.error,
+    status: "success",
+    isPending: false,
+    isSuccess: true,
+    isError: false,
+    isFetching: result.isFetching,
+    isPlaceholderData: result.isPlaceholderData,
+    fetchStatus: result.fetchStatus,
+    refresh
+  };
+}
+function useSuspenseInfiniteQuery(query) {
+  const mount = useUnit(query.mounted);
+  const unmount = useUnit(query.unmounted);
+  const refresh = useUnit(query.refresh);
+  const fetchNextPage = useUnit(query.fetchNextPage);
+  const fetchPreviousPage = useUnit(query.fetchPreviousPage);
+  React.useEffect(() => {
+    mount();
+    return () => unmount();
+  }, [mount, unmount]);
+  const observer = useSuspenseObserver(query);
+  useObserverRerender(observer);
+  const result = observer.getOptimisticResult(observer.options);
+  if (result.status === "error") throw result.error;
+  if (result.status === "pending") {
+    throw observer.fetchOptimistic(observer.options);
+  }
+  const r = result;
+  return {
+    data: r.data,
+    error: r.error,
+    status: "success",
+    isPending: false,
+    isSuccess: true,
+    isError: false,
+    isFetching: r.isFetching,
+    isPlaceholderData: r.isPlaceholderData,
+    fetchStatus: r.fetchStatus,
+    hasNextPage: r.hasNextPage,
+    hasPreviousPage: r.hasPreviousPage,
+    isFetchingNextPage: r.isFetchingNextPage,
+    isFetchingPreviousPage: r.isFetchingPreviousPage,
+    isFetchNextPageError: r.isFetchNextPageError,
+    isFetchPreviousPageError: r.isFetchPreviousPageError,
+    refresh,
+    fetchNextPage,
+    fetchPreviousPage
+  };
+}
+function useSuspenseObserver(query) {
+  const factory = query;
+  const observerInScope = useUnit(query.$observer);
+  const qc = useUnit(query.$queryClient);
+  const queryKey = useUnit(factory.__resolvedKey);
+  const enabled = useUnit(factory.__enabled);
+  const transient = React.useMemo(() => {
+    if (observerInScope || !qc) return null;
+    return factory.__createObserver(qc, { queryKey, enabled });
+  }, [observerInScope, qc, factory]);
+  React.useEffect(() => {
+    if (!transient) return;
+    transient.setOptions({ ...transient.options, queryKey, enabled });
+  }, [transient, queryKey, enabled]);
+  const observer = observerInScope ?? transient;
+  if (!observer) {
+    throw new Error(
+      "[@effector-tanstack-query/react] useSuspenseQuery: no QueryClient is set. Call setQueryClient(qc) or pass it to fork({ values: [[$queryClient, qc]] })."
+    );
+  }
+  return observer;
+}
+
+export { useInfiniteQuery, useMutation, useQuery, useSuspenseInfiniteQuery, useSuspenseQuery };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from 'react'\nimport { useUnit } from 'effector-react'\nimport type {\n  FetchStatus,\n  MutateOptions,\n  QueryStatus,\n} from '@tanstack/query-core'\nimport type {\n  InfiniteQueryResult,\n  MutationResult,\n  MutationStatus,\n  QueryResult,\n} from '@effector-tanstack-query/core'\n\nexport interface UseQueryResult<TData, TError = Error> {\n  data: TData | undefined\n  error: TError | null\n  status: QueryStatus\n  isPending: boolean\n  isFetching: boolean\n  isSuccess: boolean\n  isError: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  refresh: () => void\n}\n\n/**\n * Subscribes a React component to a query, automatically calling\n * `mounted()` on mount and `unmounted()` on cleanup.\n */\nexport function useQuery<TData, TError = Error>(\n  query: QueryResult<TData, TError>,\n): UseQueryResult<TData, TError> {\n  const state = useUnit({\n    data: query.$data,\n    error: query.$error,\n    status: query.$status,\n    isPending: query.$isPending,\n    isFetching: query.$isFetching,\n    isSuccess: query.$isSuccess,\n    isError: query.$isError,\n    isPlaceholderData: query.$isPlaceholderData,\n    fetchStatus: query.$fetchStatus,\n  })\n\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  return { ...state, refresh }\n}\n\nexport interface UseMutationResult<TData, TError, TVariables> {\n  data: TData | undefined\n  error: TError | null\n  status: MutationStatus\n  variables: TVariables | undefined\n  isPaused: boolean\n  isPending: boolean\n  isSuccess: boolean\n  isError: boolean\n  isIdle: boolean\n  mutate: (variables: TVariables) => void\n  /**\n   * Trigger the mutation with per-call callbacks layered on top of the\n   * observer-level ones (`onSuccess` / `onError` / `onSettled` in\n   * `createMutation` options). Use this for component-local reactions\n   * that don't fit module-level `sample` wiring — navigation after success,\n   * one-shot toasts, etc.\n   */\n  mutateWith: (args: {\n    variables: TVariables\n    onSuccess?: MutateOptions<TData, TError, TVariables>['onSuccess']\n    onError?: MutateOptions<TData, TError, TVariables>['onError']\n    onSettled?: MutateOptions<TData, TError, TVariables>['onSettled']\n  }) => void\n  reset: () => void\n}\n\n/**\n * Subscribes a React component to a mutation, automatically calling\n * `start()` on mount and `unmounted()` on cleanup so the queryClient can\n * garbage-collect the mutation entry once no observers remain.\n */\nexport function useMutation<TData = unknown, TError = Error, TVariables = void>(\n  mutation: MutationResult<TData, TError, TVariables>,\n): UseMutationResult<TData, TError, TVariables> {\n  const state = useUnit({\n    data: mutation.$data,\n    error: mutation.$error,\n    status: mutation.$status,\n    variables: mutation.$variables,\n    isPaused: mutation.$isPaused,\n    isPending: mutation.$isPending,\n    isSuccess: mutation.$isSuccess,\n    isError: mutation.$isError,\n    isIdle: mutation.$isIdle,\n  })\n\n  const start = useUnit(mutation.start)\n  const unmount = useUnit(mutation.unmounted)\n  const mutate = useUnit(mutation.mutate)\n  const mutateWith = useUnit(mutation.mutateWith)\n  const reset = useUnit(mutation.reset)\n\n  React.useEffect(() => {\n    start()\n    return () => unmount()\n  }, [start, unmount])\n\n  return { ...state, mutate, mutateWith, reset }\n}\n\nexport interface UseInfiniteQueryResult<TData, TError> {\n  data: TData | undefined\n  error: TError | null\n  status: QueryStatus\n  isPending: boolean\n  isFetching: boolean\n  isSuccess: boolean\n  isError: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  hasNextPage: boolean\n  hasPreviousPage: boolean\n  isFetchingNextPage: boolean\n  isFetchingPreviousPage: boolean\n  isFetchNextPageError: boolean\n  isFetchPreviousPageError: boolean\n  refresh: () => void\n  fetchNextPage: () => void\n  fetchPreviousPage: () => void\n}\n\n/**\n * Subscribes a React component to an infinite query, with auto mount/unmount\n * lifecycle and bound `fetchNextPage` / `fetchPreviousPage` callbacks.\n */\nexport function useInfiniteQuery<TData, TError = Error, TPageParam = unknown>(\n  query: InfiniteQueryResult<TData, TError, TPageParam>,\n): UseInfiniteQueryResult<TData, TError> {\n  const state = useUnit({\n    data: query.$data,\n    error: query.$error,\n    status: query.$status,\n    isPending: query.$isPending,\n    isFetching: query.$isFetching,\n    isSuccess: query.$isSuccess,\n    isError: query.$isError,\n    isPlaceholderData: query.$isPlaceholderData,\n    fetchStatus: query.$fetchStatus,\n    hasNextPage: query.$hasNextPage,\n    hasPreviousPage: query.$hasPreviousPage,\n    isFetchingNextPage: query.$isFetchingNextPage,\n    isFetchingPreviousPage: query.$isFetchingPreviousPage,\n    isFetchNextPageError: query.$isFetchNextPageError,\n    isFetchPreviousPageError: query.$isFetchPreviousPageError,\n  })\n\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n  const fetchNextPage = useUnit(query.fetchNextPage)\n  const fetchPreviousPage = useUnit(query.fetchPreviousPage)\n\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  return { ...state, refresh, fetchNextPage, fetchPreviousPage }\n}\n\n// Suspense data path: read from a per-scope observer.\n//\n// The scope mount chain runs in useEffect, which is skipped while a component\n// is suspended — so on the very first render the scope's `$observer` may be\n// null. To get synchronous access to the observer's promise during suspense,\n// we construct a transient observer via the factory's hidden\n// `__createObserver(qc, { queryKey, enabled })` helper. The transient observer\n// reads from / writes to the same queryClient cache as the eventual scope\n// observer (which is created when mountFx runs after useEffect commits).\n//\n// The mount/unmount effect is still wired up so that other consumers reading\n// the same query through `useUnit` / `useQuery` see updates in scope state.\n\nfunction useObserverRerender(\n  observer: { subscribe: (cb: () => void) => () => void } | null,\n): void {\n  const [, forceRender] = React.useReducer((x: number) => x + 1, 0)\n  React.useEffect(() => {\n    if (!observer) return\n    return observer.subscribe(forceRender)\n  }, [observer])\n}\n\ninterface SuspenseFactory<TObserver> {\n  __createObserver(\n    qc: import('@tanstack/query-core').QueryClient,\n    init: { queryKey: unknown; enabled: boolean },\n  ): TObserver\n  __resolvedKey: import('effector').Store<unknown>\n  __enabled: import('effector').Store<boolean>\n}\n\nexport interface UseSuspenseQueryResult<TData, TError = Error> {\n  /** Resolved query data — non-nullable inside the rendered subtree (Suspense\n   * absorbed the pending state). */\n  data: TData\n  /** Always `null` past the Suspense gate; errors are thrown to the nearest\n   * `<ErrorBoundary>`. Typed as `TError | null` for consistency with\n   * `useQuery` so the same destructure works in both. */\n  error: TError | null\n  status: 'success'\n  isPending: false\n  isSuccess: true\n  isError: false\n  /** `true` while a background refetch is running. Use for refresh spinners. */\n  isFetching: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  refresh: () => void\n}\n\n/**\n * Reads a query for use inside a `<Suspense>` boundary. While the query is\n * pending, throws an inflight promise (queryClient-deduplicated). On error,\n * throws the error — catch with `<ErrorBoundary>`. Returns the same shape as\n * `useQuery`, but with `data` narrowed to non-nullable `TData` since the\n * pending state is impossible past the Suspense gate.\n */\nexport function useSuspenseQuery<TData, TError = Error>(\n  query: QueryResult<TData, TError>,\n): UseSuspenseQueryResult<TData, TError> {\n  // Auto-mount lifecycle so concurrent consumers (useUnit / useQuery) reading\n  // the same query through the effector scope stay in sync.\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  const observer = useSuspenseObserver(query)\n\n  useObserverRerender(observer)\n\n  const result = observer.getOptimisticResult(observer.options as any)\n\n  if (result.status === 'error') throw result.error\n  if (result.status === 'pending') {\n    throw observer.fetchOptimistic(observer.options as any)\n  }\n\n  // Read all secondary fields from the observer result, not the effector\n  // stores: stores are only populated after mountFx fires from useEffect,\n  // which on the very first successful render hasn't run yet. The observer\n  // result is always live and consistent.\n  return {\n    data: result.data as TData,\n    error: result.error as TError | null,\n    status: 'success',\n    isPending: false,\n    isSuccess: true,\n    isError: false,\n    isFetching: result.isFetching,\n    isPlaceholderData: result.isPlaceholderData,\n    fetchStatus: result.fetchStatus,\n    refresh,\n  }\n}\n\nexport interface UseSuspenseInfiniteQueryResult<TData, TError = Error> {\n  data: TData\n  error: TError | null\n  status: 'success'\n  isPending: false\n  isSuccess: true\n  isError: false\n  isFetching: boolean\n  isPlaceholderData: boolean\n  fetchStatus: FetchStatus\n  hasNextPage: boolean\n  hasPreviousPage: boolean\n  isFetchingNextPage: boolean\n  isFetchingPreviousPage: boolean\n  isFetchNextPageError: boolean\n  isFetchPreviousPageError: boolean\n  refresh: () => void\n  fetchNextPage: () => void\n  fetchPreviousPage: () => void\n}\n\n/**\n * Suspense variant of {@link useInfiniteQuery}. Same shape as `useInfiniteQuery`,\n * with `data` narrowed to non-nullable.\n */\nexport function useSuspenseInfiniteQuery<\n  TData,\n  TError = Error,\n  TPageParam = unknown,\n>(\n  query: InfiniteQueryResult<TData, TError, TPageParam>,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n  const mount = useUnit(query.mounted)\n  const unmount = useUnit(query.unmounted)\n  const refresh = useUnit(query.refresh)\n  const fetchNextPage = useUnit(query.fetchNextPage)\n  const fetchPreviousPage = useUnit(query.fetchPreviousPage)\n  React.useEffect(() => {\n    mount()\n    return () => unmount()\n  }, [mount, unmount])\n\n  const observer = useSuspenseObserver(query)\n\n  useObserverRerender(observer)\n\n  const result = observer.getOptimisticResult(observer.options as any)\n\n  if (result.status === 'error') throw result.error\n  if (result.status === 'pending') {\n    throw (\n      observer as unknown as {\n        fetchOptimistic: (\n          options: typeof observer.options,\n        ) => Promise<unknown>\n      }\n    ).fetchOptimistic(observer.options)\n  }\n\n  const r = result as typeof result & {\n    hasNextPage: boolean\n    hasPreviousPage: boolean\n    isFetchingNextPage: boolean\n    isFetchingPreviousPage: boolean\n    isFetchNextPageError: boolean\n    isFetchPreviousPageError: boolean\n  }\n\n  return {\n    data: r.data as TData,\n    error: r.error as TError | null,\n    status: 'success',\n    isPending: false,\n    isSuccess: true,\n    isError: false,\n    isFetching: r.isFetching,\n    isPlaceholderData: r.isPlaceholderData,\n    fetchStatus: r.fetchStatus,\n    hasNextPage: r.hasNextPage,\n    hasPreviousPage: r.hasPreviousPage,\n    isFetchingNextPage: r.isFetchingNextPage,\n    isFetchingPreviousPage: r.isFetchingPreviousPage,\n    isFetchNextPageError: r.isFetchNextPageError,\n    isFetchPreviousPageError: r.isFetchPreviousPageError,\n    refresh,\n    fetchNextPage,\n    fetchPreviousPage,\n  }\n}\n\n/**\n * Resolves a per-scope observer for suspense usage. Prefers the scope's\n * `$observer` (set by mountFx); falls back to a transient observer\n * constructed via `__createObserver` so that the very first render — before\n * useEffect has fired — has a working observer. Both flavors read/write the\n * same queryClient cache, so the transient observer is a thin wrapper.\n */\nfunction useSuspenseObserver<\n  TQuery extends {\n    $observer: import('effector').Store<TObserver | null>\n    $queryClient: import('effector').Store<\n      import('@tanstack/query-core').QueryClient | null\n    >\n  },\n  TObserver extends {\n    options: { queryKey: unknown }\n    setOptions(options: any): void\n    subscribe(cb: () => void): () => void\n    getOptimisticResult(options: any): {\n      status: 'pending' | 'success' | 'error'\n      data: unknown\n      error: unknown\n      isFetching: boolean\n      isPlaceholderData: boolean\n      fetchStatus: FetchStatus\n      // Infinite-query result fields — present at runtime when the underlying\n      // observer is an InfiniteQueryObserver; the suspense hooks narrow as\n      // needed. Typed as `any` here to keep the constraint loose.\n      hasNextPage?: any\n      hasPreviousPage?: any\n      isFetchingNextPage?: any\n      isFetchingPreviousPage?: any\n      isFetchNextPageError?: any\n      isFetchPreviousPageError?: any\n    }\n    fetchOptimistic(options: any): Promise<unknown>\n  },\n>(query: TQuery): TObserver {\n  const factory = query as unknown as TQuery & SuspenseFactory<TObserver>\n  const observerInScope = useUnit(query.$observer) as TObserver | null\n  const qc = useUnit(query.$queryClient)\n  const queryKey = useUnit(factory.__resolvedKey)\n  const enabled = useUnit(factory.__enabled)\n\n  // Memoize a transient observer keyed by qc, so it survives across renders\n  // while the scope observer is null. Once observerInScope appears, we\n  // switch — the transient one is unsubscribed and abandoned (it never\n  // subscribed to queryCache, so there is nothing to leak).\n  const transient = React.useMemo(() => {\n    if (observerInScope || !qc) return null\n    return factory.__createObserver(qc, { queryKey, enabled })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [observerInScope, qc, factory])\n\n  // Keep the transient observer's options in sync with reactive key/enabled,\n  // so re-suspending on key changes still works through it.\n  React.useEffect(() => {\n    if (!transient) return\n    transient.setOptions({ ...transient.options, queryKey, enabled })\n  }, [transient, queryKey, enabled])\n\n  const observer = observerInScope ?? transient\n  if (!observer) {\n    throw new Error(\n      '[@effector-tanstack-query/react] useSuspenseQuery: no QueryClient is set. ' +\n        'Call setQueryClient(qc) or pass it to fork({ values: [[$queryClient, qc]] }).',\n    )\n  }\n  return observer\n}\n"]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@effector-tanstack-query/react",
+  "version": "0.1.0",
+  "description": "React hooks for @effector-tanstack-query/core — useQuery, useMutation, useInfiniteQuery, useSuspenseQuery, useSuspenseInfiniteQuery",
+  "license": "MIT",
+  "author": "Ilya Agarkov <ilya.al.ag@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ilyaagarkov/effector-tanstack-query.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/ilyaagarkov/effector-tanstack-query#readme",
+  "bugs": {
+    "url": "https://github.com/ilyaagarkov/effector-tanstack-query/issues"
+  },
+  "keywords": [
+    "effector",
+    "tanstack",
+    "query",
+    "react",
+    "hooks",
+    "suspense"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "clean": "rm -rf ./dist ./coverage",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:types": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@effector-tanstack-query/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "@tanstack/query-core": "^5.0.0",
+    "effector": ">=23.0.0",
+    "effector-react": ">=23.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,439 @@
+import * as React from 'react'
+import { useUnit } from 'effector-react'
+import type {
+  FetchStatus,
+  MutateOptions,
+  QueryStatus,
+} from '@tanstack/query-core'
+import type {
+  InfiniteQueryResult,
+  MutationResult,
+  MutationStatus,
+  QueryResult,
+} from '@effector-tanstack-query/core'
+
+export interface UseQueryResult<TData, TError = Error> {
+  data: TData | undefined
+  error: TError | null
+  status: QueryStatus
+  isPending: boolean
+  isFetching: boolean
+  isSuccess: boolean
+  isError: boolean
+  isPlaceholderData: boolean
+  fetchStatus: FetchStatus
+  refresh: () => void
+}
+
+/**
+ * Subscribes a React component to a query, automatically calling
+ * `mounted()` on mount and `unmounted()` on cleanup.
+ */
+export function useQuery<TData, TError = Error>(
+  query: QueryResult<TData, TError>,
+): UseQueryResult<TData, TError> {
+  const state = useUnit({
+    data: query.$data,
+    error: query.$error,
+    status: query.$status,
+    isPending: query.$isPending,
+    isFetching: query.$isFetching,
+    isSuccess: query.$isSuccess,
+    isError: query.$isError,
+    isPlaceholderData: query.$isPlaceholderData,
+    fetchStatus: query.$fetchStatus,
+  })
+
+  const mount = useUnit(query.mounted)
+  const unmount = useUnit(query.unmounted)
+  const refresh = useUnit(query.refresh)
+
+  React.useEffect(() => {
+    mount()
+    return () => unmount()
+  }, [mount, unmount])
+
+  return { ...state, refresh }
+}
+
+export interface UseMutationResult<TData, TError, TVariables> {
+  data: TData | undefined
+  error: TError | null
+  status: MutationStatus
+  variables: TVariables | undefined
+  isPaused: boolean
+  isPending: boolean
+  isSuccess: boolean
+  isError: boolean
+  isIdle: boolean
+  mutate: (variables: TVariables) => void
+  /**
+   * Trigger the mutation with per-call callbacks layered on top of the
+   * observer-level ones (`onSuccess` / `onError` / `onSettled` in
+   * `createMutation` options). Use this for component-local reactions
+   * that don't fit module-level `sample` wiring — navigation after success,
+   * one-shot toasts, etc.
+   */
+  mutateWith: (args: {
+    variables: TVariables
+    onSuccess?: MutateOptions<TData, TError, TVariables>['onSuccess']
+    onError?: MutateOptions<TData, TError, TVariables>['onError']
+    onSettled?: MutateOptions<TData, TError, TVariables>['onSettled']
+  }) => void
+  reset: () => void
+}
+
+/**
+ * Subscribes a React component to a mutation, automatically calling
+ * `start()` on mount and `unmounted()` on cleanup so the queryClient can
+ * garbage-collect the mutation entry once no observers remain.
+ */
+export function useMutation<TData = unknown, TError = Error, TVariables = void>(
+  mutation: MutationResult<TData, TError, TVariables>,
+): UseMutationResult<TData, TError, TVariables> {
+  const state = useUnit({
+    data: mutation.$data,
+    error: mutation.$error,
+    status: mutation.$status,
+    variables: mutation.$variables,
+    isPaused: mutation.$isPaused,
+    isPending: mutation.$isPending,
+    isSuccess: mutation.$isSuccess,
+    isError: mutation.$isError,
+    isIdle: mutation.$isIdle,
+  })
+
+  const start = useUnit(mutation.start)
+  const unmount = useUnit(mutation.unmounted)
+  const mutate = useUnit(mutation.mutate)
+  const mutateWith = useUnit(mutation.mutateWith)
+  const reset = useUnit(mutation.reset)
+
+  React.useEffect(() => {
+    start()
+    return () => unmount()
+  }, [start, unmount])
+
+  return { ...state, mutate, mutateWith, reset }
+}
+
+export interface UseInfiniteQueryResult<TData, TError> {
+  data: TData | undefined
+  error: TError | null
+  status: QueryStatus
+  isPending: boolean
+  isFetching: boolean
+  isSuccess: boolean
+  isError: boolean
+  isPlaceholderData: boolean
+  fetchStatus: FetchStatus
+  hasNextPage: boolean
+  hasPreviousPage: boolean
+  isFetchingNextPage: boolean
+  isFetchingPreviousPage: boolean
+  isFetchNextPageError: boolean
+  isFetchPreviousPageError: boolean
+  refresh: () => void
+  fetchNextPage: () => void
+  fetchPreviousPage: () => void
+}
+
+/**
+ * Subscribes a React component to an infinite query, with auto mount/unmount
+ * lifecycle and bound `fetchNextPage` / `fetchPreviousPage` callbacks.
+ */
+export function useInfiniteQuery<TData, TError = Error, TPageParam = unknown>(
+  query: InfiniteQueryResult<TData, TError, TPageParam>,
+): UseInfiniteQueryResult<TData, TError> {
+  const state = useUnit({
+    data: query.$data,
+    error: query.$error,
+    status: query.$status,
+    isPending: query.$isPending,
+    isFetching: query.$isFetching,
+    isSuccess: query.$isSuccess,
+    isError: query.$isError,
+    isPlaceholderData: query.$isPlaceholderData,
+    fetchStatus: query.$fetchStatus,
+    hasNextPage: query.$hasNextPage,
+    hasPreviousPage: query.$hasPreviousPage,
+    isFetchingNextPage: query.$isFetchingNextPage,
+    isFetchingPreviousPage: query.$isFetchingPreviousPage,
+    isFetchNextPageError: query.$isFetchNextPageError,
+    isFetchPreviousPageError: query.$isFetchPreviousPageError,
+  })
+
+  const mount = useUnit(query.mounted)
+  const unmount = useUnit(query.unmounted)
+  const refresh = useUnit(query.refresh)
+  const fetchNextPage = useUnit(query.fetchNextPage)
+  const fetchPreviousPage = useUnit(query.fetchPreviousPage)
+
+  React.useEffect(() => {
+    mount()
+    return () => unmount()
+  }, [mount, unmount])
+
+  return { ...state, refresh, fetchNextPage, fetchPreviousPage }
+}
+
+// Suspense data path: read from a per-scope observer.
+//
+// The scope mount chain runs in useEffect, which is skipped while a component
+// is suspended — so on the very first render the scope's `$observer` may be
+// null. To get synchronous access to the observer's promise during suspense,
+// we construct a transient observer via the factory's hidden
+// `__createObserver(qc, { queryKey, enabled })` helper. The transient observer
+// reads from / writes to the same queryClient cache as the eventual scope
+// observer (which is created when mountFx runs after useEffect commits).
+//
+// The mount/unmount effect is still wired up so that other consumers reading
+// the same query through `useUnit` / `useQuery` see updates in scope state.
+
+function useObserverRerender(
+  observer: { subscribe: (cb: () => void) => () => void } | null,
+): void {
+  const [, forceRender] = React.useReducer((x: number) => x + 1, 0)
+  React.useEffect(() => {
+    if (!observer) return
+    return observer.subscribe(forceRender)
+  }, [observer])
+}
+
+interface SuspenseFactory<TObserver> {
+  __createObserver(
+    qc: import('@tanstack/query-core').QueryClient,
+    init: { queryKey: unknown; enabled: boolean },
+  ): TObserver
+  __resolvedKey: import('effector').Store<unknown>
+  __enabled: import('effector').Store<boolean>
+}
+
+export interface UseSuspenseQueryResult<TData, TError = Error> {
+  /** Resolved query data — non-nullable inside the rendered subtree (Suspense
+   * absorbed the pending state). */
+  data: TData
+  /** Always `null` past the Suspense gate; errors are thrown to the nearest
+   * `<ErrorBoundary>`. Typed as `TError | null` for consistency with
+   * `useQuery` so the same destructure works in both. */
+  error: TError | null
+  status: 'success'
+  isPending: false
+  isSuccess: true
+  isError: false
+  /** `true` while a background refetch is running. Use for refresh spinners. */
+  isFetching: boolean
+  isPlaceholderData: boolean
+  fetchStatus: FetchStatus
+  refresh: () => void
+}
+
+/**
+ * Reads a query for use inside a `<Suspense>` boundary. While the query is
+ * pending, throws an inflight promise (queryClient-deduplicated). On error,
+ * throws the error — catch with `<ErrorBoundary>`. Returns the same shape as
+ * `useQuery`, but with `data` narrowed to non-nullable `TData` since the
+ * pending state is impossible past the Suspense gate.
+ */
+export function useSuspenseQuery<TData, TError = Error>(
+  query: QueryResult<TData, TError>,
+): UseSuspenseQueryResult<TData, TError> {
+  // Auto-mount lifecycle so concurrent consumers (useUnit / useQuery) reading
+  // the same query through the effector scope stay in sync.
+  const mount = useUnit(query.mounted)
+  const unmount = useUnit(query.unmounted)
+  const refresh = useUnit(query.refresh)
+  React.useEffect(() => {
+    mount()
+    return () => unmount()
+  }, [mount, unmount])
+
+  const observer = useSuspenseObserver(query)
+
+  useObserverRerender(observer)
+
+  const result = observer.getOptimisticResult(observer.options as any)
+
+  if (result.status === 'error') throw result.error
+  if (result.status === 'pending') {
+    throw observer.fetchOptimistic(observer.options as any)
+  }
+
+  // Read all secondary fields from the observer result, not the effector
+  // stores: stores are only populated after mountFx fires from useEffect,
+  // which on the very first successful render hasn't run yet. The observer
+  // result is always live and consistent.
+  return {
+    data: result.data as TData,
+    error: result.error as TError | null,
+    status: 'success',
+    isPending: false,
+    isSuccess: true,
+    isError: false,
+    isFetching: result.isFetching,
+    isPlaceholderData: result.isPlaceholderData,
+    fetchStatus: result.fetchStatus,
+    refresh,
+  }
+}
+
+export interface UseSuspenseInfiniteQueryResult<TData, TError = Error> {
+  data: TData
+  error: TError | null
+  status: 'success'
+  isPending: false
+  isSuccess: true
+  isError: false
+  isFetching: boolean
+  isPlaceholderData: boolean
+  fetchStatus: FetchStatus
+  hasNextPage: boolean
+  hasPreviousPage: boolean
+  isFetchingNextPage: boolean
+  isFetchingPreviousPage: boolean
+  isFetchNextPageError: boolean
+  isFetchPreviousPageError: boolean
+  refresh: () => void
+  fetchNextPage: () => void
+  fetchPreviousPage: () => void
+}
+
+/**
+ * Suspense variant of {@link useInfiniteQuery}. Same shape as `useInfiniteQuery`,
+ * with `data` narrowed to non-nullable.
+ */
+export function useSuspenseInfiniteQuery<
+  TData,
+  TError = Error,
+  TPageParam = unknown,
+>(
+  query: InfiniteQueryResult<TData, TError, TPageParam>,
+): UseSuspenseInfiniteQueryResult<TData, TError> {
+  const mount = useUnit(query.mounted)
+  const unmount = useUnit(query.unmounted)
+  const refresh = useUnit(query.refresh)
+  const fetchNextPage = useUnit(query.fetchNextPage)
+  const fetchPreviousPage = useUnit(query.fetchPreviousPage)
+  React.useEffect(() => {
+    mount()
+    return () => unmount()
+  }, [mount, unmount])
+
+  const observer = useSuspenseObserver(query)
+
+  useObserverRerender(observer)
+
+  const result = observer.getOptimisticResult(observer.options as any)
+
+  if (result.status === 'error') throw result.error
+  if (result.status === 'pending') {
+    throw (
+      observer as unknown as {
+        fetchOptimistic: (
+          options: typeof observer.options,
+        ) => Promise<unknown>
+      }
+    ).fetchOptimistic(observer.options)
+  }
+
+  const r = result as typeof result & {
+    hasNextPage: boolean
+    hasPreviousPage: boolean
+    isFetchingNextPage: boolean
+    isFetchingPreviousPage: boolean
+    isFetchNextPageError: boolean
+    isFetchPreviousPageError: boolean
+  }
+
+  return {
+    data: r.data as TData,
+    error: r.error as TError | null,
+    status: 'success',
+    isPending: false,
+    isSuccess: true,
+    isError: false,
+    isFetching: r.isFetching,
+    isPlaceholderData: r.isPlaceholderData,
+    fetchStatus: r.fetchStatus,
+    hasNextPage: r.hasNextPage,
+    hasPreviousPage: r.hasPreviousPage,
+    isFetchingNextPage: r.isFetchingNextPage,
+    isFetchingPreviousPage: r.isFetchingPreviousPage,
+    isFetchNextPageError: r.isFetchNextPageError,
+    isFetchPreviousPageError: r.isFetchPreviousPageError,
+    refresh,
+    fetchNextPage,
+    fetchPreviousPage,
+  }
+}
+
+/**
+ * Resolves a per-scope observer for suspense usage. Prefers the scope's
+ * `$observer` (set by mountFx); falls back to a transient observer
+ * constructed via `__createObserver` so that the very first render — before
+ * useEffect has fired — has a working observer. Both flavors read/write the
+ * same queryClient cache, so the transient observer is a thin wrapper.
+ */
+function useSuspenseObserver<
+  TQuery extends {
+    $observer: import('effector').Store<TObserver | null>
+    $queryClient: import('effector').Store<
+      import('@tanstack/query-core').QueryClient | null
+    >
+  },
+  TObserver extends {
+    options: { queryKey: unknown }
+    setOptions(options: any): void
+    subscribe(cb: () => void): () => void
+    getOptimisticResult(options: any): {
+      status: 'pending' | 'success' | 'error'
+      data: unknown
+      error: unknown
+      isFetching: boolean
+      isPlaceholderData: boolean
+      fetchStatus: FetchStatus
+      // Infinite-query result fields — present at runtime when the underlying
+      // observer is an InfiniteQueryObserver; the suspense hooks narrow as
+      // needed. Typed as `any` here to keep the constraint loose.
+      hasNextPage?: any
+      hasPreviousPage?: any
+      isFetchingNextPage?: any
+      isFetchingPreviousPage?: any
+      isFetchNextPageError?: any
+      isFetchPreviousPageError?: any
+    }
+    fetchOptimistic(options: any): Promise<unknown>
+  },
+>(query: TQuery): TObserver {
+  const factory = query as unknown as TQuery & SuspenseFactory<TObserver>
+  const observerInScope = useUnit(query.$observer) as TObserver | null
+  const qc = useUnit(query.$queryClient)
+  const queryKey = useUnit(factory.__resolvedKey)
+  const enabled = useUnit(factory.__enabled)
+
+  // Memoize a transient observer keyed by qc, so it survives across renders
+  // while the scope observer is null. Once observerInScope appears, we
+  // switch — the transient one is unsubscribed and abandoned (it never
+  // subscribed to queryCache, so there is nothing to leak).
+  const transient = React.useMemo(() => {
+    if (observerInScope || !qc) return null
+    return factory.__createObserver(qc, { queryKey, enabled })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observerInScope, qc, factory])
+
+  // Keep the transient observer's options in sync with reactive key/enabled,
+  // so re-suspending on key changes still works through it.
+  React.useEffect(() => {
+    if (!transient) return
+    transient.setOptions({ ...transient.options, queryKey, enabled })
+  }, [transient, queryKey, enabled])
+
+  const observer = observerInScope ?? transient
+  if (!observer) {
+    throw new Error(
+      '[@effector-tanstack-query/react] useSuspenseQuery: no QueryClient is set. ' +
+        'Call setQueryClient(qc) or pass it to fork({ values: [[$queryClient, qc]] }).',
+    )
+  }
+  return observer
+}