TypeScript Vue Apollo Smart Operations

Package name	Weekly Downloads	Version	License	Updated
`@graphql-codegen/typescript-vue-apollo-smart-ops`				Apr 19th, 2026

Installation

npm i -D @graphql-codegen/typescript-vue-apollo-smart-ops

pnpm add -D @graphql-codegen/typescript-vue-apollo-smart-ops

yarn add --dev @graphql-codegen/typescript-vue-apollo-smart-ops

bun add --dev @graphql-codegen/typescript-vue-apollo-smart-ops

⚠️

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 Vue Apollo Smart Query, Smart Subscription and mutation operation functions with TypeScript typings.

This plugin relies on some helper functions and types from the vue-apollo-smart-ops package. That package also adds some optional functionality for improved error handling in Vue Apollo operations which can be configured in the generated code from this plugin.

It extends the basic TypeScript plugins: @graphql-codegen/typescript, @graphql-codegen/typescript-operations - and thus shares a similar configuration.

Config API Reference

`withSmartOperationFunctions`

type: boolean default: true

Customize the output by enabling/disabling the generated Vue Apollo Smart Operations functions.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         withSmartOperationFunctions: true
       },
     },
   },
 };
 export default config;

`vueApolloOperationFunctionsImportFrom`

type: string default: vue-apollo-smart-ops

The typescript-vue-apollo-smart-ops plugin requires three functions that are used to define your query, subscription and mutation operation functions:

createMutationFunction
createSmartQueryOptionsFunction
createSmartSubscriptionOptionsFunction

By default, these functions are provided by the vue-apollo-smart-ops package, but you can substitute your own import path if you want to replace them with other implementations.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueApolloOperationFunctionsImportFrom: 'vue-apollo-smart-ops'
       },
     },
   },
 };
 export default config;

`vueApolloErrorType`

type: string default: ApolloError

The operation functions generated by typescript-vue-apollo-smart-ops include some functionality for error handling. This configuration parameter allows you to customise the name of the error type that will be used. The default is to use ApolloError from the apollo-client package.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueApolloErrorType: 'ApolloError',
         vueApolloErrorTypeImportFrom: 'apollo-client'
       },
     },
   },
 };
 export default config;

`vueApolloErrorTypeImportFrom`

type: string default: vue-apollo-smart-ops

The operation functions generated by typescript-vue-apollo-smart-ops include some functionality for error handling. This configuration parameter allows you to customise the package where the error type will be imported from. The default is to use ApolloError from the apollo-client package.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueApolloErrorType: 'ApolloError',
         vueApolloErrorTypeImportFrom: 'apollo-client'
       },
     },
   },
 };
 export default config;

`vueApolloErrorHandlerFunction`

type: string default: undefined

The operation functions generated by typescript-vue-apollo-smart-ops include some functionality for error handling. You may supply an error handler function that will be called when an error occurs in a query, subscription or mutation operation. This function should implement the ApolloOperationErrorHandlerFunction interface from vue-apollo-smart-ops package. You can have a custom handler in your app that shows a notification to the user, for example. If unspecified, this functionality will be disabled and errors handled (or not) by Vue Apollo in the normal way.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueApolloErrorHandlerFunction: 'handleApolloError',
         vueApolloErrorHandlerFunctionImportFrom: './src/handleApolloError.ts',
       },
     },
   },
 };
 export default config;

`vueApolloErrorHandlerFunctionImportFrom`

type: string default: undefined

The import path where vueApolloErrorHandlerFunction should be imported from. Can be a package name or a local file path (anything that works in an import statement).

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueApolloErrorHandlerFunction: 'handleApolloError',
         vueApolloErrorHandlerFunctionImportFrom: './src/handleApolloError.ts',
       },
     },
   },
 };
 export default config;

`vueAppType`

type: string default: undefined

The operation functions generated by typescript-vue-apollo-smart-ops include some functionality for error handling. When an error occurs, the Vue app instance is passed to the error handler. You can customise the expected type of the app object. For example, a Nuxt.js app might use NuxtApp from @nuxt/types/app instead. When unspecified, the default type is Vue from vue/types/vue.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueAppType: 'Vue',
         vueAppTypeImportFrom: 'vue/types/vue'
       },
     },
   },
 };
 export default config;

`vueAppTypeImportFrom`

type: string default: undefined

The import path where vueAppType should be imported from. Can be a package name or a local file path (anything that works in an import statement).

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         vueAppType: 'Vue',
         vueAppTypeImportFrom: 'vue/types/vue'
       },
     },
   },
 };
 export default config;

`addDocBlocks`

type: boolean default: true

Allows you to enable/disable the generation of docblocks in generated code. Some IDE’s (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-vue-apollo-smart-ops'],
       config: {
         addDocBlocks: true
       },
     },
   },
 };
 export default config;

Examples

Queries

Using the generated query code.

Basic query

For the given input:

query Messages($type: FeedType!) {
  feed(type: $type) {
    id
  }
}

We can use the generated code like this:

<template>
  <div>
    <div v-if="loading > 0">Loading…</div>
    <ul v-else>
      <li v-for="message in messages">{{ message.id }}</li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { useMessagesQuery } from '../generated/graphqlOperations'
 
export default {
  apollo: {
    messages: useMessagesQuery({
      // variables will be correctly typed here!
      variables: {
        type: 'HOT'
      },
      loadingKey: 'loading',
      update: data => data.feed
    })
  },
  data() {
    return {
      messages: null,
      loading: 0
    }
  }
}
</script>

Basic mutation

For the given operation:

mutation CreateMessage($text: String!) {
  createMessage(text: $text) {
    id
  }
}

We can use the generated code like this:

<template>
  <div>
    <textarea v-model="text"></textarea>
    <button @click="send">Send Message</button>
  </div>
</template>
 
<script lang="ts">
import { createMessageMutation } from '../generated/graphqlOperations'
 
export default {
  data() {
    return {
      text: ''
    }
  },
  async send() {
    const result = await createMessageMutation(this, {
      variables: {
        text: this.text
      }
    })
 
    if (!result.success || !result.data) {
      alert('Failed to create message')
      return
    }
 
    const messageId = result.data.createMessage.id
  }
}
</script>

vue-apollo vue-urql