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)
}