Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement
Sign In

zsa-react-query

Package Overview
Dependencies
Maintainers
2
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zsa-react-query - npm Package Compare versions

Comparing version
0.0.2
to
0.1.0
+33
dist/index.d.mts
import * as _tanstack_react_query from '@tanstack/react-query';
import { InfiniteData, GetNextPageParamFunction, UseInfiniteQueryResult, DefinedUseInfiniteQueryResult, UseQueryResult, DefinedUseQueryResult } from '@tanstack/react-query';
import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, inferServerActionError, inferServerActionInput } from 'zsa';
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, TInitialData extends inferServerActionReturnData<THandler> | (() => inferServerActionReturnData<THandler>) | undefined>(action: THandler, options: Omit<_tanstack_react_query.UseInfiniteQueryOptions<inferServerActionReturnData<THandler>, inferServerActionError<THandler>, 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: {
pageParam: TPageParam;
}) => inferServerActionInput<THandler>;
getNextPageParam: GetNextPageParamFunction<TPageParam, inferServerActionReturnData<THandler>>;
initialData?: TInitialData | undefined;
}, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData extends undefined ? UseInfiniteQueryResult<inferServerActionReturnData<THandler>, inferServerActionError<THandler>> : DefinedUseInfiniteQueryResult<inferServerActionReturnData<THandler>, inferServerActionError<THandler>>;
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>, inferServerActionError<THandler_1>, inferServerActionReturnData<THandler_1>, TFactory extends undefined ? readonly unknown[] : Readonly<ReturnType<Exclude<TFactory, undefined>[keyof Exclude<TFactory, undefined>]>>>, "queryFn" | "initialData"> & {
input: inferServerActionInput<THandler_1>;
initialData?: TInitialData_1 | undefined;
}, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData_1 extends undefined ? UseQueryResult<inferServerActionReturnData<THandler_1>, inferServerActionError<THandler_1>> : DefinedUseQueryResult<inferServerActionReturnData<THandler_1>, inferServerActionError<THandler_1>>;
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>>, inferServerActionError<THandler_2>, 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>>, inferServerActionError<THandler_2>, inferServerActionInput<THandler_2>, unknown>;
};
export { createServerActionsKeyFactory, setupServerActionHooks };
"use client";
// src/index.ts
var createServerActionsKeyFactory = (factory) => {
return factory;
};
var setupServerActionHooks = (args) => {
const { useQuery, useMutation, useInfiniteQuery } = args.hooks;
const useServerActionInfiniteQuery = (action, options, queryClient) => {
return useInfiniteQuery(
{
...options,
queryFn: async ({ pageParam }) => {
const input = options.input({ pageParam });
const [data, err] = await action(input);
if (err) {
throw err;
}
return data;
}
},
queryClient
);
};
const useServerActionQuery = (action, options, queryClient) => {
return useQuery(
{
...options,
queryFn: async () => {
const [data, err] = await action(options.input);
if (err) {
throw err;
}
return data;
}
},
queryClient
);
};
const useServerActionMutation = (action, options, queryClient) => {
return useMutation(
{
...options,
mutationFn: async (...args2) => {
const [data, err] = await action(...args2);
if (options?.returnError) {
return [data, err];
}
if (err) {
throw err;
}
return data;
}
},
queryClient
);
};
return {
useServerActionInfiniteQuery,
useServerActionQuery,
useServerActionMutation
};
};
export {
createServerActionsKeyFactory,
setupServerActionHooks
};
+7
-7
import * as _tanstack_react_query from '@tanstack/react-query';
import { InfiniteData, GetNextPageParamFunction, UseInfiniteQueryResult, DefinedUseInfiniteQueryResult, UseQueryResult, DefinedUseQueryResult } from '@tanstack/react-query';
import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, ZSAError, inferServerActionInput } from 'zsa';
import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, inferServerActionError, inferServerActionInput } from 'zsa';

@@ -17,3 +17,3 @@ type ServerActionsKeyFactory<TKey extends string[]> = {

}) => {
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"> & {
useServerActionInfiniteQuery: <TPageParam extends unknown, THandler extends TAnyZodSafeFunctionHandler, TInitialData extends inferServerActionReturnData<THandler> | (() => inferServerActionReturnData<THandler>) | undefined>(action: THandler, options: Omit<_tanstack_react_query.UseInfiniteQueryOptions<inferServerActionReturnData<THandler>, inferServerActionError<THandler>, 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: {

@@ -24,12 +24,12 @@ pageParam: TPageParam;

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"> & {
}, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData extends undefined ? UseInfiniteQueryResult<inferServerActionReturnData<THandler>, inferServerActionError<THandler>> : DefinedUseInfiniteQueryResult<inferServerActionReturnData<THandler>, inferServerActionError<THandler>>;
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>, inferServerActionError<THandler_1>, inferServerActionReturnData<THandler_1>, TFactory extends undefined ? readonly unknown[] : Readonly<ReturnType<Exclude<TFactory, undefined>[keyof Exclude<TFactory, undefined>]>>>, "queryFn" | "initialData"> & {
input: inferServerActionInput<THandler_1>;
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"> & {
}, queryClient?: _tanstack_react_query.QueryClient | undefined) => TInitialData_1 extends undefined ? UseQueryResult<inferServerActionReturnData<THandler_1>, inferServerActionError<THandler_1>> : DefinedUseQueryResult<inferServerActionReturnData<THandler_1>, inferServerActionError<THandler_1>>;
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>>, inferServerActionError<THandler_2>, 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>>, ZSAError, 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>>, inferServerActionError<THandler_2>, inferServerActionInput<THandler_2>, unknown>;
};
export { createServerActionsKeyFactory, setupServerActionHooks };

