@effector-tanstack-query/react 0.2.0 → 0.3.0

package/dist/compat.cjs

@@ -0,0 +1,47 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var effectorReact = require('effector-react');
+var reactQuery = require('@tanstack/react-query');
+var core = require('@effector-tanstack-query/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+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);
+
+function QueryClientCompatProvider({
+  children,
+  defaultOptions
+}) {
+  const fromEffector = effectorReact.useUnit(core.$queryClient);
+  const [serverFallback] = React__namespace.useState(
+    () => reactQuery.isServer ? new reactQuery.QueryClient({ defaultOptions }) : null
+  );
+  const qc = fromEffector ?? serverFallback;
+  if (!qc) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: qc, children });
+}
+
+exports.QueryClientCompatProvider = QueryClientCompatProvider;
+//# sourceMappingURL=compat.cjs.map
+//# sourceMappingURL=compat.cjs.map

package/dist/compat.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/compat.tsx"],"names":["useUnit","$queryClient","React","isServer","QueryClient","jsx","QueryClientProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DO,SAAS,yBAAA,CAA0B;AAAA,EACxC,QAAA;AAAA,EACA;AACF,CAAA,EAAuD;AACrD,EAAA,MAAM,YAAA,GAAeA,sBAAQC,iBAAY,CAAA;AACzC,EAAA,MAAM,CAAC,cAAc,CAAA,GAAUC,gBAAA,CAAA,QAAA;AAAA,IAA6B,MAC1DC,mBAAA,GAAW,IAAIC,uBAAY,EAAE,cAAA,EAAgB,CAAA,GAAI;AAAA,GACnD;AAEA,EAAA,MAAM,KAAK,YAAA,IAAgB,cAAA;AAC3B,EAAA,IAAI,CAAC,EAAA,EAAI;AAMP,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,uBAAOC,cAAA,CAACC,8BAAA,EAAA,EAAoB,MAAA,EAAQ,EAAA,EAAK,QAAA,EAAS,CAAA;AACpD","file":"compat.cjs","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useUnit } from 'effector-react'\nimport {\n  isServer,\n  QueryClient,\n  QueryClientProvider,\n} from '@tanstack/react-query'\nimport { $queryClient } from '@effector-tanstack-query/core'\n\ntype DefaultOptions = NonNullable<\n  ConstructorParameters<typeof QueryClient>[0]\n>['defaultOptions']\n\nexport interface QueryClientCompatProviderProps {\n  children: React.ReactNode\n  /**\n   * `defaultOptions` for the per-render server fallback `QueryClient`\n   * (see below). Has no effect on the client — the browser singleton\n   * built in your own top-level `<EffectorNext>` setup is what `useQuery`\n   * from `@tanstack/react-query` resolves to there. Keep these aligned\n   * with your `createQuery({ staleTime, retry, ... })` definitions so\n   * server-rendered HTML matches what the client will produce after\n   * hydration.\n   */\n  defaultOptions?: DefaultOptions\n}\n\n/**\n * SSR-safe `QueryClientProvider` bridge for users mixing\n * `@tanstack/react-query` and `@effector-tanstack-query` — the typical\n * \"we're migrating page by page\" case.\n *\n * Why a dedicated component:\n *\n *   - **Client**: `useUnit($queryClient)` returns the singleton browser\n *     `QueryClient` already mounted by your top-level provider (whichever\n *     module calls `setQueryClient(qc)` + `allSettled($queryClient, ...)`\n *     for `getClientScope()`). Handing that same instance to\n *     `<QueryClientProvider>` means **both APIs share a cache**: prefetch\n *     with one, read with the other; `setQueryData` /\n *     `invalidateQueries` from one re-renders the other.\n *\n *   - **Server (RSC)**: `$queryClient` is `serialize: 'ignore'` (its\n *     value is a class instance — not JSON-safe — and per-request\n *     QueryClients must NEVER be a module-level singleton on the\n *     server). So inside the RSC rendering scope produced by\n *     `<EffectorNext values={serialize(scope)}>`, `useUnit($queryClient)`\n *     resolves to `null`. We fall back to a throwaway per-render\n *     `QueryClient` solely so vanilla `useQuery` has a provider during\n *     the server pass. Pair this component with `<HydrationBoundary>`\n *     from `@tanstack/react-query` — the boundary will hydrate this\n *     fallback client with the prefetched cache, so server-rendered\n *     HTML shows data instead of a loading flash. On client hydration\n *     the provider re-renders with the singleton browser client and\n *     react-query re-subscribes its observers.\n *\n * `useState` makes the fallback per-component-instance (one per render\n * tree), not a module-level singleton — concurrent SSR requests don't\n * share it.\n */\nexport function QueryClientCompatProvider({\n  children,\n  defaultOptions,\n}: QueryClientCompatProviderProps): React.ReactElement {\n  const fromEffector = useUnit($queryClient)\n  const [serverFallback] = React.useState<QueryClient | null>(() =>\n    isServer ? new QueryClient({ defaultOptions }) : null,\n  )\n\n  const qc = fromEffector ?? serverFallback\n  if (!qc) {\n    // Defensive: on the client `fromEffector` is set synchronously by\n    // your top-level provider before any render, so this branch is\n    // unreachable in practice. If it fires, rendering children without\n    // a provider would crash any descendant `useQuery` from\n    // `@tanstack/react-query`.\n    return <>{children}</>\n  }\n\n  return <QueryClientProvider client={qc}>{children}</QueryClientProvider>\n}\n"]}

package/dist/compat.d.cts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+
+type DefaultOptions = NonNullable<ConstructorParameters<typeof QueryClient>[0]>['defaultOptions'];
+interface QueryClientCompatProviderProps {
+    children: React.ReactNode;
+    /**
+     * `defaultOptions` for the per-render server fallback `QueryClient`
+     * (see below). Has no effect on the client — the browser singleton
+     * built in your own top-level `<EffectorNext>` setup is what `useQuery`
+     * from `@tanstack/react-query` resolves to there. Keep these aligned
+     * with your `createQuery({ staleTime, retry, ... })` definitions so
+     * server-rendered HTML matches what the client will produce after
+     * hydration.
+     */
+    defaultOptions?: DefaultOptions;
+}
+/**
+ * SSR-safe `QueryClientProvider` bridge for users mixing
+ * `@tanstack/react-query` and `@effector-tanstack-query` — the typical
+ * "we're migrating page by page" case.
+ *
+ * Why a dedicated component:
+ *
+ *   - **Client**: `useUnit($queryClient)` returns the singleton browser
+ *     `QueryClient` already mounted by your top-level provider (whichever
+ *     module calls `setQueryClient(qc)` + `allSettled($queryClient, ...)`
+ *     for `getClientScope()`). Handing that same instance to
+ *     `<QueryClientProvider>` means **both APIs share a cache**: prefetch
+ *     with one, read with the other; `setQueryData` /
+ *     `invalidateQueries` from one re-renders the other.
+ *
+ *   - **Server (RSC)**: `$queryClient` is `serialize: 'ignore'` (its
+ *     value is a class instance — not JSON-safe — and per-request
+ *     QueryClients must NEVER be a module-level singleton on the
+ *     server). So inside the RSC rendering scope produced by
+ *     `<EffectorNext values={serialize(scope)}>`, `useUnit($queryClient)`
+ *     resolves to `null`. We fall back to a throwaway per-render
+ *     `QueryClient` solely so vanilla `useQuery` has a provider during
+ *     the server pass. Pair this component with `<HydrationBoundary>`
+ *     from `@tanstack/react-query` — the boundary will hydrate this
+ *     fallback client with the prefetched cache, so server-rendered
+ *     HTML shows data instead of a loading flash. On client hydration
+ *     the provider re-renders with the singleton browser client and
+ *     react-query re-subscribes its observers.
+ *
+ * `useState` makes the fallback per-component-instance (one per render
+ * tree), not a module-level singleton — concurrent SSR requests don't
+ * share it.
+ */
+declare function QueryClientCompatProvider({ children, defaultOptions, }: QueryClientCompatProviderProps): React.ReactElement;
+
+export { QueryClientCompatProvider, type QueryClientCompatProviderProps };

package/dist/compat.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { QueryClient } from '@tanstack/react-query';
+
+type DefaultOptions = NonNullable<ConstructorParameters<typeof QueryClient>[0]>['defaultOptions'];
+interface QueryClientCompatProviderProps {
+    children: React.ReactNode;
+    /**
+     * `defaultOptions` for the per-render server fallback `QueryClient`
+     * (see below). Has no effect on the client — the browser singleton
+     * built in your own top-level `<EffectorNext>` setup is what `useQuery`
+     * from `@tanstack/react-query` resolves to there. Keep these aligned
+     * with your `createQuery({ staleTime, retry, ... })` definitions so
+     * server-rendered HTML matches what the client will produce after
+     * hydration.
+     */
+    defaultOptions?: DefaultOptions;
+}
+/**
+ * SSR-safe `QueryClientProvider` bridge for users mixing
+ * `@tanstack/react-query` and `@effector-tanstack-query` — the typical
+ * "we're migrating page by page" case.
+ *
+ * Why a dedicated component:
+ *
+ *   - **Client**: `useUnit($queryClient)` returns the singleton browser
+ *     `QueryClient` already mounted by your top-level provider (whichever
+ *     module calls `setQueryClient(qc)` + `allSettled($queryClient, ...)`
+ *     for `getClientScope()`). Handing that same instance to
+ *     `<QueryClientProvider>` means **both APIs share a cache**: prefetch
+ *     with one, read with the other; `setQueryData` /
+ *     `invalidateQueries` from one re-renders the other.
+ *
+ *   - **Server (RSC)**: `$queryClient` is `serialize: 'ignore'` (its
+ *     value is a class instance — not JSON-safe — and per-request
+ *     QueryClients must NEVER be a module-level singleton on the
+ *     server). So inside the RSC rendering scope produced by
+ *     `<EffectorNext values={serialize(scope)}>`, `useUnit($queryClient)`
+ *     resolves to `null`. We fall back to a throwaway per-render
+ *     `QueryClient` solely so vanilla `useQuery` has a provider during
+ *     the server pass. Pair this component with `<HydrationBoundary>`
+ *     from `@tanstack/react-query` — the boundary will hydrate this
+ *     fallback client with the prefetched cache, so server-rendered
+ *     HTML shows data instead of a loading flash. On client hydration
+ *     the provider re-renders with the singleton browser client and
+ *     react-query re-subscribes its observers.
+ *
+ * `useState` makes the fallback per-component-instance (one per render
+ * tree), not a module-level singleton — concurrent SSR requests don't
+ * share it.
+ */
+declare function QueryClientCompatProvider({ children, defaultOptions, }: QueryClientCompatProviderProps): React.ReactElement;
+
+export { QueryClientCompatProvider, type QueryClientCompatProviderProps };

package/dist/compat.js

@@ -0,0 +1,25 @@
+"use client";
+import * as React from 'react';
+import { useUnit } from 'effector-react';
+import { QueryClient, isServer, QueryClientProvider } from '@tanstack/react-query';
+import { $queryClient } from '@effector-tanstack-query/core';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function QueryClientCompatProvider({
+  children,
+  defaultOptions
+}) {
+  const fromEffector = useUnit($queryClient);
+  const [serverFallback] = React.useState(
+    () => isServer ? new QueryClient({ defaultOptions }) : null
+  );
+  const qc = fromEffector ?? serverFallback;
+  if (!qc) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: qc, children });
+}
+
+export { QueryClientCompatProvider };
+//# sourceMappingURL=compat.js.map
+//# sourceMappingURL=compat.js.map

