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-query

Development

• 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.