https://github.com/ecyrbe/zodios-solid
Solid hooks for zodios
https://github.com/ecyrbe/zodios-solid
Last synced: about 1 year ago
JSON representation
Solid hooks for zodios
- Host: GitHub
- URL: https://github.com/ecyrbe/zodios-solid
- Owner: ecyrbe
- License: mit
- Created: 2022-09-24T19:24:19.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T15:15:03.000Z (almost 2 years ago)
- Last Synced: 2024-10-24T21:53:53.886Z (over 1 year ago)
- Language: TypeScript
- Size: 1.01 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Zodios Solid
Solid hooks for zodios backed by solid-query
# Install
```bash
> npm install @zodios/solid
```
or
```bash
> yarn add @zodios/solid
```
# Usage
Zodios comes with a Query and Mutation hook helper.
It's a thin wrapper around Solid-Query but with zodios auto completion.
Zodios query hook also returns an invalidation helper to allow you to reset react query cache easily
```typescript
import { createSignal, For, Match, Show, Switch } from "solid-js";
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
import { makeApi, Zodios } from "@zodios/core";
import { ZodiosHooks } from "../src";
import { z } from "zod";
// you can define schema before declaring the API to get back the type
const userSchema = z
.object({
id: z.number(),
name: z.string(),
})
.required();
const createUserSchema = z
.object({
name: z.string(),
})
.required();
const usersSchema = z.array(userSchema);
// you can then get back the types
type User = z.infer;
type Users = z.infer;
const api = makeApi([
{
method: "get",
path: "/users",
alias: "getUsers",
description: "Get all users",
parameters: [
{
name: "page",
type: "Query",
schema: z.number().positive().optional(),
},
{
name: "limit",
type: "Query",
schema: z.number().positive().optional(),
},
],
response: usersSchema,
},
{
method: "get",
path: "/users/:id",
description: "Get a user",
response: userSchema,
},
{
method: "post",
path: "/users",
alias: "createUser",
description: "Create a user",
parameters: [
{
name: "body",
type: "Body",
schema: createUserSchema,
},
],
response: userSchema,
},
]);
const baseUrl = "https://jsonplaceholder.typicode.com";
const zodios = new Zodios(baseUrl, api);
const zodiosHooks = new ZodiosHooks("jsonplaceholder", zodios);
const Users = () => {
const [page, setPage] = createSignal(0);
const users = zodiosHooks.createInfiniteQuery(
"/users",
{ queries: { limit: 10 } },
{
getPageParamList: () => {
return ["page"];
},
getNextPageParam: () => {
return {
queries: {
get page() {
return page() + 1;
},
},
};
},
}
);
const user = zodiosHooks.createCreateUser(undefined, {
onSuccess: () => users.invalidate(),
});
return (
<>
user.mutate({ name: "john" })}>create user
users.fetchNextPage()}>next
Loading...
Fetching...
- {user.name} }
{(user) => (
{(user) =>
)}
>
);
};
// on another file
const queryClient = new QueryClient();
export const App = () => {
return (
);
};
```