package/dist/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/compat.tsx"],"names":[],"mappings":";;;;;;AA8DO,SAAS,yBAAA,CAA0B;AAAA,EACxC,QAAA;AAAA,EACA;AACF,CAAA,EAAuD;AACrD,EAAA,MAAM,YAAA,GAAe,QAAQ,YAAY,CAAA;AACzC,EAAA,MAAM,CAAC,cAAc,CAAA,GAAU,KAAA,CAAA,QAAA;AAAA,IAA6B,MAC1D,QAAA,GAAW,IAAI,YAAY,EAAE,cAAA,EAAgB,CAAA,GAAI;AAAA,GACnD;AAEA,EAAA,MAAM,KAAK,YAAA,IAAgB,cAAA;AAC3B,EAAA,IAAI,CAAC,EAAA,EAAI;AAMP,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,uBAAO,GAAA,CAAC,mBAAA,EAAA,EAAoB,MAAA,EAAQ,EAAA,EAAK,QAAA,EAAS,CAAA;AACpD","file":"compat.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { useUnit } from 'effector-react'\nimport {\n  isServer,\n  QueryClient,\n  QueryClientProvider,\n} from '@tanstack/react-query'\nimport { $queryClient } from '@effector-tanstack-query/core'\n\ntype DefaultOptions = NonNullable<\n  ConstructorParameters<typeof QueryClient>[0]\n>['defaultOptions']\n\nexport interface QueryClientCompatProviderProps {\n  children: React.ReactNode\n  /**\n   * `defaultOptions` for the per-render server fallback `QueryClient`\n   * (see below). Has no effect on the client — the browser singleton\n   * built in your own top-level `<EffectorNext>` setup is what `useQuery`\n   * from `@tanstack/react-query` resolves to there. Keep these aligned\n   * with your `createQuery({ staleTime, retry, ... })` definitions so\n   * server-rendered HTML matches what the client will produce after\n   * hydration.\n   */\n  defaultOptions?: DefaultOptions\n}\n\n/**\n * SSR-safe `QueryClientProvider` bridge for users mixing\n * `@tanstack/react-query` and `@effector-tanstack-query` — the typical\n * \"we're migrating page by page\" case.\n *\n * Why a dedicated component:\n *\n *   - **Client**: `useUnit($queryClient)` returns the singleton browser\n *     `QueryClient` already mounted by your top-level provider (whichever\n *     module calls `setQueryClient(qc)` + `allSettled($queryClient, ...)`\n *     for `getClientScope()`). Handing that same instance to\n *     `<QueryClientProvider>` means **both APIs share a cache**: prefetch\n *     with one, read with the other; `setQueryData` /\n *     `invalidateQueries` from one re-renders the other.\n *\n *   - **Server (RSC)**: `$queryClient` is `serialize: 'ignore'` (its\n *     value is a class instance — not JSON-safe — and per-request\n *     QueryClients must NEVER be a module-level singleton on the\n *     server). So inside the RSC rendering scope produced by\n *     `<EffectorNext values={serialize(scope)}>`, `useUnit($queryClient)`\n *     resolves to `null`. We fall back to a throwaway per-render\n *     `QueryClient` solely so vanilla `useQuery` has a provider during\n *     the server pass. Pair this component with `<HydrationBoundary>`\n *     from `@tanstack/react-query` — the boundary will hydrate this\n *     fallback client with the prefetched cache, so server-rendered\n *     HTML shows data instead of a loading flash. On client hydration\n *     the provider re-renders with the singleton browser client and\n *     react-query re-subscribes its observers.\n *\n * `useState` makes the fallback per-component-instance (one per render\n * tree), not a module-level singleton — concurrent SSR requests don't\n * share it.\n */\nexport function QueryClientCompatProvider({\n  children,\n  defaultOptions,\n}: QueryClientCompatProviderProps): React.ReactElement {\n  const fromEffector = useUnit($queryClient)\n  const [serverFallback] = React.useState<QueryClient | null>(() =>\n    isServer ? new QueryClient({ defaultOptions }) : null,\n  )\n\n  const qc = fromEffector ?? serverFallback\n  if (!qc) {\n    // Defensive: on the client `fromEffector` is set synchronously by\n    // your top-level provider before any render, so this branch is\n    // unreachable in practice. If it fires, rendering children without\n    // a provider would crash any descendant `useQuery` from\n    // `@tanstack/react-query`.\n    return <>{children}</>\n  }\n\n  return <QueryClientProvider client={qc}>{children}</QueryClientProvider>\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effector-tanstack-query/react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React hooks for @effector-tanstack-query/core — useQuery, useMutation, useInfiniteQuery, useSuspenseQuery, useSuspenseInfiniteQuery",
   "license": "MIT",
   "author": "Ilya Agarkov <ilya.al.ag@gmail.com>",
@@ -36,6 +36,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./compat": {
+      "import": {
+        "types": "./dist/compat.d.ts",
+        "default": "./dist/compat.js"
+      },
+      "require": {
+        "types": "./dist/compat.d.cts",
+        "default": "./dist/compat.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -45,14 +55,23 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@effector-tanstack-query/core": "0.2.0"
+    "@effector-tanstack-query/core": "0.3.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.0.0"
   },
   "peerDependencies": {
     "@tanstack/query-core": "^5.0.0",
+    "@tanstack/react-query": "^5.0.0",
     "effector": ">=23.0.0",
     "effector-react": ">=23.0.0",
     "react": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "tsup && node ./scripts/inject-use-client.mjs",
     "build:watch": "tsup --watch",

package/src/compat.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import * as React from 'react'
+import { useUnit } from 'effector-react'
+import {
+  isServer,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+import { $queryClient } from '@effector-tanstack-query/core'
+
+type DefaultOptions = NonNullable<
+  ConstructorParameters<typeof QueryClient>[0]
+>['defaultOptions']
+
+export interface QueryClientCompatProviderProps {
+  children: React.ReactNode
+  /**
+   * `defaultOptions` for the per-render server fallback `QueryClient`
+   * (see below). Has no effect on the client — the browser singleton
+   * built in your own top-level `<EffectorNext>` setup is what `useQuery`
+   * from `@tanstack/react-query` resolves to there. Keep these aligned
+   * with your `createQuery({ staleTime, retry, ... })` definitions so
+   * server-rendered HTML matches what the client will produce after
+   * hydration.
+   */
+  defaultOptions?: DefaultOptions
+}
+
+/**
+ * SSR-safe `QueryClientProvider` bridge for users mixing
+ * `@tanstack/react-query` and `@effector-tanstack-query` — the typical
+ * "we're migrating page by page" case.
+ *
+ * Why a dedicated component:
+ *
+ *   - **Client**: `useUnit($queryClient)` returns the singleton browser
+ *     `QueryClient` already mounted by your top-level provider (whichever
+ *     module calls `setQueryClient(qc)` + `allSettled($queryClient, ...)`
+ *     for `getClientScope()`). Handing that same instance to
+ *     `<QueryClientProvider>` means **both APIs share a cache**: prefetch
+ *     with one, read with the other; `setQueryData` /
+ *     `invalidateQueries` from one re-renders the other.
+ *
+ *   - **Server (RSC)**: `$queryClient` is `serialize: 'ignore'` (its
+ *     value is a class instance — not JSON-safe — and per-request
+ *     QueryClients must NEVER be a module-level singleton on the
+ *     server). So inside the RSC rendering scope produced by
+ *     `<EffectorNext values={serialize(scope)}>`, `useUnit($queryClient)`
+ *     resolves to `null`. We fall back to a throwaway per-render
+ *     `QueryClient` solely so vanilla `useQuery` has a provider during
+ *     the server pass. Pair this component with `<HydrationBoundary>`
+ *     from `@tanstack/react-query` — the boundary will hydrate this
+ *     fallback client with the prefetched cache, so server-rendered
+ *     HTML shows data instead of a loading flash. On client hydration
+ *     the provider re-renders with the singleton browser client and
+ *     react-query re-subscribes its observers.
+ *
+ * `useState` makes the fallback per-component-instance (one per render
+ * tree), not a module-level singleton — concurrent SSR requests don't
+ * share it.
+ */
+export function QueryClientCompatProvider({
+  children,
+  defaultOptions,
+}: QueryClientCompatProviderProps): React.ReactElement {
+  const fromEffector = useUnit($queryClient)
+  const [serverFallback] = React.useState<QueryClient | null>(() =>
+    isServer ? new QueryClient({ defaultOptions }) : null,
+  )
+
+  const qc = fromEffector ?? serverFallback
+  if (!qc) {
+    // Defensive: on the client `fromEffector` is set synchronously by
+    // your top-level provider before any render, so this branch is
+    // unreachable in practice. If it fires, rendering children without
+    // a provider would crash any descendant `useQuery` from
+    // `@tanstack/react-query`.
+    return <>{children}</>
+  }
+
+  return <QueryClientProvider client={qc}>{children}</QueryClientProvider>
+}