@usels/integrations 0.0.1-beta.3

package/README.md

@@ -0,0 +1,18 @@
+# @usels/integrations
+
+
+## Overview
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `@legendapp/state`: ^2.0.0 (optional)
+- `react`: ^18.0.0 || ^19.0.0 (optional)
+- `react-dom`: ^18.0.0 || ^19.0.0 (optional)
+
+The peer dependencies are marked as optional because you may use this package in different contexts (React components, vanilla JS, Node.js, etc.).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,310 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { QueryClient, QueryKey, MutationKey, QueryFunctionContext, InfiniteData } from '@tanstack/query-core';
+export { QueryClient } from '@tanstack/query-core';
+import { QueryClient as QueryClient$1 } from '@tanstack/react-query';
+import { Observable } from '@legendapp/state';
+import { MaybeObservable } from '@usels/core';
+
+interface QueryClientProviderProps {
+    client: QueryClient;
+    children: ReactNode;
+}
+/**
+ * Provider component that makes QueryClient available to hooks
+ *
+ * @example
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { QueryClientProvider } from '@usels/integrations'
+ *
+ * const queryClient = new QueryClient()
+ *
+ * function App() {
+ *   return (
+ *     <QueryClientProvider client={queryClient}>
+ *       <YourApp />
+ *     </QueryClientProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function QueryClientProvider({ client, children, }: QueryClientProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook to retrieve the QueryClient from context
+ *
+ * @throws Error if used outside of QueryClientProvider
+ *
+ * @example
+ * ```tsx
+ * import { useQueryClient } from '@usels/integrations'
+ *
+ * function MyComponent() {
+ *   const queryClient = useQueryClient()
+ *   // Use queryClient...
+ * }
+ * ```
+ */
+declare function useQueryClient(): QueryClient$1;
+
+interface UseQueryOptions<TData = unknown> {
+    queryKey: QueryKey;
+    queryFn: () => Promise<TData>;
+    enabled?: MaybeObservable<boolean>;
+    staleTime?: MaybeObservable<number>;
+    gcTime?: MaybeObservable<number>;
+    retry?: MaybeObservable<number | boolean>;
+    refetchOnWindowFocus?: MaybeObservable<boolean>;
+    refetchOnMount?: MaybeObservable<boolean>;
+    refetchOnReconnect?: MaybeObservable<boolean>;
+    /**
+     * Set this to `true` to throw errors to the nearest error boundary.
+     * Set to a function to control which errors should be thrown.
+     */
+    throwOnError?: boolean | ((error: Error) => boolean);
+    /**
+     * Set this to `true` to enable React Suspense mode.
+     * The hook will throw a promise while fetching, suspending the component.
+     *
+     * Note: Requires a React Suspense boundary in the component tree.
+     * The query state is still available as an observable when not suspended.
+     */
+    suspense?: boolean;
+}
+interface QueryState<TData = unknown> {
+    data: TData | undefined;
+    error: Error | null;
+    status: "pending" | "error" | "success";
+    fetchStatus: "fetching" | "paused" | "idle";
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isLoadingError: boolean;
+    isRefetchError: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isLoading: boolean;
+    /**
+     * @deprecated Use `isLoading` instead. Will be removed in TanStack Query v6.
+     */
+    isInitialLoading: boolean;
+    isStale: boolean;
+    isPlaceholderData: boolean;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isEnabled: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    refetch: () => void;
+}
+/**
+ * TanStack Query와 Legend-App-State를 연결하는 커스텀 훅
+ * QueryObserver를 사용하여 쿼리 상태를 observable로 관리합니다.
+ *
+ * Observable 값을 파라미터로 받을 수 있으며, 변경 시 자동으로 refetch됩니다.
+ *
+ * @example
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { QueryClientProvider, useQuery } from '@usels/integrations'
+ *
+ * // QueryClient를 생성하고 Provider로 제공
+ * const queryClient = new QueryClient()
+ *
+ * function App() {
+ *   return (
+ *     <QueryClientProvider client={queryClient}>
+ *       <YourApp />
+ *     </QueryClientProvider>
+ *   )
+ * }
+ *
+ * // 컴포넌트에서 사용
+ * function YourComponent() {
+ *   // 일반 값
+ *   const products$ = useQuery({
+ *     queryKey: ['products'],
+ *     queryFn: () => fetch('/api/products').then(r => r.json())
+ *   })
+ *
+ *   // Observable 값 (자동 반응)
+ *   const filter$ = useObservable({ category: 'electronics' })
+ *   const filteredProducts$ = useQuery({
+ *     queryKey: ['products', filter$],
+ *     queryFn: () => fetch(`/api/products?category=${filter$.category.get()}`).then(r => r.json())
+ *   })
+ *   // filter$가 변경되면 자동으로 refetch!
+ *
+ *
+ *   // 렌더링
+ *   return (
+ *     <Show if={() => products$.isSuccess.get()}>
+ *       {() => (
+ *         <For each={() => products$.data.get()}>
+ *           {(product$) => <ProductCard $product={product$} />}
+ *         </For>
+ *       )}
+ *     </Show>
+ *   )
+ * }
+ * ```
+ */
+declare function useQuery<TData = unknown>(options: MaybeObservable<UseQueryOptions<TData>>): Observable<QueryState<TData>>;
+
+interface UseMutationOptions<TData = unknown, TVariables = void, TContext = unknown> {
+    mutationKey?: MutationKey;
+    mutationFn: (variables: TVariables) => Promise<TData>;
+    onMutate?: (variables: TVariables) => TContext | Promise<TContext>;
+    onSuccess?: (data: TData, variables: TVariables, context: TContext | undefined) => void | Promise<void>;
+    onError?: (error: Error, variables: TVariables, context: TContext | undefined) => void | Promise<void>;
+    onSettled?: (data: TData | undefined, error: Error | null, variables: TVariables, context: TContext | undefined) => void | Promise<void>;
+}
+interface MutationState<TData = unknown, TVariables = void, TContext = unknown> {
+    data: TData | undefined;
+    error: Error | null;
+    status: "idle" | "pending" | "error" | "success";
+    isIdle: boolean;
+    isPending: boolean;
+    isPaused: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    failureCount: number;
+    failureReason: Error | null;
+    submittedAt: number;
+    variables: TVariables | undefined;
+    context: TContext | undefined;
+    mutate: (variables: TVariables) => void;
+    mutateAsync: (variables: TVariables) => Promise<TData>;
+    reset: () => void;
+}
+/**
+ * TanStack Query Mutation과 Legend-App-State를 연결하는 커스텀 훅
+ * MutationObserver를 사용하여 뮤테이션 상태를 observable로 관리합니다.
+ *
+ * @example
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { QueryClientProvider, useMutation } from '@usels/integrations'
+ *
+ * // QueryClient를 생성하고 Provider로 제공
+ * const queryClient = new QueryClient()
+ *
+ * function App() {
+ *   return (
+ *     <QueryClientProvider client={queryClient}>
+ *       <YourApp />
+ *     </QueryClientProvider>
+ *   )
+ * }
+ *
+ * // 컴포넌트에서 사용
+ * function YourComponent() {
+ *   const createProduct$ = useMutation({
+ *     mutationFn: (product: NewProduct) =>
+ *       fetch('/api/products', {
+ *         method: 'POST',
+ *         body: JSON.stringify(product)
+ *       }).then(r => r.json()),
+ *     onSuccess: () => {
+ *       alert('Product created!')
+ *     }
+ *   })
+ *
+ *   const handleSubmit = (product: NewProduct) => {
+ *     createProduct$.mutate(product)
+ *   }
+ * }
+ * ```
+ */
+declare function useMutation<TData = unknown, TVariables = void, TContext = unknown>(options: UseMutationOptions<TData, TVariables, TContext>): Observable<MutationState<TData, TVariables, TContext>>;
+
+interface UseInfiniteQueryOptions<TQueryFnData = unknown, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown> {
+    queryKey: TQueryKey;
+    queryFn: (context: QueryFunctionContext<TQueryKey, TPageParam>) => Promise<TQueryFnData>;
+    initialPageParam: TPageParam;
+    getNextPageParam: (lastPage: TQueryFnData, allPages: Array<TQueryFnData>, lastPageParam: TPageParam, allPageParams: Array<TPageParam>) => TPageParam | undefined | null;
+    getPreviousPageParam?: (firstPage: TQueryFnData, allPages: Array<TQueryFnData>, firstPageParam: TPageParam, allPageParams: Array<TPageParam>) => TPageParam | undefined | null;
+    enabled?: MaybeObservable<boolean>;
+    staleTime?: MaybeObservable<number>;
+    gcTime?: MaybeObservable<number>;
+    retry?: MaybeObservable<number | boolean>;
+    refetchOnWindowFocus?: MaybeObservable<boolean>;
+    refetchOnMount?: MaybeObservable<boolean>;
+    refetchOnReconnect?: MaybeObservable<boolean>;
+    maxPages?: number;
+}
+interface InfiniteQueryState<TData = unknown> {
+    data: TData | undefined;
+    error: Error | null;
+    status: "pending" | "error" | "success";
+    fetchStatus: "fetching" | "paused" | "idle";
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isLoadingError: boolean;
+    isRefetchError: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isLoading: boolean;
+    isStale: boolean;
+    isPlaceholderData: boolean;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isEnabled: boolean;
+    /**
+     * @deprecated Use isLoading instead. Will be removed in TanStack Query v6.
+     */
+    isInitialLoading: boolean;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    refetch: () => void;
+    fetchNextPage: () => void;
+    fetchPreviousPage: () => void;
+}
+/**
+ * TanStack Query Infinite Query와 Legend-App-State를 연결하는 커스텀 훅
+ * InfiniteQueryObserver를 사용하여 쿼리 상태를 observable로 관리합니다.
+ *
+ * Observable 값을 파라미터로 받을 수 있으며, 변경 시 자동으로 refetch됩니다.
+ *
+ * @example
+ * ```tsx
+ * // Cursor-based pagination
+ * const items$ = useInfiniteQuery({
+ *   queryKey: ['items'],
+ *   queryFn: ({ pageParam }) =>
+ *     fetch(`/api/items?cursor=${pageParam}`).then(r => r.json()),
+ *   initialPageParam: undefined,
+ *   getNextPageParam: (lastPage) => lastPage.nextCursor,
+ * })
+ *
+ * // Observable reactivity
+ * const filter$ = useObservable({ category: 'electronics' })
+ * const items$ = useInfiniteQuery({
+ *   queryKey: ['items', filter$],
+ *   queryFn: ({ pageParam }) =>
+ *     fetch(`/api/items?category=${filter$.category.get()}&cursor=${pageParam}`)
+ *       .then(r => r.json()),
+ *   initialPageParam: undefined,
+ *   getNextPageParam: (lastPage) => lastPage.nextCursor,
+ * })
+ * ```
+ */
+declare function useInfiniteQuery<TQueryFnData = unknown, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: MaybeObservable<UseInfiniteQueryOptions<TQueryFnData, TQueryKey, TPageParam>>): Observable<InfiniteQueryState<InfiniteData<TQueryFnData>>>;
+
+export { type InfiniteQueryState, type MutationState, QueryClientProvider, type QueryState, type UseInfiniteQueryOptions, type UseMutationOptions, type UseQueryOptions, useInfiniteQuery, useMutation, useQuery, useQueryClient };

