Skip to content
Numio

GraphQL to React Components Transformer — Numio

Generates typed data-fetching code for each operation in the Document panel: React Apollo hooks (default), Apollo Angular services, Stencil Apollo components or urql hooks, together with the TypeScript schema and operation types.

Getting ready-made useXQuery and useXLazyQuery hooks for an Apollo Client React app from a query you just wrote.

GraphQL Schema

Document

When to use it

  • Getting ready-made useXQuery and useXLazyQuery hooks for an Apollo Client React app from a query you just wrote.
  • Comparing what the same operation looks like as an Apollo Angular injectable service or an urql hook before choosing a client.

How to use

  1. Paste the schema into the GraphQL Schema editor and your named queries, mutations or subscriptions into the Document editor.
  2. Choose the target in the output dropdown: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo or TypeScript urql.
  3. Copy the generated document constant (for example GetUserDocument) and the hooks, services or components into your project.

GraphQL schema + document

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

TypeScript components and hooks

import { gql } from "@apollo/client"
import * as Apollo from "@apollo/client"
…
export const GetUserDocument = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`
…
export function useGetUserQuery(
  baseOptions: Apollo.QueryHookOptions<GetUserQuery, GetUserQueryVariables>,
) {
  const options = { ...defaultOptions, ...baseOptions }
  return Apollo.useQuery<GetUserQuery, GetUserQueryVariables>(
    GetUserDocument,
    options,
  )
}
…

Details and limitations

Each option runs @graphql-codegen/typescript and typescript-operations first, so the output also contains the full schema and operation types (elided above).

React Apollo imports gql and the hooks from @apollo/client; urql and Stencil import gql from graphql-tag; Apollo Angular generates @Injectable classes such as GetUserGQL.

Without a valid operation in the Document editor, no hooks or components are generated; a document that does not match the schema is skipped with a warning comment. Generation runs in a browser Web Worker.

FAQ

Why is baseOptions required in useGetUserQuery?

The query has a non-null variable ($id: ID!), so the generated hook requires options containing variables. Queries without required variables get an optional baseOptions parameter.

Does the React Apollo output include lazy query hooks?

Yes. For each query it generates useXQuery and useXLazyQuery plus result type aliases such as GetUserQueryHookResult and GetUserQueryResult. Mutations get a useXMutation hook.

Can I change plugin options like withHooks or the import source?

No. The page runs each plugin with its default configuration and offers only the output target dropdown.

Specifications and references