Skip to content

nickL/callsheet

Repository files navigation

One shared definition for your API calls

Callsheet

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.


Docs

Install

React Query

npm install @callsheet/react-query @tanstack/react-query

SWR

npm install @callsheet/swr swr

Callsheet builds from typed operations. It can also generate calls from your existing GraphQL and typed REST sources.

Example

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.

Current Support

Roadmap

  • Infinite query support
  • Additional framework and adapter support

See the full roadmap: Roadmap

License

MIT