Codegen
PluginsTypeScripturql

We now recommend using the client-preset package for a better developer experience and smaller impact on bundle size.

Get started on our “React/Vue” guide.

TypeScript Urql

Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-urqlDownloadsVersionLicenseApr 19th, 2026

Installation

npm i -D @graphql-codegen/typescript-urql
⚠️

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won’t see any change in the generated output.

This plugin generates urql (https://github.com/FormidableLabs/urql) components and HOC with TypeScript typings.

Config API Reference

withComponent

type: boolean default: false

Customized the output by enabling/disabling the generated Component.

withHooks

type: boolean default: true

Customized the output by enabling/disabling the generated React Hooks.

urqlImportFrom

type: string default: urql

You can specify module that exports components Query, Mutation, Subscription and HOCs This is useful for further abstraction of some common tasks (e.g. error handling). Filepath relative to generated file can be also specified.

Usage Example

For the given input:

query Test {
  feed {
    id
    commentCount
    repository {
      full_name
      html_url
      owner {
        avatar_url
      }
    }
  }
}

We can use the generated code like this:

<TestComponent variables={...}>
  …
</TestComponent>

Or if you prefer:

const [result] = useTestQuery(...)
type-graphqlvalidation-schema