@metamask-previews/react-data-query 0.0.0-preview-a0caca0c0 → 0.1.0-preview-afe010990

package/CHANGELOG.md

@@ -7,4 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-[Unreleased]: https://github.com/MetaMask/core/
+### Added
+
+- Allow passing additional configuration options to `createUIQueryClient` ([#8295](https://github.com/MetaMask/core/pull/8295))
+- Move data service specific query configuration to hooks instead of `QueryClient` defaults ([#8296](https://github.com/MetaMask/core/pull/8296))
+
+## [0.1.0]
+
+### Added
+
+- Initial release ([#8039](https://github.com/MetaMask/core/pull/8039), [#8292](https://github.com/MetaMask/core/pull/8292))
+
+[Unreleased]: https://github.com/MetaMask/core/compare/@metamask/react-data-query@0.1.0...HEAD
+[0.1.0]: https://github.com/MetaMask/core/releases/tag/@metamask/react-data-query@0.1.0

package/dist/createUIQueryClient.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUIQueryClient = void 0;
+const utils_1 = require("@metamask/utils");
+const query_core_1 = require("@tanstack/query-core");
+/**
+ * Create a QueryClient queries and subscribes to data services using the messenger.
+ *
+ * @param dataServices - A list of data services.
+ * @param messenger - A messenger adapter.
+ * @param config - Optional query client configuration options.
+ * @returns The QueryClient.
+ */
+function createUIQueryClient(dataServices, messenger, config = {}) {
+    const subscriptions = new Map();
+    /**
+     * Parse a query key to detect a service name.
+     *
+     * @param queryKey - The query key.
+     * @returns The service name if it parsing succeeded, otherwise null.
+     */
+    function parseQueryKey(queryKey) {
+        const action = queryKey[0];
+        if (typeof action !== 'string') {
+            return null;
+        }
+        const service = action.split(':')[0];
+        if (!dataServices.includes(service)) {
+            return null;
+        }
+        return service;
+    }
+    const client = new query_core_1.QueryClient({
+        ...config,
+        defaultOptions: {
+            queries: {
+                ...config.defaultOptions?.queries,
+                queryFn: async (options) => {
+                    const { queryKey } = options;
+                    const action = queryKey[0];
+                    (0, utils_1.assert)(typeof action === 'string' &&
+                        dataServices.includes(action.split(':')?.[0]), "Queries must call actions on the messenger provided to createUIQueryClient, e.g. `queryKey: ['ExampleDataService:getAssets', ...]`.");
+                    return await messenger.call(action, ...options.queryKey.slice(1), options.pageParam);
+                },
+            },
+            mutations: config.defaultOptions?.mutations,
+        },
+    });
+    const cache = client.getQueryCache();
+    cache.subscribe((event) => {
+        const { query } = event;
+        const hash = query.queryHash;
+        const hasSubscription = subscriptions.has(hash);
+        const observerCount = query.getObserversCount();
+        const service = parseQueryKey(query.queryKey);
+        if (!service) {
+            return;
+        }
+        if (!hasSubscription &&
+            event.type === 'observerAdded' &&
+            observerCount === 1) {
+            const cacheListener = (payload) => {
+                if (payload.type === 'removed') {
+                    const currentQuery = cache.get(hash);
+                    if (currentQuery) {
+                        cache.remove(currentQuery);
+                    }
+                }
+                else {
+                    (0, query_core_1.hydrate)(client, payload.state);
+                }
+            };
+            subscriptions.set(hash, cacheListener);
+            messenger.subscribe(`${service}:cacheUpdated:${hash}`, cacheListener);
+        }
+        else if (event.type === 'observerRemoved' &&
+            observerCount === 0 &&
+            hasSubscription) {
+            const subscriptionListener = subscriptions.get(hash);
+            messenger.unsubscribe(`${service}:cacheUpdated:${hash}`, subscriptionListener);
+            subscriptions.delete(hash);
+        }
+    });
+    // Override invalidateQueries to ensure the data service is invalidated as well.
+    const originalInvalidate = client.invalidateQueries.bind(client);
+    // This function is defined in this way to have full support for all function overloads.
+    client.invalidateQueries = async (arg1, arg2, arg3) => {
+        const [filters, options] = (0, query_core_1.parseFilterArgs)(arg1, arg2, arg3);
+        const queries = client.getQueryCache().findAll(filters);
+        const services = [
+            ...new Set(queries.map((query) => parseQueryKey(query.queryKey))),
+        ];
+        await Promise.all(services.map(async (service) => {
+            if (!service) {
+                return null;
+            }
+            return messenger.call(`${service}:invalidateQueries`, filters, options);
+        }));
+        return originalInvalidate(filters, options);
+    };
+    return client;
+}
+exports.createUIQueryClient = createUIQueryClient;
+//# sourceMappingURL=createUIQueryClient.cjs.map

package/dist/createUIQueryClient.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createUIQueryClient.cjs","sourceRoot":"","sources":["../src/createUIQueryClient.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataServiceGranularCacheUpdatedPayload } from '@metamask/base-data-service';\nimport { assert, Json } from '@metamask/utils';\nimport {\n  hydrate,\n  QueryClient,\n  InvalidateQueryFilters,\n  InvalidateOptions,\n  OmitKeyof,\n  parseFilterArgs,\n  QueryKey,\n  QueryClientConfig,\n} from '@tanstack/query-core';\n\ntype SubscriptionCallback = (\n  payload: DataServiceGranularCacheUpdatedPayload,\n) => void;\n\ntype JsonSubscriptionCallback = (data: Json) => void;\n\n// TODO: Figure out if we can replace with a better Messenger type\ntype MessengerAdapter = {\n  call: (method: string, ...params: Json[]) => Promise<Json | void>;\n  subscribe: (method: string, callback: JsonSubscriptionCallback) => void;\n  unsubscribe: (method: string, callback: JsonSubscriptionCallback) => void;\n};\n\n/**\n * Create a QueryClient queries and subscribes to data services using the messenger.\n *\n * @param dataServices - A list of data services.\n * @param messenger - A messenger adapter.\n * @param config - Optional query client configuration options.\n * @returns The QueryClient.\n */\nexport function createUIQueryClient(\n  dataServices: string[],\n  messenger: MessengerAdapter,\n  config: QueryClientConfig = {},\n): QueryClient {\n  const subscriptions = new Map<string, SubscriptionCallback>();\n\n  /**\n   * Parse a query key to detect a service name.\n   *\n   * @param queryKey - The query key.\n   * @returns The service name if it parsing succeeded, otherwise null.\n   */\n  function parseQueryKey(queryKey: QueryKey): string | null {\n    const action = queryKey[0];\n\n    if (typeof action !== 'string') {\n      return null;\n    }\n\n    const service = action.split(':')[0];\n\n    if (!dataServices.includes(service)) {\n      return null;\n    }\n\n    return service;\n  }\n\n  const client: QueryClient = new QueryClient({\n    ...config,\n    defaultOptions: {\n      queries: {\n        ...config.defaultOptions?.queries,\n        queryFn: async (options): Promise<unknown> => {\n          const { queryKey } = options;\n\n          const action = queryKey[0];\n\n          assert(\n            typeof action === 'string' &&\n              dataServices.includes(action.split(':')?.[0]),\n            \"Queries must call actions on the messenger provided to createUIQueryClient, e.g. `queryKey: ['ExampleDataService:getAssets', ...]`.\",\n          );\n\n          return await messenger.call(\n            action,\n            ...(options.queryKey.slice(1) as Json[]),\n            options.pageParam,\n          );\n        },\n      },\n      mutations: config.defaultOptions?.mutations,\n    },\n  });\n\n  const cache = client.getQueryCache();\n\n  cache.subscribe((event) => {\n    const { query } = event;\n\n    const hash = query.queryHash;\n    const hasSubscription = subscriptions.has(hash);\n    const observerCount = query.getObserversCount();\n\n    const service = parseQueryKey(query.queryKey);\n\n    if (!service) {\n      return;\n    }\n\n    if (\n      !hasSubscription &&\n      event.type === 'observerAdded' &&\n      observerCount === 1\n    ) {\n      const cacheListener = (\n        payload: DataServiceGranularCacheUpdatedPayload,\n      ): void => {\n        if (payload.type === 'removed') {\n          const currentQuery = cache.get(hash);\n\n          if (currentQuery) {\n            cache.remove(currentQuery);\n          }\n        } else {\n          hydrate(client, payload.state);\n        }\n      };\n\n      subscriptions.set(hash, cacheListener);\n      messenger.subscribe(\n        `${service}:cacheUpdated:${hash}`,\n        cacheListener as JsonSubscriptionCallback,\n      );\n    } else if (\n      event.type === 'observerRemoved' &&\n      observerCount === 0 &&\n      hasSubscription\n    ) {\n      const subscriptionListener = subscriptions.get(hash);\n\n      messenger.unsubscribe(\n        `${service}:cacheUpdated:${hash}`,\n        subscriptionListener as JsonSubscriptionCallback,\n      );\n      subscriptions.delete(hash);\n    }\n  });\n\n  // Override invalidateQueries to ensure the data service is invalidated as well.\n  const originalInvalidate = client.invalidateQueries.bind(client);\n\n  // This function is defined in this way to have full support for all function overloads.\n  client.invalidateQueries = async (\n    arg1?: QueryKey | InvalidateQueryFilters,\n    arg2?: OmitKeyof<InvalidateQueryFilters, 'queryKey'> | InvalidateOptions,\n    arg3?: InvalidateOptions,\n  ): Promise<void> => {\n    const [filters, options] = parseFilterArgs(arg1, arg2, arg3);\n\n    const queries = client.getQueryCache().findAll(filters);\n\n    const services = [\n      ...new Set(queries.map((query) => parseQueryKey(query.queryKey))),\n    ];\n\n    await Promise.all(\n      services.map(async (service) => {\n        if (!service) {\n          return null;\n        }\n\n        return messenger.call(\n          `${service}:invalidateQueries`,\n          filters as Json,\n          options as Json,\n        );\n      }),\n    );\n\n    return originalInvalidate(filters, options);\n  };\n\n  return client;\n}\n"]}

package/dist/createUIQueryClient.d.cts

@@ -0,0 +1,19 @@
+import { Json } from "@metamask/utils";
+import { QueryClient, QueryClientConfig } from "@tanstack/query-core";
+type JsonSubscriptionCallback = (data: Json) => void;
+type MessengerAdapter = {
+    call: (method: string, ...params: Json[]) => Promise<Json | void>;
+    subscribe: (method: string, callback: JsonSubscriptionCallback) => void;
+    unsubscribe: (method: string, callback: JsonSubscriptionCallback) => void;
+};
+/**
+ * Create a QueryClient queries and subscribes to data services using the messenger.
+ *
+ * @param dataServices - A list of data services.
+ * @param messenger - A messenger adapter.
+ * @param config - Optional query client configuration options.
+ * @returns The QueryClient.
+ */
+export declare function createUIQueryClient(dataServices: string[], messenger: MessengerAdapter, config?: QueryClientConfig): QueryClient;
+export {};
+//# sourceMappingURL=createUIQueryClient.d.cts.map

package/dist/createUIQueryClient.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createUIQueryClient.d.cts","sourceRoot":"","sources":["../src/createUIQueryClient.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,IAAI,EAAE,wBAAwB;AAC/C,OAAO,EAEL,WAAW,EAMX,iBAAiB,EAClB,6BAA6B;AAM9B,KAAK,wBAAwB,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;AAGrD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACxE,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;CAC3E,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EAAE,EACtB,SAAS,EAAE,gBAAgB,EAC3B,MAAM,GAAE,iBAAsB,GAC7B,WAAW,CA6Ib"}

package/dist/createUIQueryClient.d.mts

@@ -0,0 +1,19 @@
+import { Json } from "@metamask/utils";
+import { QueryClient, QueryClientConfig } from "@tanstack/query-core";
+type JsonSubscriptionCallback = (data: Json) => void;
+type MessengerAdapter = {
+    call: (method: string, ...params: Json[]) => Promise<Json | void>;
+    subscribe: (method: string, callback: JsonSubscriptionCallback) => void;
+    unsubscribe: (method: string, callback: JsonSubscriptionCallback) => void;
+};
+/**
+ * Create a QueryClient queries and subscribes to data services using the messenger.
+ *
+ * @param dataServices - A list of data services.
+ * @param messenger - A messenger adapter.
+ * @param config - Optional query client configuration options.
+ * @returns The QueryClient.
+ */
+export declare function createUIQueryClient(dataServices: string[], messenger: MessengerAdapter, config?: QueryClientConfig): QueryClient;
+export {};
+//# sourceMappingURL=createUIQueryClient.d.mts.map

package/dist/createUIQueryClient.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createUIQueryClient.d.mts","sourceRoot":"","sources":["../src/createUIQueryClient.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,IAAI,EAAE,wBAAwB;AAC/C,OAAO,EAEL,WAAW,EAMX,iBAAiB,EAClB,6BAA6B;AAM9B,KAAK,wBAAwB,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;AAGrD,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACxE,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,wBAAwB,KAAK,IAAI,CAAC;CAC3E,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EAAE,EACtB,SAAS,EAAE,gBAAgB,EAC3B,MAAM,GAAE,iBAAsB,GAC7B,WAAW,CA6Ib"}

package/dist/createUIQueryClient.mjs

@@ -0,0 +1,100 @@
+import { assert } from "@metamask/utils";
+import { hydrate, QueryClient, parseFilterArgs } from "@tanstack/query-core";
+/**
+ * Create a QueryClient queries and subscribes to data services using the messenger.
+ *
+ * @param dataServices - A list of data services.
+ * @param messenger - A messenger adapter.
+ * @param config - Optional query client configuration options.
+ * @returns The QueryClient.
+ */
+export function createUIQueryClient(dataServices, messenger, config = {}) {
+    const subscriptions = new Map();
+    /**
+     * Parse a query key to detect a service name.
+     *
+     * @param queryKey - The query key.
+     * @returns The service name if it parsing succeeded, otherwise null.
+     */
+    function parseQueryKey(queryKey) {
+        const action = queryKey[0];
+        if (typeof action !== 'string') {
+            return null;
+        }
+        const service = action.split(':')[0];
+        if (!dataServices.includes(service)) {
+            return null;
+        }
+        return service;
+    }
+    const client = new QueryClient({
+        ...config,
+        defaultOptions: {
+            queries: {
+                ...config.defaultOptions?.queries,
+                queryFn: async (options) => {
+                    const { queryKey } = options;
+                    const action = queryKey[0];
+                    assert(typeof action === 'string' &&
+                        dataServices.includes(action.split(':')?.[0]), "Queries must call actions on the messenger provided to createUIQueryClient, e.g. `queryKey: ['ExampleDataService:getAssets', ...]`.");
+                    return await messenger.call(action, ...options.queryKey.slice(1), options.pageParam);
+                },
+            },
+            mutations: config.defaultOptions?.mutations,
+        },
+    });
+    const cache = client.getQueryCache();
+    cache.subscribe((event) => {
+        const { query } = event;
+        const hash = query.queryHash;
+        const hasSubscription = subscriptions.has(hash);
+        const observerCount = query.getObserversCount();
+        const service = parseQueryKey(query.queryKey);
+        if (!service) {
+            return;
+        }
+        if (!hasSubscription &&
+            event.type === 'observerAdded' &&
+            observerCount === 1) {
+            const cacheListener = (payload) => {
+                if (payload.type === 'removed') {
+                    const currentQuery = cache.get(hash);
+                    if (currentQuery) {
+                        cache.remove(currentQuery);
+                    }
+                }
+                else {
+                    hydrate(client, payload.state);
+                }
+            };
+            subscriptions.set(hash, cacheListener);
+            messenger.subscribe(`${service}:cacheUpdated:${hash}`, cacheListener);
+        }
+        else if (event.type === 'observerRemoved' &&
+            observerCount === 0 &&
+            hasSubscription) {
+            const subscriptionListener = subscriptions.get(hash);
+            messenger.unsubscribe(`${service}:cacheUpdated:${hash}`, subscriptionListener);
+            subscriptions.delete(hash);
+        }
+    });
+    // Override invalidateQueries to ensure the data service is invalidated as well.
+    const originalInvalidate = client.invalidateQueries.bind(client);
+    // This function is defined in this way to have full support for all function overloads.
+    client.invalidateQueries = async (arg1, arg2, arg3) => {
+        const [filters, options] = parseFilterArgs(arg1, arg2, arg3);
+        const queries = client.getQueryCache().findAll(filters);
+        const services = [
+            ...new Set(queries.map((query) => parseQueryKey(query.queryKey))),
+        ];
+        await Promise.all(services.map(async (service) => {
+            if (!service) {
+                return null;
+            }
+            return messenger.call(`${service}:invalidateQueries`, filters, options);
+        }));
+        return originalInvalidate(filters, options);
+    };
+    return client;
+}
+//# sourceMappingURL=createUIQueryClient.mjs.map

package/dist/createUIQueryClient.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"createUIQueryClient.mjs","sourceRoot":"","sources":["../src/createUIQueryClient.ts"],"names":[],"mappings":"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","sourcesContent":["import { DataServiceGranularCacheUpdatedPayload } from '@metamask/base-data-service';\nimport { assert, Json } from '@metamask/utils';\nimport {\n  hydrate,\n  QueryClient,\n  InvalidateQueryFilters,\n  InvalidateOptions,\n  OmitKeyof,\n  parseFilterArgs,\n  QueryKey,\n  QueryClientConfig,\n} from '@tanstack/query-core';\n\ntype SubscriptionCallback = (\n  payload: DataServiceGranularCacheUpdatedPayload,\n) => void;\n\ntype JsonSubscriptionCallback = (data: Json) => void;\n\n// TODO: Figure out if we can replace with a better Messenger type\ntype MessengerAdapter = {\n  call: (method: string, ...params: Json[]) => Promise<Json | void>;\n  subscribe: (method: string, callback: JsonSubscriptionCallback) => void;\n  unsubscribe: (method: string, callback: JsonSubscriptionCallback) => void;\n};\n\n/**\n * Create a QueryClient queries and subscribes to data services using the messenger.\n *\n * @param dataServices - A list of data services.\n * @param messenger - A messenger adapter.\n * @param config - Optional query client configuration options.\n * @returns The QueryClient.\n */\nexport function createUIQueryClient(\n  dataServices: string[],\n  messenger: MessengerAdapter,\n  config: QueryClientConfig = {},\n): QueryClient {\n  const subscriptions = new Map<string, SubscriptionCallback>();\n\n  /**\n   * Parse a query key to detect a service name.\n   *\n   * @param queryKey - The query key.\n   * @returns The service name if it parsing succeeded, otherwise null.\n   */\n  function parseQueryKey(queryKey: QueryKey): string | null {\n    const action = queryKey[0];\n\n    if (typeof action !== 'string') {\n      return null;\n    }\n\n    const service = action.split(':')[0];\n\n    if (!dataServices.includes(service)) {\n      return null;\n    }\n\n    return service;\n  }\n\n  const client: QueryClient = new QueryClient({\n    ...config,\n    defaultOptions: {\n      queries: {\n        ...config.defaultOptions?.queries,\n        queryFn: async (options): Promise<unknown> => {\n          const { queryKey } = options;\n\n          const action = queryKey[0];\n\n          assert(\n            typeof action === 'string' &&\n              dataServices.includes(action.split(':')?.[0]),\n            \"Queries must call actions on the messenger provided to createUIQueryClient, e.g. `queryKey: ['ExampleDataService:getAssets', ...]`.\",\n          );\n\n          return await messenger.call(\n            action,\n            ...(options.queryKey.slice(1) as Json[]),\n            options.pageParam,\n          );\n        },\n      },\n      mutations: config.defaultOptions?.mutations,\n    },\n  });\n\n  const cache = client.getQueryCache();\n\n  cache.subscribe((event) => {\n    const { query } = event;\n\n    const hash = query.queryHash;\n    const hasSubscription = subscriptions.has(hash);\n    const observerCount = query.getObserversCount();\n\n    const service = parseQueryKey(query.queryKey);\n\n    if (!service) {\n      return;\n    }\n\n    if (\n      !hasSubscription &&\n      event.type === 'observerAdded' &&\n      observerCount === 1\n    ) {\n      const cacheListener = (\n        payload: DataServiceGranularCacheUpdatedPayload,\n      ): void => {\n        if (payload.type === 'removed') {\n          const currentQuery = cache.get(hash);\n\n          if (currentQuery) {\n            cache.remove(currentQuery);\n          }\n        } else {\n          hydrate(client, payload.state);\n        }\n      };\n\n      subscriptions.set(hash, cacheListener);\n      messenger.subscribe(\n        `${service}:cacheUpdated:${hash}`,\n        cacheListener as JsonSubscriptionCallback,\n      );\n    } else if (\n      event.type === 'observerRemoved' &&\n      observerCount === 0 &&\n      hasSubscription\n    ) {\n      const subscriptionListener = subscriptions.get(hash);\n\n      messenger.unsubscribe(\n        `${service}:cacheUpdated:${hash}`,\n        subscriptionListener as JsonSubscriptionCallback,\n      );\n      subscriptions.delete(hash);\n    }\n  });\n\n  // Override invalidateQueries to ensure the data service is invalidated as well.\n  const originalInvalidate = client.invalidateQueries.bind(client);\n\n  // This function is defined in this way to have full support for all function overloads.\n  client.invalidateQueries = async (\n    arg1?: QueryKey | InvalidateQueryFilters,\n    arg2?: OmitKeyof<InvalidateQueryFilters, 'queryKey'> | InvalidateOptions,\n    arg3?: InvalidateOptions,\n  ): Promise<void> => {\n    const [filters, options] = parseFilterArgs(arg1, arg2, arg3);\n\n    const queries = client.getQueryCache().findAll(filters);\n\n    const services = [\n      ...new Set(queries.map((query) => parseQueryKey(query.queryKey))),\n    ];\n\n    await Promise.all(\n      services.map(async (service) => {\n        if (!service) {\n          return null;\n        }\n\n        return messenger.call(\n          `${service}:invalidateQueries`,\n          filters as Json,\n          options as Json,\n        );\n      }),\n    );\n\n    return originalInvalidate(filters, options);\n  };\n\n  return client;\n}\n"]}

package/dist/hooks.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInfiniteQuery = exports.useQuery = void 0;
+const react_query_1 = require("@tanstack/react-query");
+/**
+ * We provide re-exports of the underlying TanStack Query hooks with narrower types,
+ * removing `staleTime` and `queryFn` which aren't useful when using data services.
+ */
+const DATA_SERVICE_QUERY_DEFAULTS = {
+    staleTime: 0,
+    retry: false,
+};
+/**
+ * Consume a query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The query results.
+ */
+function useQuery(options) {
+    return (0, react_query_1.useQuery)({ ...DATA_SERVICE_QUERY_DEFAULTS, ...options });
+}
+exports.useQuery = useQuery;
+/**
+ * Consume a paginated query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The paginated query results.
+ */
+function useInfiniteQuery(options) {
+    return (0, react_query_1.useInfiniteQuery)({
+        ...DATA_SERVICE_QUERY_DEFAULTS,
+        ...options,
+    });
+}
+exports.useInfiniteQuery = useInfiniteQuery;
+//# sourceMappingURL=hooks.cjs.map

package/dist/hooks.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.cjs","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":";;;AACA,uDAU+B;AAE/B;;;GAGG;AAEH,MAAM,2BAA2B,GAAG;IAClC,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,KAAK;CACb,CAAC;AAEF;;;;;;GAMG;AACH,SAAgB,QAAQ,CAMtB,OAQC;IAED,OAAO,IAAA,sBAAgB,EAAC,EAAE,GAAG,2BAA2B,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC1E,CAAC;AAjBD,4BAiBC;AAED;;;;;;GAMG;AACH,SAAgB,gBAAgB,CAM9B,OASC;IAED,OAAO,IAAA,8BAAwB,EAAC;QAC9B,GAAG,2BAA2B;QAC9B,GAAG,OAAO;KACX,CAAC,CAAC;AACL,CAAC;AArBD,4CAqBC","sourcesContent":["import { QueryKey } from '@metamask/base-data-service';\nimport {\n  useQuery as useQueryTanStack,\n  useInfiniteQuery as useInfiniteQueryTanStack,\n  OmitKeyof,\n  UseQueryOptions,\n  InitialDataFunction,\n  NonUndefinedGuard,\n  UseInfiniteQueryOptions,\n  UseQueryResult,\n  UseInfiniteQueryResult,\n} from '@tanstack/react-query';\n\n/**\n * We provide re-exports of the underlying TanStack Query hooks with narrower types,\n * removing `staleTime` and `queryFn` which aren't useful when using data services.\n */\n\nconst DATA_SERVICE_QUERY_DEFAULTS = {\n  staleTime: 0,\n  retry: false,\n};\n\n/**\n * Consume a query from a data service.\n *\n * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported\n * when querying data services.\n * @returns The query results.\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: OmitKeyof<\n    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n    'initialData' | 'staleTime' | 'queryFn'\n  > & {\n    initialData?:\n      | undefined\n      | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>\n      | NonUndefinedGuard<TQueryFnData>;\n  },\n): UseQueryResult<TData, TError> {\n  return useQueryTanStack({ ...DATA_SERVICE_QUERY_DEFAULTS, ...options });\n}\n\n/**\n * Consume a paginated query from a data service.\n *\n * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported\n * when querying data services.\n * @returns The paginated query results.\n */\nexport function useInfiniteQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: OmitKeyof<\n    UseInfiniteQueryOptions<\n      TQueryFnData,\n      TError,\n      TData,\n      TQueryFnData,\n      TQueryKey\n    >,\n    'staleTime' | 'queryFn'\n  >,\n): UseInfiniteQueryResult<TData, TError> {\n  return useInfiniteQueryTanStack({\n    ...DATA_SERVICE_QUERY_DEFAULTS,\n    ...options,\n  });\n}\n"]}

package/dist/hooks.d.cts

@@ -0,0 +1,21 @@
+import { QueryKey } from "@metamask/base-data-service";
+import { OmitKeyof, UseQueryOptions, InitialDataFunction, NonUndefinedGuard, UseInfiniteQueryOptions, UseQueryResult, UseInfiniteQueryResult } from "@tanstack/react-query";
+/**
+ * Consume a query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The query results.
+ */
+export declare function useQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'initialData' | 'staleTime' | 'queryFn'> & {
+    initialData?: undefined | InitialDataFunction<NonUndefinedGuard<TQueryFnData>> | NonUndefinedGuard<TQueryFnData>;
+}): UseQueryResult<TData, TError>;
+/**
+ * Consume a paginated query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The paginated query results.
+ */
+export declare function useInfiniteQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: OmitKeyof<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, 'staleTime' | 'queryFn'>): UseInfiniteQueryResult<TData, TError>;
+//# sourceMappingURL=hooks.d.cts.map

package/dist/hooks.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.cts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,oCAAoC;AACvD,OAAO,EAGL,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,cAAc,EACd,sBAAsB,EACvB,8BAA8B;AAY/B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,YAAY,GAAG,OAAO,EACtB,MAAM,GAAG,OAAO,EAChB,KAAK,GAAG,YAAY,EACpB,SAAS,SAAS,QAAQ,GAAG,QAAQ,EAErC,OAAO,EAAE,SAAS,CAChB,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,EACvD,aAAa,GAAG,WAAW,GAAG,SAAS,CACxC,GAAG;IACF,WAAW,CAAC,EACR,SAAS,GACT,mBAAmB,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,GACpD,iBAAiB,CAAC,YAAY,CAAC,CAAC;CACrC,GACA,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAE/B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,GAAG,OAAO,EACtB,MAAM,GAAG,OAAO,EAChB,KAAK,GAAG,YAAY,EACpB,SAAS,SAAS,QAAQ,GAAG,QAAQ,EAErC,OAAO,EAAE,SAAS,CAChB,uBAAuB,CACrB,YAAY,EACZ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,SAAS,CACV,EACD,WAAW,GAAG,SAAS,CACxB,GACA,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC,CAKvC"}

package/dist/hooks.d.mts

@@ -0,0 +1,21 @@
+import { QueryKey } from "@metamask/base-data-service";
+import { OmitKeyof, UseQueryOptions, InitialDataFunction, NonUndefinedGuard, UseInfiniteQueryOptions, UseQueryResult, UseInfiniteQueryResult } from "@tanstack/react-query";
+/**
+ * Consume a query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The query results.
+ */
+export declare function useQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'initialData' | 'staleTime' | 'queryFn'> & {
+    initialData?: undefined | InitialDataFunction<NonUndefinedGuard<TQueryFnData>> | NonUndefinedGuard<TQueryFnData>;
+}): UseQueryResult<TData, TError>;
+/**
+ * Consume a paginated query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The paginated query results.
+ */
+export declare function useInfiniteQuery<TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: OmitKeyof<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryFnData, TQueryKey>, 'staleTime' | 'queryFn'>): UseInfiniteQueryResult<TData, TError>;
+//# sourceMappingURL=hooks.d.mts.map

