Data-fetching libraries give you great building blocks but it's up to you to decide how operations should be organized. Callsheet provides one shared place for your operations, defaults, and related behaviors, built on the APIs you already use.
npm install @callsheet/react-query @tanstack/react-querynpm install @callsheet/swr swrCallsheet builds from typed operations. It can also generate calls from your existing GraphQL and typed REST sources.
- Add
@callsheet/codegento auto-generate calls from GraphQL Code Generator output or ts-rest contracts. - Add
@callsheet/ts-restfor manual ts-rest wrappers.
Define your calls once with shared identity and invalidation rules:
export const calls = defineCalls({
films: {
featured: query({
family: ['films', 'list'],
}),
byId: query<{ id: string }>({
family: ['films', 'detail'],
key: ({ input }) => [input.id],
}),
update: mutation<{ id: string; title: string }>({
invalidates: [
['films', 'list'],
['films', 'detail'],
],
}),
},
});Then use them through your adapter:
React Query
const film = useQuery(queryOptions(calls.films.byId, { input: { id } }));
const updateFilm = useMutation(calls.films.update);SWR
const { data: film } = useQuery(calls.films.byId, { input: { id } });
const { trigger: updateFilm } = useMutation(calls.films.update);Components still use normal React Query or SWR APIs, but they build on a shared call definition with conventions organized in one place.
Callsheet works with any typed source: GraphQL documents, REST contracts, or calls you define by hand. The result is the same shared structure.
- Adapters: React Query, SWR
- GraphQL generation: GraphQL Code Generator
- Typed REST generation: ts-rest
- Manual integration for custom typed operations
- Infinite query support
- Additional framework and adapter support
See the full roadmap: Roadmap
MIT