package/dist/index.d.ts

@@ -0,0 +1,310 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { QueryClient, QueryKey, MutationKey, QueryFunctionContext, InfiniteData } from '@tanstack/query-core';
+export { QueryClient } from '@tanstack/query-core';
+import { QueryClient as QueryClient$1 } from '@tanstack/react-query';
+import { Observable } from '@legendapp/state';
+import { MaybeObservable } from '@usels/core';
+
+interface QueryClientProviderProps {
+    client: QueryClient;
+    children: ReactNode;
+}
+/**
+ * Provider component that makes QueryClient available to hooks
+ *
+ * @example
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { QueryClientProvider } from '@usels/integrations'
+ *
+ * const queryClient = new QueryClient()
+ *
+ * function App() {
+ *   return (
+ *     <QueryClientProvider client={queryClient}>
+ *       <YourApp />
+ *     </QueryClientProvider>
+ *   )
+ * }
+ * ```
+ */
+declare function QueryClientProvider({ client, children, }: QueryClientProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook to retrieve the QueryClient from context
+ *
+ * @throws Error if used outside of QueryClientProvider
+ *
+ * @example
+ * ```tsx
+ * import { useQueryClient } from '@usels/integrations'
+ *
+ * function MyComponent() {
+ *   const queryClient = useQueryClient()
+ *   // Use queryClient...
+ * }
+ * ```
+ */
+declare function useQueryClient(): QueryClient$1;
+
+interface UseQueryOptions<TData = unknown> {
+    queryKey: QueryKey;
+    queryFn: () => Promise<TData>;
+    enabled?: MaybeObservable<boolean>;
+    staleTime?: MaybeObservable<number>;
+    gcTime?: MaybeObservable<number>;
+    retry?: MaybeObservable<number | boolean>;
+    refetchOnWindowFocus?: MaybeObservable<boolean>;
+    refetchOnMount?: MaybeObservable<boolean>;
+    refetchOnReconnect?: MaybeObservable<boolean>;
+    /**
+     * Set this to `true` to throw errors to the nearest error boundary.
+     * Set to a function to control which errors should be thrown.
+     */
+    throwOnError?: boolean | ((error: Error) => boolean);
+    /**
+     * Set this to `true` to enable React Suspense mode.
+     * The hook will throw a promise while fetching, suspending the component.
+     *
+     * Note: Requires a React Suspense boundary in the component tree.
+     * The query state is still available as an observable when not suspended.
+     */
+    suspense?: boolean;
+}
+interface QueryState<TData = unknown> {
+    data: TData | undefined;
+    error: Error | null;
+    status: "pending" | "error" | "success";
+    fetchStatus: "fetching" | "paused" | "idle";
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isLoadingError: boolean;
+    isRefetchError: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isLoading: boolean;
+    /**
+     * @deprecated Use `isLoading` instead. Will be removed in TanStack Query v6.
+     */
+    isInitialLoading: boolean;
+    isStale: boolean;
+    isPlaceholderData: boolean;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isEnabled: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    refetch: () => void;
+}
+/**
+ * TanStack Query와 Legend-App-State를 연결하는 커스텀 훅
+ * QueryObserver를 사용하여 쿼리 상태를 observable로 관리합니다.
+ *
+ * Observable 값을 파라미터로 받을 수 있으며, 변경 시 자동으로 refetch됩니다.
+ *
+ * @example
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { QueryClientProvider, useQuery } from '@usels/integrations'
+ *
+ * // QueryClient를 생성하고 Provider로 제공
+ * const queryClient = new QueryClient()
+ *
+ * function App() {
+ *   return (
+ *     <QueryClientProvider client={queryClient}>
+ *       <YourApp />
+ *     </QueryClientProvider>
+ *   )
+ * }
+ *
+ * // 컴포넌트에서 사용
+ * function YourComponent() {
+ *   // 일반 값
+ *   const products$ = useQuery({
+ *     queryKey: ['products'],
+ *     queryFn: () => fetch('/api/products').then(r => r.json())
+ *   })
+ *
+ *   // Observable 값 (자동 반응)
+ *   const filter$ = useObservable({ category: 'electronics' })
+ *   const filteredProducts$ = useQuery({
+ *     queryKey: ['products', filter$],
+ *     queryFn: () => fetch(`/api/products?category=${filter$.category.get()}`).then(r => r.json())
+ *   })
+ *   // filter$가 변경되면 자동으로 refetch!
+ *
+ *
+ *   // 렌더링
+ *   return (
+ *     <Show if={() => products$.isSuccess.get()}>
+ *       {() => (
+ *         <For each={() => products$.data.get()}>
+ *           {(product$) => <ProductCard $product={product$} />}
+ *         </For>
+ *       )}
+ *     </Show>
+ *   )
+ * }
+ * ```
+ */
+declare function useQuery<TData = unknown>(options: MaybeObservable<UseQueryOptions<TData>>): Observable<QueryState<TData>>;
+
+interface UseMutationOptions<TData = unknown, TVariables = void, TContext = unknown> {
+    mutationKey?: MutationKey;
+    mutationFn: (variables: TVariables) => Promise<TData>;
+    onMutate?: (variables: TVariables) => TContext | Promise<TContext>;
+    onSuccess?: (data: TData, variables: TVariables, context: TContext | undefined) => void | Promise<void>;
+    onError?: (error: Error, variables: TVariables, context: TContext | undefined) => void | Promise<void>;
+    onSettled?: (data: TData | undefined, error: Error | null, variables: TVariables, context: TContext | undefined) => void | Promise<void>;
+}
+interface MutationState<TData = unknown, TVariables = void, TContext = unknown> {
+    data: TData | undefined;
+    error: Error | null;
+    status: "idle" | "pending" | "error" | "success";
+    isIdle: boolean;
+    isPending: boolean;
+    isPaused: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    failureCount: number;
+    failureReason: Error | null;
+    submittedAt: number;
+    variables: TVariables | undefined;
+    context: TContext | undefined;
+    mutate: (variables: TVariables) => void;
+    mutateAsync: (variables: TVariables) => Promise<TData>;
+    reset: () => void;
+}
+/**
+ * TanStack Query Mutation과 Legend-App-State를 연결하는 커스텀 훅
+ * MutationObserver를 사용하여 뮤테이션 상태를 observable로 관리합니다.
+ *
+ * @example
+ * ```tsx
+ * import { QueryClient } from '@tanstack/react-query'
+ * import { QueryClientProvider, useMutation } from '@usels/integrations'
+ *
+ * // QueryClient를 생성하고 Provider로 제공
+ * const queryClient = new QueryClient()
+ *
+ * function App() {
+ *   return (
+ *     <QueryClientProvider client={queryClient}>
+ *       <YourApp />
+ *     </QueryClientProvider>
+ *   )
+ * }
+ *
+ * // 컴포넌트에서 사용
+ * function YourComponent() {
+ *   const createProduct$ = useMutation({
+ *     mutationFn: (product: NewProduct) =>
+ *       fetch('/api/products', {
+ *         method: 'POST',
+ *         body: JSON.stringify(product)
+ *       }).then(r => r.json()),
+ *     onSuccess: () => {
+ *       alert('Product created!')
+ *     }
+ *   })
+ *
+ *   const handleSubmit = (product: NewProduct) => {
+ *     createProduct$.mutate(product)
+ *   }
+ * }
+ * ```
+ */
+declare function useMutation<TData = unknown, TVariables = void, TContext = unknown>(options: UseMutationOptions<TData, TVariables, TContext>): Observable<MutationState<TData, TVariables, TContext>>;
+
+interface UseInfiniteQueryOptions<TQueryFnData = unknown, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown> {
+    queryKey: TQueryKey;
+    queryFn: (context: QueryFunctionContext<TQueryKey, TPageParam>) => Promise<TQueryFnData>;
+    initialPageParam: TPageParam;
+    getNextPageParam: (lastPage: TQueryFnData, allPages: Array<TQueryFnData>, lastPageParam: TPageParam, allPageParams: Array<TPageParam>) => TPageParam | undefined | null;
+    getPreviousPageParam?: (firstPage: TQueryFnData, allPages: Array<TQueryFnData>, firstPageParam: TPageParam, allPageParams: Array<TPageParam>) => TPageParam | undefined | null;
+    enabled?: MaybeObservable<boolean>;
+    staleTime?: MaybeObservable<number>;
+    gcTime?: MaybeObservable<number>;
+    retry?: MaybeObservable<number | boolean>;
+    refetchOnWindowFocus?: MaybeObservable<boolean>;
+    refetchOnMount?: MaybeObservable<boolean>;
+    refetchOnReconnect?: MaybeObservable<boolean>;
+    maxPages?: number;
+}
+interface InfiniteQueryState<TData = unknown> {
+    data: TData | undefined;
+    error: Error | null;
+    status: "pending" | "error" | "success";
+    fetchStatus: "fetching" | "paused" | "idle";
+    isPending: boolean;
+    isSuccess: boolean;
+    isError: boolean;
+    isLoadingError: boolean;
+    isRefetchError: boolean;
+    isFetching: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isLoading: boolean;
+    isStale: boolean;
+    isPlaceholderData: boolean;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isEnabled: boolean;
+    /**
+     * @deprecated Use isLoading instead. Will be removed in TanStack Query v6.
+     */
+    isInitialLoading: boolean;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    isFetchingNextPage: boolean;
+    isFetchingPreviousPage: boolean;
+    isFetchNextPageError: boolean;
+    isFetchPreviousPageError: boolean;
+    refetch: () => void;
+    fetchNextPage: () => void;
+    fetchPreviousPage: () => void;
+}
+/**
+ * TanStack Query Infinite Query와 Legend-App-State를 연결하는 커스텀 훅
+ * InfiniteQueryObserver를 사용하여 쿼리 상태를 observable로 관리합니다.
+ *
+ * Observable 값을 파라미터로 받을 수 있으며, 변경 시 자동으로 refetch됩니다.
+ *
+ * @example
+ * ```tsx
+ * // Cursor-based pagination
+ * const items$ = useInfiniteQuery({
+ *   queryKey: ['items'],
+ *   queryFn: ({ pageParam }) =>
+ *     fetch(`/api/items?cursor=${pageParam}`).then(r => r.json()),
+ *   initialPageParam: undefined,
+ *   getNextPageParam: (lastPage) => lastPage.nextCursor,
+ * })
+ *
+ * // Observable reactivity
+ * const filter$ = useObservable({ category: 'electronics' })
+ * const items$ = useInfiniteQuery({
+ *   queryKey: ['items', filter$],
+ *   queryFn: ({ pageParam }) =>
+ *     fetch(`/api/items?category=${filter$.category.get()}&cursor=${pageParam}`)
+ *       .then(r => r.json()),
+ *   initialPageParam: undefined,
+ *   getNextPageParam: (lastPage) => lastPage.nextCursor,
+ * })
+ * ```
+ */
+declare function useInfiniteQuery<TQueryFnData = unknown, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: MaybeObservable<UseInfiniteQueryOptions<TQueryFnData, TQueryKey, TPageParam>>): Observable<InfiniteQueryState<InfiniteData<TQueryFnData>>>;
+
+export { type InfiniteQueryState, type MutationState, QueryClientProvider, type QueryState, type UseInfiniteQueryOptions, type UseMutationOptions, type UseQueryOptions, useInfiniteQuery, useMutation, useQuery, useQueryClient };