package/dist/hooks.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.mts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,oCAAoC;AACvD,OAAO,EAGL,SAAS,EACT,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,cAAc,EACd,sBAAsB,EACvB,8BAA8B;AAY/B;;;;;;GAMG;AACH,wBAAgB,QAAQ,CACtB,YAAY,GAAG,OAAO,EACtB,MAAM,GAAG,OAAO,EAChB,KAAK,GAAG,YAAY,EACpB,SAAS,SAAS,QAAQ,GAAG,QAAQ,EAErC,OAAO,EAAE,SAAS,CAChB,eAAe,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,EACvD,aAAa,GAAG,WAAW,GAAG,SAAS,CACxC,GAAG;IACF,WAAW,CAAC,EACR,SAAS,GACT,mBAAmB,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC,GACpD,iBAAiB,CAAC,YAAY,CAAC,CAAC;CACrC,GACA,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAE/B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,GAAG,OAAO,EACtB,MAAM,GAAG,OAAO,EAChB,KAAK,GAAG,YAAY,EACpB,SAAS,SAAS,QAAQ,GAAG,QAAQ,EAErC,OAAO,EAAE,SAAS,CAChB,uBAAuB,CACrB,YAAY,EACZ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,SAAS,CACV,EACD,WAAW,GAAG,SAAS,CACxB,GACA,sBAAsB,CAAC,KAAK,EAAE,MAAM,CAAC,CAKvC"}

