Apollo and custom clients

Use operation helpers when another GraphQL client should execute the request. Gqlts generates { query, variables }; the other client owns caching, links, retries, or transport.

Generate an operation


import { generateQueryOp } from './generated';
 
const operation = generateQueryOp({
  countries: {
    name: true,
    code: true,
  },
});
 
operation.query;
operation.variables;

Apollo Client


import { gql, useQuery } from '@apollo/client';
import { generateQueryOp, type QueryResult } from './generated';
 
const countriesRequest = {
  countries: {
    name: true,
    code: true,
  },
};
 
type CountriesResult = QueryResult<typeof countriesRequest>;
 
export function CountriesPanel() {
  const operation = generateQueryOp(countriesRequest);
 
  const { data, error, loading } = useQuery<CountriesResult>(gql(operation.query), {
    variables: operation.variables,
  });
 
  if (loading) return <p>Loading</p>;
  if (error) return <p>Failed to load countries</p>;
 
  return <pre>{JSON.stringify(data?.countries, null, 2)}</pre>;
}

Fetch


const operation = generateQueryOp({
  viewer: {
    id: true,
    name: true,
  },
});
 
const response = await fetch('/graphql', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
  },
  body: JSON.stringify(operation),
});
 
const result = await response.json();

Any GraphQL client

If the client accepts a GraphQL document string and variables object, it can use Gqlts operation helpers. Keep the request object in TypeScript, then pass the generated operation into the client boundary.