GraphQL to Apollo React Hooks Generator

What is GraphQL to Apollo React Hooks Generator?

Apollo Client is the most widely used GraphQL client for React applications, and its hook-based API (useQuery, useMutation, useLazyQuery) is the recommended way to fetch and manage GraphQL data in components. However, writing these hooks by hand is repetitive: each query needs a gql document, a variables interface, and a hook call with proper generic types. This tool automates that entire process by reading your GraphQL Schema Definition Language (SDL) and producing ready-to-import React hooks. It parses every field on the Query type into a useQuery and useLazyQuery hook, and every field on the Mutation type into a useMutation hook. Input types are converted to TypeScript interfaces with the Input suffix, and all GraphQL scalar types (String, Int, Float, Boolean, ID) are mapped to their TypeScript equivalents. The generated code uses the standard @apollo/client imports, so it integrates directly into any existing Apollo project without additional configuration.

How to Use

1. Paste your complete GraphQL schema SDL — including Query, Mutation, and any input/object type definitions — into the left panel
2. Press the Generate button to parse the schema and produce TypeScript hooks with gql documents and variable interfaces
3. Inspect the output: each Query field yields a useQuery hook, a useLazyQuery variant, and a gql query document; each Mutation field yields a useMutation hook and a gql mutation document
4. Copy the generated code into a dedicated file (e.g., generated/hooks.ts) in your React project
5. Import the hooks in your components and customize the selection sets inside each gql template literal to match the fields your UI actually needs
6. Run your app and verify that Apollo DevTools shows the expected operations

Tips & Best Practices

• The generated selection sets are minimal (e.g., { id } for lists). Always expand them to include every field your component renders before shipping
• If your schema uses custom scalars (DateTime, JSON, etc.), add corresponding TypeScript type overrides after pasting the output
• For pagination, combine the generated useQuery hook with Apollo's fetchMore method and a cursor-based pagination helper
• Place the generated file in a separate directory (e.g., graphql/generated/) so it is easy to overwrite when you regenerate

Frequently Asked Questions

Real-world Examples

type Query {
  products(category: String!): [Product!]!
  cart: Cart!
}

type Mutation {
  addToCart(productId: ID!, quantity: Int!): Cart!
}

type Product { id: ID! name: String! price: Float! }
type Cart { id: ID! items: [CartItem!]! total: Float! }
type CartItem { product: Product! quantity: Int! }

import { gql, useQuery, useMutation, useLazyQuery } from '@apollo/client';

export const productsDocument = gql`
  query Products($category: String!) {
    products(category: $category) { id }
  }
`;

export function useProducts(variables: ProductsQueryVariables) {
  return useQuery<Array<Product>, ProductsQueryVariables>(
    productsDocument, { variables }
  );
}

export function useProductsLazy() {
  return useLazyQuery<Array<Product>, ProductsQueryVariables>(
    productsDocument
  );
}

export interface ProductsQueryVariables {
  category: string;
}

export const addToCartDocument = gql`
  mutation AddToCart($productId: ID!, $quantity: Int!) {
    addToCart(productId: $productId, quantity: $quantity) { id }
  }
`;

export function useAddToCart() {
  return useMutation<Cart, AddToCartMutationVariables>(
    addToCartDocument
  );
}

export interface AddToCartMutationVariables {
  productId: string;
  quantity: number;
}

type Query {
  posts: [Post!]!
  author(id: ID!): Author
}

type Post { id: ID! title: String! author: Author! }
type Author { id: ID! name: String! bio: String }

// usePosts — eager fetch on mount
export function usePosts() {
  return useQuery<Array<Post>, undefined>(postsDocument);
}

// useAuthorLazy — fetch only when triggered
export function useAuthorLazy() {
  return useLazyQuery<Author, AuthorQueryVariables>(
    authorDocument
  );
}

// Usage in component:
// const [fetchAuthor, { data }] = useAuthorLazy();
// <div onClick={() => fetchAuthor({ variables: { id: '1' } })}>

Related Tools