TypeScript Vue Apollo Composition API

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

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

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

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

Config API Reference

withCompositionFunctions

type: boolean

Customized the output by enabling/disabling the generated Vue composition functions. Default value: “true”

vueApolloComposableImportFrom

type: string

Default value: ""

vueCompositionApiImportFrom

type: string

Default value: ""

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”

clientId

type: string

Allows you to set the clientId in the composition functions when using multiple apollo clients. Default value: “null”

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: “unknown”

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

enumPrefix

type: boolean

Allow you to disable prefixing for generated enums, works in combination with typesPrefix. Default value: “true”

enumSuffix

type: boolean

Allow you to disable suffixing for generated enums, works in combination with typesSuffix. Default value: “true”

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.

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 Message {
  feed {
    id
  }
}

<template>
  <div>
    <div v-if="loading">Loading…</div>
    <div v-else>{{ result.feed.id }}</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'
import { useMessageQuery } from '../generated/graphqlOperations'

export default defineComponent({
  setup() {
    const { result, loading } = useMessageQuery()
    return { result, loading }
  }
})
</script>

query allAccounts {
  accounts {
    accountID
    givenName
    age
  }
}

<template>
  <div>
    <div v-if="loading">Loading…</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else-if="allAccounts">
      <div v-for="account in allAccounts" :key="account.accountID">
        {{ account.accountID }} {{ account.givenName }} {{ account.age }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useResult } from '@vue/apollo-composable'
import { defineComponent } from '@vue/composition-api'
import { useAllAccountsQuery } from '../generated/graphqlOperations'

export default defineComponent({
  setup() {
    const { result, loading, error } = useAllAccountsQuery()
    // Only select the property 'accounts' for use in the template
    const allAccounts = useResult(result, null, data => data.accounts)
    return { allAccounts, loading, error }
  }
})
</script>

query {
  viewer {
    preference {
      language
      darkMode
    }
  }
}

<script lang="ts">
import { isAuthenticated } from 'src/store/authentication'
import { defineComponent, watchEffect } from '@vue/composition-api'
import { useViewerQuery } from '../generated/graphqlOperations'

export default defineComponent({
  setup(_, { root }) {
    // our imported ref:
    // const isAuthenticated = ref(false)
    const { result, loading, error } = useViewerQuery(() => ({
      enabled: isAuthenticated.value
    }))

    return {
      loading,
      error,
      result
    }
  }
})
</script>