Codegen
PluginsTypeScriptvue-urql

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 Vue Urql

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

Installation

npm i -D @graphql-codegen/typescript-vue-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) composition functions with TypeScript typings.

Config API Reference

withComposition

type: boolean default: true

Customized the output by enabling/disabling the generated Vue Composition functions.

urqlImportFrom

type: string default: urql

You can specify module that exports components Query, Mutation, Subscription 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:

const { data } = useTestQuery(...)
vue-apollo-smart-opstypescript-mock-data