Gqlts generated TypeScript client preview

GraphQL SDK generation for TypeScript apps

Generate a typed GraphQL client from your schema.

Write GraphQL selections as TypeScript objects. Gqlts turns them into normal GraphQL operations and gives you response types that match the fields you selected.

Start now

Learn request objects

Schema to response typesThe generated request object controls the returned TypeScript shape.

Runtime agnostic outputGenerated clients work in Node.js, Bun, browsers, and framework code.

Practical GraphQL coverageQueries, mutations, subscriptions, fragments, uploads, batching, aliases, and scalar mapping.

Why use Gqlts

Use TypeScript as the operation builder

Write the fields you need as an object and let Gqlts print the GraphQL document.

Keep response types honest

Select two fields and the result type exposes those fields, including nested arrays and unions.

Choose the transport per app

Use the built-in Axios fetcher, provide a custom fetcher, or generate operations for Apollo, SWR, React Query, or fetch.

Cover common app features

GraphQL multipart uploads, graphql-ws subscriptions, batched queries, scalar overrides, and generated type guards.

Read the docs in this order

Quick StartInstall with npm, pnpm, Yarn, or Bun, then generate from a schema file or endpoint.Core ConceptsLearn request objects, arguments, aliases, scalar expansion, unions, subscriptions, and type helpers.Examples and RecipesSee product screens, admin tables, React Query, uploads, realtime updates, and server scripts.Feature CoverageCheck what the SDK generator supports and where hand-written GraphQL is still the better tool.

Typed GraphQL as code


import { createClient, everything } from './generated';
 
const client = createClient({
  url: 'https://countries.trevorblades.com',
});
 
const { data } = await client.query({
  countries: [
    { filter: { continent: { eq: 'EU' } } },
    {
      code: true,
      name: true,
      languages: {
        ...everything,
      },
    },
  ],
  __alias: {
    featuredCountry: {
      country: [{ code: 'CA' }, { name: true, emoji: true }],
    },
  },
});
 
data?.countries[0].languages[0].name;
data?.featuredCountry?.emoji;

The generated operation stays ordinary GraphQL:


query ($v1: CountryFilterInput, $v2: ID!) {
  countries(filter: $v1) {
    code
    name
    languages {
      code
      name
      native
      rtl
    }
  }
  featuredCountry: country(code: $v2) {
    name
    emoji
  }
}

Feedback while you type

Generated field completion in an editor — Generated request types expose schema-aware completions.

TypeScript autocomplete for a GraphQL selection object — Invalid fields fail where developers work: in the editor and in typecheck.