Client setup

Generated clients export createClient. Use it when Gqlts should execute GraphQL requests for you.


import { createClient, everything } from './generated';
 
const client = createClient({
  url: 'https://api.example.com/graphql',
  headers: {
    authorization: 'Bearer static-token',
  },
});
 
const { data } = await client.query({
  repository: [{ name: 'gqlts', owner: 'meabed' }, { ...everything }],
});

Runtime headers

Pass headers as a function when auth tokens or tenant values change during the session.


const client = createClient({
  url: 'https://api.example.com/graphql',
  headers: () => ({
    authorization: `Bearer ${localStorage.getItem('authToken')}`,
  }),
});

Header functions can be async:


const client = createClient({
  url: 'https://api.example.com/graphql',
  headers: async () => ({
    authorization: `Bearer ${await getAccessToken()}`,
  }),
});

Custom fetcher

Use fetcherMethod when your app already owns HTTP behavior, logging, retries, or auth refresh.


const client = createClient({
  fetcherMethod: async (operation) => {
    const response = await fetch('https://api.example.com/graphql', {
      method: 'POST',
      headers: {
        accept: 'application/json',
        'content-type': 'application/json',
      },
      body: JSON.stringify(operation),
    });
 
    return response.json();
  },
});

The custom fetcher receives { query, variables } and must return a GraphQL-style object with data and optional errors.

Per-request config

Query and mutation calls can receive an Axios-compatible config as the second argument when you use the built-in fetcher.


await client.query(
  {
    viewer: { id: true },
  },
  {
    headers: {
      'x-request-source': 'settings-page',
    },
  },
);