Callsheet

Use this guide to learn how to manually add GraphQL documents and typed REST sources to Callsheet.

GraphQL

If you have typed GraphQL documents, just wrap them with defineCalls:

src/calls.ts

import { defineCalls, query } from '@callsheet/react-query';
import { FilmByIdDocument } from './graphql/film-by-id';

export const calls = defineCalls({
  films: {
    byId: query(FilmByIdDocument),
  },
});

src/calls.ts

import { defineCalls, query } from '@callsheet/swr';
import { FilmByIdDocument } from './graphql/film-by-id';

export const calls = defineCalls({
  films: {
    byId: query(FilmByIdDocument),
  },
});

That's really all you need. Your GraphQL documents are now part of your shared Callsheet module.

Typed REST

The same idea works for typed REST sources too:

src/calls.ts

import { defineCalls } from '@callsheet/react-query';
import { query as tsRestQuery } from '@callsheet/ts-rest';
import { contract } from './rest/contract';

export const calls = defineCalls({
  rest: {
    films: {
      byId: tsRestQuery(contract.films.byId),
    },
  },
});

src/calls.ts

import { defineCalls } from '@callsheet/swr';
import { query as tsRestQuery } from '@callsheet/ts-rest';
import { contract } from './rest/contract';

export const calls = defineCalls({
  rest: {
    films: {
      byId: tsRestQuery(contract.films.byId),
    },
  },
});

Still the same shared call surface, the only difference is the typed source you are starting from.

Use your calls

Once defined, use those calls through your adapter:

src/FilmPage.tsx

import { queryOptions, useQuery } from '@callsheet/react-query';

const film = useQuery(
  queryOptions(calls.films.byId, {
    input: { id: 'wall-e' },
    select: (data) => data.film,
  }),
);

// Same idea for typed REST sources
const filmFromRest = useQuery(
  queryOptions(calls.rest.films.byId, {
    input: {
      params: {
        id: 'soul',
      },
    },
    select: (data) => data.film,
  }),
);

src/FilmPage.tsx

import { useQuery } from '@callsheet/swr';

const { data: film } = useQuery(calls.films.byId, {
  input: { id: 'wall-e' },
});

// Same idea for typed REST sources
const { data: filmFromRest } = useQuery(calls.rest.films.byId, {
  input: {
    params: {
      id: 'soul',
    },
  },
});

That's the benefit of Callsheet: instead of consuming sources from across your app, you gather them into one shared call surface.

To learn more about the shared call surface, read Calls. For shared defaults and invalidation, see Using Callsheet with React Query or Using Callsheet with SWR.

When Manual Setup is a good fit

Start with manual setup when you want to try Callsheet without adding generation, or when you want to roll it out gradually. Generated calls have the same shape, so you can move to code generation later without changing how your components use calls.

If you want to understand the call model itself, go to Calls.

If you are working from ts-rest, go to the ts-rest guide.

Manual Setup

GraphQL

Typed REST

Use your calls

When Manual Setup is a good fit

Related Docs

On this page