package/dist/hooks.mjs

@@ -0,0 +1,33 @@
+import { useQuery as useQueryTanStack, useInfiniteQuery as useInfiniteQueryTanStack } from "@tanstack/react-query";
+/**
+ * We provide re-exports of the underlying TanStack Query hooks with narrower types,
+ * removing `staleTime` and `queryFn` which aren't useful when using data services.
+ */
+const DATA_SERVICE_QUERY_DEFAULTS = {
+    staleTime: 0,
+    retry: false,
+};
+/**
+ * Consume a query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The query results.
+ */
+export function useQuery(options) {
+    return useQueryTanStack({ ...DATA_SERVICE_QUERY_DEFAULTS, ...options });
+}
+/**
+ * Consume a paginated query from a data service.
+ *
+ * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported
+ * when querying data services.
+ * @returns The paginated query results.
+ */
+export function useInfiniteQuery(options) {
+    return useInfiniteQueryTanStack({
+        ...DATA_SERVICE_QUERY_DEFAULTS,
+        ...options,
+    });
+}
+//# sourceMappingURL=hooks.mjs.map

package/dist/hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.mjs","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,IAAI,gBAAgB,EAC5B,gBAAgB,IAAI,wBAAwB,EAQ7C,8BAA8B;AAE/B;;;GAGG;AAEH,MAAM,2BAA2B,GAAG;IAClC,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,KAAK;CACb,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,QAAQ,CAMtB,OAQC;IAED,OAAO,gBAAgB,CAAC,EAAE,GAAG,2BAA2B,EAAE,GAAG,OAAO,EAAE,CAAC,CAAC;AAC1E,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAM9B,OASC;IAED,OAAO,wBAAwB,CAAC;QAC9B,GAAG,2BAA2B;QAC9B,GAAG,OAAO;KACX,CAAC,CAAC;AACL,CAAC","sourcesContent":["import { QueryKey } from '@metamask/base-data-service';\nimport {\n  useQuery as useQueryTanStack,\n  useInfiniteQuery as useInfiniteQueryTanStack,\n  OmitKeyof,\n  UseQueryOptions,\n  InitialDataFunction,\n  NonUndefinedGuard,\n  UseInfiniteQueryOptions,\n  UseQueryResult,\n  UseInfiniteQueryResult,\n} from '@tanstack/react-query';\n\n/**\n * We provide re-exports of the underlying TanStack Query hooks with narrower types,\n * removing `staleTime` and `queryFn` which aren't useful when using data services.\n */\n\nconst DATA_SERVICE_QUERY_DEFAULTS = {\n  staleTime: 0,\n  retry: false,\n};\n\n/**\n * Consume a query from a data service.\n *\n * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported\n * when querying data services.\n * @returns The query results.\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: OmitKeyof<\n    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n    'initialData' | 'staleTime' | 'queryFn'\n  > & {\n    initialData?:\n      | undefined\n      | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>\n      | NonUndefinedGuard<TQueryFnData>;\n  },\n): UseQueryResult<TData, TError> {\n  return useQueryTanStack({ ...DATA_SERVICE_QUERY_DEFAULTS, ...options });\n}\n\n/**\n * Consume a paginated query from a data service.\n *\n * @param options - The query options. Keep in mind that `staleTime` and `queryFn` are not supported\n * when querying data services.\n * @returns The paginated query results.\n */\nexport function useInfiniteQuery<\n  TQueryFnData = unknown,\n  TError = unknown,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: OmitKeyof<\n    UseInfiniteQueryOptions<\n      TQueryFnData,\n      TError,\n      TData,\n      TQueryFnData,\n      TQueryKey\n    >,\n    'staleTime' | 'queryFn'\n  >,\n): UseInfiniteQueryResult<TData, TError> {\n  return useInfiniteQueryTanStack({\n    ...DATA_SERVICE_QUERY_DEFAULTS,\n    ...options,\n  });\n}\n"]}

