Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
zsa-react-query
Advanced tools
zsa-react-query - npm Package Compare versions
+105
| # zsa-react-query - React Query Integration for zsa | ||
| `zsa-react-query` is a companion library for `zsa` that provides seamless integration with [React Query](https://tanstack.com/query/latest/docs/framework/react/overview) for querying and mutating server actions from client components in Next.js applications. | ||
| ## Installation | ||
| Install `zsa-react-query` and its peer dependencies using your preferred package manager: | ||
| ```bash | ||
| npm i zsa-react-query @tanstack/react-query | ||
| ``` | ||
| ## Setup | ||
| Wrap your application with a React Query provider: | ||
| ```typescript | ||
| import { QueryClient, QueryClientProvider } from "@tanstack/react-query" | ||
| function ReactQueryProvider({ children }: React.PropsWithChildren) { | ||
| const [client] = useState(new QueryClient()) | ||
| return <QueryClientProvider client={client}>{children}</QueryClientProvider> | ||
| } | ||
| export default ReactQueryProvider | ||
| ``` | ||
| Set up your hooks: | ||
| ```typescript | ||
| import { useInfiniteQuery, useMutation, useQuery } from "@tanstack/react-query" | ||
| import { setupServerActionHooks } from "zsa-react-query" | ||
| const { | ||
| useServerActionQuery, | ||
| useServerActionMutation, | ||
| useServerActionInfiniteQuery, | ||
| } = setupServerActionHooks({ | ||
| hooks: { | ||
| useQuery: useQuery, | ||
| useMutation: useMutation, | ||
| useInfiniteQuery: useInfiniteQuery, | ||
| }, | ||
| }) | ||
| export { | ||
| useServerActionInfiniteQuery, | ||
| useServerActionMutation, | ||
| useServerActionQuery, | ||
| } | ||
| ``` | ||
| ## Usage | ||
| Query a server action: | ||
| ```typescript | ||
| import { useServerActionQuery } from "@/lib/hooks/server-action-hooks" | ||
| import { getRandomNumber } from "./actions" | ||
| export default function RandomNumberDisplay() { | ||
| const { isLoading, isRefetching, isSuccess, data } = useServerActionQuery( | ||
| getRandomNumber, | ||
| { | ||
| input: { | ||
| min: 0, | ||
| max: 100, | ||
| }, | ||
| queryKey: ["getRandomNumber"], | ||
| } | ||
| ) | ||
| // ... | ||
| } | ||
| ``` | ||
| Mutate a server action: | ||
| ```typescript | ||
| import { useServerActionMutation } from "@/lib/hooks/server-action-hooks" | ||
| import { updateEmail } from "./actions" | ||
| export default function UpdateEmailForm() { | ||
| const { mutate, isLoading } = useServerActionMutation(updateEmail) | ||
| const handleSubmit = (e) => { | ||
| e.preventDefault() | ||
| const newEmail = e.target.email.value | ||
| mutate({ newEmail }) | ||
| } | ||
| // ... | ||
| } | ||
| ``` | ||
| For more detailed documentation and examples, please refer to the [full documentation](https://zsa.vercel.app). | ||
| ## Contributing | ||
| Contributions are welcome! Please open an issue or submit a pull request on the [GitHub repository](https://github.com/IdoPesok/zsa). | ||
| ## License | ||
| `zsa-react-query` is released under the [MIT License](https://github.com/IdoPesok/zsa/blob/main/LICENSE). |
+6
-1
@@ -24,7 +24,11 @@ "use strict"; | ||
| __export(src_exports, { | ||
| createServerActionsKeyFactory: () => createServerActionsKeyFactory, | ||
| setupServerActionHooks: () => setupServerActionHooks | ||
| }); | ||
| module.exports = __toCommonJS(src_exports); | ||
| var createServerActionsKeyFactory = (factory) => { | ||
| return factory; | ||
| }; | ||
| var setupServerActionHooks = (args) => { | ||
| const { useQuery, useMutation, useInfiniteQuery } = args; | ||
| const { useQuery, useMutation, useInfiniteQuery } = args.hooks; | ||
| const useServerActionInfiniteQuery = (action, options, queryClient) => { | ||
@@ -87,3 +91,4 @@ return useInfiniteQuery( | ||
| 0 && (module.exports = { | ||
| createServerActionsKeyFactory, | ||
| setupServerActionHooks | ||
| }); |
+22
-13
| import * as _tanstack_react_query from '@tanstack/react-query'; | ||
| import { InfiniteData, QueryKey, GetNextPageParamFunction, DefinedUseInfiniteQueryResult, DefinedUseQueryResult } from '@tanstack/react-query'; | ||
| import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, SAWError, inferServerActionInput } from 'zsa'; | ||
| import { InfiniteData, GetNextPageParamFunction, UseInfiniteQueryResult, DefinedUseInfiniteQueryResult, UseQueryResult, DefinedUseQueryResult } from '@tanstack/react-query'; | ||
| import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, ZSAError, inferServerActionInput } from 'zsa'; | ||
| declare const setupServerActionHooks: (args: { | ||
| useQuery: typeof _tanstack_react_query.useQuery; | ||
| useMutation: typeof _tanstack_react_query.useMutation; | ||
| useInfiniteQuery: typeof _tanstack_react_query.useInfiniteQuery; | ||
| type ServerActionsKeyFactory<TKey extends string[]> = { | ||
| [key: string]: (...args: any[]) => TKey; | ||
| }; | ||
| declare const createServerActionsKeyFactory: <const TKeys extends string[], const TFactory extends ServerActionsKeyFactory<TKeys>>(factory: TFactory) => TFactory; | ||
| declare const setupServerActionHooks: <const TFactory extends Readonly<ServerActionsKeyFactory<string[]>> | undefined>(args: { | ||
| hooks: { | ||
| useQuery: typeof _tanstack_react_query.useQuery; | ||
| useMutation: typeof _tanstack_react_query.useMutation; | ||
| useInfiniteQuery: typeof _tanstack_react_query.useInfiniteQuery; | ||
| }; | ||
| queryKeyFactory?: TFactory; | ||
| }) => { | ||
| useServerActionInfiniteQuery: <TPageParam extends unknown, THandler extends TAnyZodSafeFunctionHandler>(action: THandler, options: Omit<_tanstack_react_query.UseInfiniteQueryOptions<inferServerActionReturnData<THandler>, SAWError, InfiniteData<inferServerActionReturnData<THandler>, unknown>, inferServerActionReturnData<THandler>, QueryKey, TPageParam>, "getNextPageParam"> & { | ||
| useServerActionInfiniteQuery: <TPageParam extends unknown, THandler extends TAnyZodSafeFunctionHandler, TInitialData extends inferServerActionReturnData<THandler> | (() => inferServerActionReturnData<THandler>) | undefined>(action: THandler, options: Omit<_tanstack_react_query.UseInfiniteQueryOptions<inferServerActionReturnData<THandler>, ZSAError, InfiniteData<inferServerActionReturnData<THandler>, unknown>, inferServerActionReturnData<THandler>, TFactory extends undefined ? readonly unknown[] : Readonly<ReturnType<Exclude<TFactory, undefined>[keyof Exclude<TFactory, undefined>]>>, TPageParam>, "initialData" | "getNextPageParam"> & { | ||
| input: (args: { | ||
@@ -15,11 +22,13 @@ pageParam: TPageParam; | ||
| getNextPageParam: GetNextPageParamFunction<TPageParam, inferServerActionReturnData<THandler>>; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => DefinedUseInfiniteQueryResult<inferServerActionReturnData<THandler>, SAWError>; | ||
| useServerActionQuery: <THandler_1 extends TAnyZodSafeFunctionHandler>(action: THandler_1, options: Omit<_tanstack_react_query.UseQueryOptions<inferServerActionReturnData<THandler_1>, SAWError, inferServerActionReturnData<THandler_1>, QueryKey>, "queryFn"> & { | ||
| initialData?: TInitialData | undefined; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData extends undefined ? UseInfiniteQueryResult<inferServerActionReturnData<THandler>, ZSAError> : DefinedUseInfiniteQueryResult<inferServerActionReturnData<THandler>, ZSAError>; | ||
| useServerActionQuery: <THandler_1 extends TAnyZodSafeFunctionHandler, TInitialData_1 extends inferServerActionReturnData<THandler_1> | (() => inferServerActionReturnData<THandler_1>) | undefined>(action: THandler_1, options: Omit<_tanstack_react_query.UseQueryOptions<inferServerActionReturnData<THandler_1>, ZSAError, inferServerActionReturnData<THandler_1>, TFactory extends undefined ? readonly unknown[] : Readonly<ReturnType<Exclude<TFactory, undefined>[keyof Exclude<TFactory, undefined>]>>>, "queryFn" | "initialData"> & { | ||
| input: inferServerActionInput<THandler_1>; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => DefinedUseQueryResult<inferServerActionReturnData<THandler_1>, SAWError>; | ||
| useServerActionMutation: <THandler_2 extends TAnyZodSafeFunctionHandler, TReturnError extends boolean = false>(action: THandler_2, options?: (Omit<_tanstack_react_query.UseMutationOptions<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, SAWError, inferServerActionInput<THandler_2>, unknown>, "mutationFn"> & { | ||
| initialData?: TInitialData_1 | undefined; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData_1 extends undefined ? UseQueryResult<inferServerActionReturnData<THandler_1>, ZSAError> : DefinedUseQueryResult<inferServerActionReturnData<THandler_1>, ZSAError>; | ||
| useServerActionMutation: <THandler_2 extends TAnyZodSafeFunctionHandler, TReturnError extends boolean = false>(action: THandler_2, options?: (Omit<_tanstack_react_query.UseMutationOptions<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, ZSAError, inferServerActionInput<THandler_2>, unknown>, "mutationFn"> & { | ||
| returnError?: TReturnError | undefined; | ||
| }) | undefined, queryClient?: _tanstack_react_query.QueryClient | undefined) => _tanstack_react_query.UseMutationResult<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, SAWError, inferServerActionInput<THandler_2>, unknown>; | ||
| }) | undefined, queryClient?: _tanstack_react_query.QueryClient | undefined) => _tanstack_react_query.UseMutationResult<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, ZSAError, inferServerActionInput<THandler_2>, unknown>; | ||
| }; | ||
| export { setupServerActionHooks }; | ||
| export { createServerActionsKeyFactory, setupServerActionHooks }; |
+22
-13
| import * as _tanstack_react_query from '@tanstack/react-query'; | ||
| import { InfiniteData, QueryKey, GetNextPageParamFunction, DefinedUseInfiniteQueryResult, DefinedUseQueryResult } from '@tanstack/react-query'; | ||
| import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, SAWError, inferServerActionInput } from 'zsa'; | ||
| import { InfiniteData, GetNextPageParamFunction, UseInfiniteQueryResult, DefinedUseInfiniteQueryResult, UseQueryResult, DefinedUseQueryResult } from '@tanstack/react-query'; | ||
| import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, ZSAError, inferServerActionInput } from 'zsa'; | ||
| declare const setupServerActionHooks: (args: { | ||
| useQuery: typeof _tanstack_react_query.useQuery; | ||
| useMutation: typeof _tanstack_react_query.useMutation; | ||
| useInfiniteQuery: typeof _tanstack_react_query.useInfiniteQuery; | ||
| type ServerActionsKeyFactory<TKey extends string[]> = { | ||
| [key: string]: (...args: any[]) => TKey; | ||
| }; | ||
| declare const createServerActionsKeyFactory: <const TKeys extends string[], const TFactory extends ServerActionsKeyFactory<TKeys>>(factory: TFactory) => TFactory; | ||
| declare const setupServerActionHooks: <const TFactory extends Readonly<ServerActionsKeyFactory<string[]>> | undefined>(args: { | ||
| hooks: { | ||
| useQuery: typeof _tanstack_react_query.useQuery; | ||
| useMutation: typeof _tanstack_react_query.useMutation; | ||
| useInfiniteQuery: typeof _tanstack_react_query.useInfiniteQuery; | ||
| }; | ||
| queryKeyFactory?: TFactory; | ||
| }) => { | ||
| useServerActionInfiniteQuery: <TPageParam extends unknown, THandler extends TAnyZodSafeFunctionHandler>(action: THandler, options: Omit<_tanstack_react_query.UseInfiniteQueryOptions<inferServerActionReturnData<THandler>, SAWError, InfiniteData<inferServerActionReturnData<THandler>, unknown>, inferServerActionReturnData<THandler>, QueryKey, TPageParam>, "getNextPageParam"> & { | ||
| useServerActionInfiniteQuery: <TPageParam extends unknown, THandler extends TAnyZodSafeFunctionHandler, TInitialData extends inferServerActionReturnData<THandler> | (() => inferServerActionReturnData<THandler>) | undefined>(action: THandler, options: Omit<_tanstack_react_query.UseInfiniteQueryOptions<inferServerActionReturnData<THandler>, ZSAError, InfiniteData<inferServerActionReturnData<THandler>, unknown>, inferServerActionReturnData<THandler>, TFactory extends undefined ? readonly unknown[] : Readonly<ReturnType<Exclude<TFactory, undefined>[keyof Exclude<TFactory, undefined>]>>, TPageParam>, "initialData" | "getNextPageParam"> & { | ||
| input: (args: { | ||
@@ -15,11 +22,13 @@ pageParam: TPageParam; | ||
| getNextPageParam: GetNextPageParamFunction<TPageParam, inferServerActionReturnData<THandler>>; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => DefinedUseInfiniteQueryResult<inferServerActionReturnData<THandler>, SAWError>; | ||
| useServerActionQuery: <THandler_1 extends TAnyZodSafeFunctionHandler>(action: THandler_1, options: Omit<_tanstack_react_query.UseQueryOptions<inferServerActionReturnData<THandler_1>, SAWError, inferServerActionReturnData<THandler_1>, QueryKey>, "queryFn"> & { | ||
| initialData?: TInitialData | undefined; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData extends undefined ? UseInfiniteQueryResult<inferServerActionReturnData<THandler>, ZSAError> : DefinedUseInfiniteQueryResult<inferServerActionReturnData<THandler>, ZSAError>; | ||
| useServerActionQuery: <THandler_1 extends TAnyZodSafeFunctionHandler, TInitialData_1 extends inferServerActionReturnData<THandler_1> | (() => inferServerActionReturnData<THandler_1>) | undefined>(action: THandler_1, options: Omit<_tanstack_react_query.UseQueryOptions<inferServerActionReturnData<THandler_1>, ZSAError, inferServerActionReturnData<THandler_1>, TFactory extends undefined ? readonly unknown[] : Readonly<ReturnType<Exclude<TFactory, undefined>[keyof Exclude<TFactory, undefined>]>>>, "queryFn" | "initialData"> & { | ||
| input: inferServerActionInput<THandler_1>; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => DefinedUseQueryResult<inferServerActionReturnData<THandler_1>, SAWError>; | ||
| useServerActionMutation: <THandler_2 extends TAnyZodSafeFunctionHandler, TReturnError extends boolean = false>(action: THandler_2, options?: (Omit<_tanstack_react_query.UseMutationOptions<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, SAWError, inferServerActionInput<THandler_2>, unknown>, "mutationFn"> & { | ||
| initialData?: TInitialData_1 | undefined; | ||
| }, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData_1 extends undefined ? UseQueryResult<inferServerActionReturnData<THandler_1>, ZSAError> : DefinedUseQueryResult<inferServerActionReturnData<THandler_1>, ZSAError>; | ||
| useServerActionMutation: <THandler_2 extends TAnyZodSafeFunctionHandler, TReturnError extends boolean = false>(action: THandler_2, options?: (Omit<_tanstack_react_query.UseMutationOptions<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, ZSAError, inferServerActionInput<THandler_2>, unknown>, "mutationFn"> & { | ||
| returnError?: TReturnError | undefined; | ||
| }) | undefined, queryClient?: _tanstack_react_query.QueryClient | undefined) => _tanstack_react_query.UseMutationResult<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, SAWError, inferServerActionInput<THandler_2>, unknown>; | ||
| }) | undefined, queryClient?: _tanstack_react_query.QueryClient | undefined) => _tanstack_react_query.UseMutationResult<TReturnError extends false ? inferServerActionReturnData<THandler_2> : Awaited<ReturnType<THandler_2>>, ZSAError, inferServerActionInput<THandler_2>, unknown>; | ||
| }; | ||
| export { setupServerActionHooks }; | ||
| export { createServerActionsKeyFactory, setupServerActionHooks }; |
+5
-1
| "use client"; | ||
| // src/index.ts | ||
| var createServerActionsKeyFactory = (factory) => { | ||
| return factory; | ||
| }; | ||
| var setupServerActionHooks = (args) => { | ||
| const { useQuery, useMutation, useInfiniteQuery } = args; | ||
| const { useQuery, useMutation, useInfiniteQuery } = args.hooks; | ||
| const useServerActionInfiniteQuery = (action, options, queryClient) => { | ||
@@ -62,3 +65,4 @@ return useInfiniteQuery( | ||
| export { | ||
| createServerActionsKeyFactory, | ||
| setupServerActionHooks | ||
| }; |
+1
-1
| { | ||
| "name": "zsa-react-query", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "type": "module", | ||
@@ -5,0 +5,0 @@ "publishConfig": { |
Fixed alerts
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
15495
55.39%- Number of package files
6
20%- Lines of code
193
11.56%- Number of medium quality alerts
1
-50%- Number of lines in readme file
106
Infinity%No dependency changes