Installation

Typograph has a single required dependency (graphql) and a couple of optional integrations you can install if you want them.

Core install

npm install @overstacked/typograph graphql

That's everything you need to define a schema, build queries, and use the core client with any GraphQL transport.

React integrations

Typograph ships first-party React hooks for three popular GraphQL clients. Pick whichever you're already using — all three give you typed useQuery / useMutation (and useSubscription, where the underlying client supports it) with zero codegen.

urql

npm install urql react react-dom

import { createUrqlIntegration } from "@overstacked/typograph/integrations/urql";

See the urql integration page for the full setup.

Apollo Client

npm install @apollo/client react react-dom

import { createApolloIntegration } from "@overstacked/typograph/integrations/apollo";

See the Apollo integration page for the full setup.

React Query (TanStack Query)

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

import { createReactQueryIntegration } from "@overstacked/typograph/integrations/react-query";

See the React Query integration page for the full setup. React Query has no subscription primitive; if you need typed subscriptions, pair it with the urql or Apollo integration.

Server-side (graphql-yoga)

Typograph emits standard SDL, so it pairs with any GraphQL server. The demo app uses graphql-yoga:

npm install graphql-yoga

See the graphql-yoga integration page for the recommended wiring.

TypeScript configuration

Typograph leans on a few modern TypeScript features for its inference to work well. The minimum config you need is:

{
  "compilerOptions": {
    "strict": true,
    "moduleResolution": "Bundler",
    "target": "ESNext",
    "module": "ESNext",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

The important bit is "strict": true. Without it, the selection-set inference falls back to looser types and you lose most of the type-safety benefit.

Where to next