package/dist/index.cjs

@@ -1,13 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Example function that returns a greeting for the given name.
- *
- * @param name - The name to greet.
- * @returns The greeting.
- */
-function greeter(name) {
-    return `Hello, ${name}!`;
-}
-exports.default = greeter;
+exports.useInfiniteQuery = exports.useQuery = exports.createUIQueryClient = void 0;
+var createUIQueryClient_1 = require("./createUIQueryClient.cjs");
+Object.defineProperty(exports, "createUIQueryClient", { enumerable: true, get: function () { return createUIQueryClient_1.createUIQueryClient; } });
+var hooks_1 = require("./hooks.cjs");
+Object.defineProperty(exports, "useQuery", { enumerable: true, get: function () { return hooks_1.useQuery; } });
+Object.defineProperty(exports, "useInfiniteQuery", { enumerable: true, get: function () { return hooks_1.useInfiniteQuery; } });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA;;;;;GAKG;AACH,SAAwB,OAAO,CAAC,IAAY;IAC1C,OAAO,UAAU,IAAI,GAAG,CAAC;AAC3B,CAAC;AAFD,0BAEC","sourcesContent":["/**\n * Example function that returns a greeting for the given name.\n *\n * @param name - The name to greet.\n * @returns The greeting.\n */\nexport default function greeter(name: string): string {\n  return `Hello, ${name}!`;\n}\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,iEAA4D;AAAnD,0HAAA,mBAAmB,OAAA;AAC5B,qCAAqD;AAA5C,iGAAA,QAAQ,OAAA;AAAE,yGAAA,gBAAgB,OAAA","sourcesContent":["export { createUIQueryClient } from './createUIQueryClient';\nexport { useQuery, useInfiniteQuery } from './hooks';\n"]}