@@ -0,4 +1,28 @@

"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
createServerActionsKeyFactory: () => createServerActionsKeyFactory,
setupServerActionHooks: () => setupServerActionHooks
});
module.exports = __toCommonJS(src_exports);
var createServerActionsKeyFactory = (factory) => {

@@ -64,5 +88,6 @@ return factory;

};
export {
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
createServerActionsKeyFactory,
setupServerActionHooks
};
});
{
"name": "zsa-react-query",
"version": "0.0.2",
"type": "module",
"version": "0.1.0",
"publishConfig": {

@@ -12,3 +11,3 @@ "access": "public"

"exports": {
".": "./dist/index.cjs"
".": "./dist/index.mjs"
},

@@ -18,3 +17,3 @@ "typesVersions": {

".": [
"./dist/index.d.cts"
"./dist/index.d.mts"
]

@@ -26,3 +25,3 @@ }

"main": "./dist/index.js",
"module": "./dist/index.cjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",

@@ -29,0 +28,0 @@ "scripts": {

+18
-91

@@ -1,105 +0,32 @@

# zsa-react-query - React Query Integration for zsa
# 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.
`zsa` is a library for building typesafe server actions in Next.js. It provides a simple, scalable developer experience with features like validated inputs/outputs, procedures (middleware) for passing context to server actions, and React Query integration for querying server actions in client components.
## Installation
Install `zsa-react-query` and its peer dependencies using your preferred package manager:
Install `zsa` using your preferred package manager:
```bash
npm i zsa-react-query @tanstack/react-query
npm i zsa zsa-react zsa-react-query zsa-openapi zod
```
## Setup
## Features
Wrap your application with a React Query provider:
- Validated inputs and outputs using Zod schemas
- Procedures for adding context and authorization to server actions
- Callbacks for running additional logic based on server action lifecycle
- Built-in loading states and error handling
- React Query integration for querying server actions on the client side
- Support for FormData as input type
- Retry functionality and timeouts for server actions
- TypeScript support for a fully typesafe experience
```typescript
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
## Documentation
function ReactQueryProvider({ children }: React.PropsWithChildren) {
const [client] = useState(new QueryClient())
View the full documentation and examples on [zsh.vercel.app](https://zsa.vercel.app/introduction).
return <QueryClientProvider client={client}>{children}</QueryClientProvider>
}
## Support
export default ReactQueryProvider
```
If you need help with anything, feel free to DM ([@ido_pesok](https://twitter.com/ido_pesok)) on X.
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).
## [Contributors](https://github.com/vercel/ai/graphs/contributors)
"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__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.hooks;
const useServerActionInfiniteQuery = (action, options, queryClient) => {
return useInfiniteQuery(
{
...options,
queryFn: async ({ pageParam }) => {
const input = options.input({ pageParam });
const [data, err] = await action(input);
if (err) {
throw err;
}
return data;
}
},
queryClient
);
};
const useServerActionQuery = (action, options, queryClient) => {
return useQuery(
{
...options,
queryFn: async () => {
const [data, err] = await action(options.input);
if (err) {
throw err;
}
return data;
}
},
queryClient
);
};
const useServerActionMutation = (action, options, queryClient) => {
return useMutation(
{
...options,
mutationFn: async (...args2) => {
const [data, err] = await action(...args2);
if (options?.returnError) {
return [data, err];
}
if (err) {
throw err;
}
return data;
}
},
queryClient
);
};
return {
useServerActionInfiniteQuery,
useServerActionQuery,
useServerActionMutation
};
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
createServerActionsKeyFactory,
setupServerActionHooks
});
import * as _tanstack_react_query from '@tanstack/react-query';
import { InfiniteData, GetNextPageParamFunction, UseInfiniteQueryResult, DefinedUseInfiniteQueryResult, UseQueryResult, DefinedUseQueryResult } from '@tanstack/react-query';
import { TAnyZodSafeFunctionHandler, inferServerActionReturnData, ZSAError, inferServerActionInput } from 'zsa';
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, 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: {
pageParam: TPageParam;
}) => inferServerActionInput<THandler>;
getNextPageParam: GetNextPageParamFunction<TPageParam, inferServerActionReturnData<THandler>>;
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>;
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>>, ZSAError, inferServerActionInput<THandler_2>, unknown>;
};
export { createServerActionsKeyFactory, setupServerActionHooks };