QueryPile
This is a light wrapper over Tanstack Query that will help with organize your API repos.
Suppose you have this API repo:
const api = {
getTodo: () => "todo",
createTodo: (todo) => create(todo),
};You want to use it with Tanstack Query in a type-safe way, making sure you have all the api routes covered.
Here's how it will work with QueryPile:
import { useQuery, useMutation } from "@tanstack/react-query";
import { createApi, createQueryPile } from "query-pile";
const api = createApi({
getTodo: () => "todo",
createTodo: (todo) => create(todo),
});
const useApi = createQueryPile(api, {
useGetTodo: (todo) =>
useQuery({
queryKey: ["todos", todo],
// This query function is type-safe, it will throw an error if you use any other api endpoint
queryFn: () => api.getTodo(todo),
}),
useCreateTodo: () =>
useMutation({
mutationKey: ["todo", "create"],
// you are provided with the variables by default
mutationFn: async ([todo]) => await api.createTodo(todo),
}),
});There are utilities to make optimistic updates with infinite queries easier as well.
Install
Install package using your favorite package manager:
# pnpm
pnpm install query-pile @tanstack/react-queryDevelopment
- Clone this repository
- Install latest LTS version of Node.js
- Enable Corepack using
corepack enable - Install dependencies using
pnpm install - Run interactive tests using
pnpm dev
License
Made with 💛
Published under MIT License.