TypeScript Vue Apollo Smart Operations

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

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

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

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

Config API Reference

withSmartOperationFunctions

type: boolean

Customize the output by enabling/disabling the generated Vue Apollo Smart Operations functions. Default value: “true”

vueApolloOperationFunctionsImportFrom

type: string

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. Default value: “vue-apollo-smart-ops”

vueApolloErrorType

type: string

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. Default value: “ApolloError”

vueApolloErrorTypeImportFrom

type: string

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. Default value: “vue-apollo-smart-ops”

vueApolloErrorHandlerFunction

type: string

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. Default value: “undefined”

vueApolloErrorHandlerFunctionImportFrom

type: string

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). Default value: “undefined”

vueAppType

type: string

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. Default value: “undefined”

vueAppTypeImportFrom

type: string

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). Default value: “undefined”

addDocBlocks

type: boolean

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. Default value: “true”

gqlImport

type: string

Customize from which module will gql be imported from. This is useful if you want to use modules other than graphql-tag, e.g. graphql.macro. Default value: “graphql-tag#gql”

documentNodeImport

type: string

Customize from which module will DocumentNode be imported from. This is useful if you want to use modules other than graphql, e.g. @graphql-typed-document-node. Default value: “graphql#DocumentNode”

noExport

type: boolean

Set this configuration to true if you wish to tell codegen to generate code with no export identifier. Default value: “false”

dedupeOperationSuffix

type: boolean

Set this configuration to true if you wish to make sure to remove duplicate operation name suffix. Default value: “false”

omitOperationSuffix

type: boolean

Set this configuration to true if you wish to disable auto add suffix of operation name, like Query, Mutation, Subscription, Fragment. Default value: “false”

operationResultSuffix

type: string

Adds a suffix to generated operation result type names Default value: ""

documentVariablePrefix

type: string

Changes the GraphQL operations variables prefix. Default value: ""

documentVariableSuffix

type: string

Changes the GraphQL operations variables suffix. Default value: “Document”

fragmentVariablePrefix

type: string

Changes the GraphQL fragments variables prefix. Default value: ""

fragmentVariableSuffix

type: string

Changes the GraphQL fragments variables suffix. Default value: “FragmentDoc”

documentMode

type: object

Declares how DocumentNode are created:

• graphQLTag: graphql-tag or other modules (check gqlImport) will be used to generate document nodes. If this is used, document nodes are generated on client side i.e. the module used to generate this will be shipped to the client
• documentNode: document nodes will be generated as objects when we generate the templates.
• documentNodeImportFragments: Similar to documentNode except it imports external fragments instead of embedding them.
• external: document nodes are imported from an external file. To be used with importDocumentNodeExternallyFrom

Note that some plugins (like typescript-graphql-request) also supports string for this parameter. Default value: “graphQLTag”

optimizeDocumentNode

type: boolean

If you are using documentMode: documentNode | documentNodeImportFragments, you can set this to true to apply document optimizations for your GraphQL document. This will remove all “loc” and “description” fields from the compiled document, and will remove all empty arrays (such as directives, arguments and variableDefinitions). Default value: “true”

importOperationTypesFrom

type: string

This config is used internally by presets, but you can use it manually to tell codegen to prefix all base types that it’s using. This is useful if you wish to generate base types from typescript-operations plugin into a different file, and import it from there. Default value: ""

importDocumentNodeExternallyFrom

type: string

This config should be used if documentMode is external. This has 2 usage:

• any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use graphql-tag in a separate file and export the generated document
• ‘near-operation-file’: This is a special mode that is intended to be used with near-operation-file preset to import document nodes from those files. If these files are .graphql files, we make use of webpack loader. Default value: ""

pureMagicComment

type: boolean

This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler. Default value: “false”

experimentalFragmentVariables

type: boolean

If set to true, it will enable support for parsing variables on fragments. Default value: “false”

strictScalars

type: boolean

Makes scalars strict.

If scalars are found in the schema that are not defined in scalars an error will be thrown during codegen. Default value: “false”

defaultScalarType

type: string

Allows you to override the type that unknown scalars will have. Default value: “any”

scalars

type: object

Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.

namingConvention

type: object

Allow you to override the naming convention of the output. You can either override all namings, or specify an object with specific custom naming convention per output. The format of the converter must be a valid module#method. Allowed values for specific output are: typeNames, enumValues. You can also use “keep” to keep all GraphQL names as-is. Additionally, you can set transformUnderscore to true if you want to override the default behavior, which is to preserve underscores.

Available case functions in change-case-all are camelCase, capitalCase, constantCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase, lowerCase, localeLowerCase, lowerCaseFirst, spongeCase, titleCase, upperCase, localeUpperCase and upperCaseFirst See more Default value: “change-case-all#pascalCase”

typesPrefix

type: string

Prefixes all the generated types. Default value: ""

typesSuffix

type: string

Suffixes all the generated types. Default value: ""

skipTypename

type: boolean

Does not add __typename to the generated types, unless it was specified in the selection set. Default value: “false”

nonOptionalTypename

type: boolean

Automatically adds __typename field to the generated types, even when they are not specified in the selection set, and makes it non-optional Default value: “false”

useTypeImports

type: boolean

Will use import type {} rather than import {} when importing only types. This gives compatibility with TypeScript’s “importsNotUsedAsValues”: “error” option Default value: “false”

inlineFragmentTypes

type: string

Whether fragment types should be inlined into other operations. “inline” is the default behavior and will perform deep inlining fragment types within operation type definitions. “combine” is the previous behavior that uses fragment type references without inlining the types (and might cause issues with deeply nested fragment that uses list types). “mask” transforms the types for use with fragment masking. Useful when masked types are needed when not using the “client” preset e.g. such as combining it with Apollo Client’s data masking feature. Default value: “inline”

emitLegacyCommonJSImports

type: boolean

Emit legacy common js imports. Default it will be true this way it ensure that generated code works with non-compliant bundlers. Default value: “true”

importExtension

type: object

Append this extension to all imports. Useful for ESM environments that require file extensions in import statements.

extractAllFieldsToTypes

type: boolean

Extract all field types to their own types, instead of inlining them. This helps to reduce type duplication, and makes type errors more readable. It can also significantly reduce the size of the generated code, the generation time, and the typechecking time. Default value: “false”

printFieldsOnNewLines

type: boolean

If you prefer to have each field in generated types printed on a new line, set this to true. This can be useful for improving readability of the resulting types, without resorting to running tools like Prettier on the output. Default value: “false”

includeExternalFragments

type: boolean

Whether to include external fragments in the generated code. External fragments are not defined in the same location as the operation definition. Default value: “false”

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

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

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

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