package/dist/index.d.cts

@@ -1,8 +1,3 @@
-/**
- * Example function that returns a greeting for the given name.
- *
- * @param name - The name to greet.
- * @returns The greeting.
- */
-export default function greeter(name: string): string;
+export { createUIQueryClient } from "./createUIQueryClient.cjs";
+export { useQuery, useInfiniteQuery } from "./hooks.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpD"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kCAA8B;AAC5D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,oBAAgB"}

package/dist/index.d.mts

@@ -1,8 +1,3 @@
-/**
- * Example function that returns a greeting for the given name.
- *
- * @param name - The name to greet.
- * @returns The greeting.
- */
-export default function greeter(name: string): string;
+export { createUIQueryClient } from "./createUIQueryClient.mjs";
+export { useQuery, useInfiniteQuery } from "./hooks.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpD"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kCAA8B;AAC5D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,oBAAgB"}

package/dist/index.mjs

@@ -1,10 +1,3 @@
-/**
- * Example function that returns a greeting for the given name.
- *
- * @param name - The name to greet.
- * @returns The greeting.
- */
-export default function greeter(name) {
-    return `Hello, ${name}!`;
-}
+export { createUIQueryClient } from "./createUIQueryClient.mjs";
+export { useQuery, useInfiniteQuery } from "./hooks.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,IAAY;IAC1C,OAAO,UAAU,IAAI,GAAG,CAAC;AAC3B,CAAC","sourcesContent":["/**\n * Example function that returns a greeting for the given name.\n *\n * @param name - The name to greet.\n * @returns The greeting.\n */\nexport default function greeter(name: string): string {\n  return `Hello, ${name}!`;\n}\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,kCAA8B;AAC5D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,oBAAgB","sourcesContent":["export { createUIQueryClient } from './createUIQueryClient';\nexport { useQuery, useInfiniteQuery } from './hooks';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask-previews/react-data-query",
-  "version": "0.0.0-preview-a0caca0c0",
+  "version": "0.1.0-preview-afe010990",
   "description": "Provides React utilities for consuming data services",
   "keywords": [
     "MetaMask",
@@ -46,6 +46,12 @@
     "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
+  "dependencies": {
+    "@metamask/base-data-service": "^0.1.0",
+    "@metamask/utils": "^11.9.0",
+    "@tanstack/query-core": "^4.43.0",
+    "@tanstack/react-query": "^4.43.0"
+  },
   "devDependencies": {
     "@metamask/auto-changelog": "^3.4.4",
     "@ts-bridge/cli": "^0.6.4",
@@ -57,6 +63,11 @@
     "typedoc-plugin-missing-exports": "^2.0.0",
     "typescript": "~5.3.3"
   },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-native": "*"
+  },
   "engines": {
     "node": "^18.18 || >=20"
   },