inkhe.art

Documentation

This library implements a highly opinionated way of fetching and managing API data.

Queryframe is a typesafe API SDK generator for REST endpoints and exposes hooks from the amazing @tanstack/react-query.

Tech

Queryframe uses a number of open source projects under the hood:

[ReactQuery] - v5!
[Zod] - for schemas
[Zocker] - 2kb library to generate mock data
[Redaxios] - minimal fetch wrapper with axios interface

Installation

Install the dependencies and follow the guide below.

pnpm add @inkheart/queryframe

Example Usage

import { createQueryframeBuilder, z } from "@inkheart/queryframe";
 
const builder = createQueryframeBuilder({
  baseURL: "https://api.sampleapis.com",
});
 
const getAvatars = builder.createQuery({
  endpoint: "/avatar/info",
  output: z
    .object({
      synopsis: z.string(),
    })
    .array(),
});
 
const { queryframe } = builder.createQueryframe({
  getAvatars,
});
 
export default queryframe;
export const queryClient = builder.queryClient;
export { QueryClientProvider } from "@inkheart/queryframe";

useQuery interface

import queryframe from "...";
 
const { data } = await queryframe.getExpenseCategories.useQuery(
  {},
  {
    refetchInterval: (data) => 1000,
  }
);

Handle interface

import queryframe from "...";
 
try {
  const result = await queryframe.getExpenseCategories.handle({});
} catch (error) {
  console.error(error);
}