The Guild LogoThe Guild Monogram
Docs

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us

Guide: Vue.js#

GraphQL Code Generator provides typed code generation for URQL Vue.js and Apollo Vue.js.

The plugins and available options vary depending on the target client; for this reason, you will find guides for each of them below:


  • URQL Vue.js
  • Apollo Vue.js

 

All the following guides query the schema below:

# schema.graphql type Author { id: Int! firstName: String! lastName: String! posts(findTitle: String): [Post] } type Post { id: Int! title: String! author: Author } type Query { post(id: ID!): Post }

 


 

Vue.js URQL#

Most Vue.js URQL usage with TypeScript will look as follows:

<template> <ul v-if="data"> <!-- UI... --> </ul> </template> <script lang="ts"> import { useQuery } from '@urql/vue' interface PostQueryVariables { id: string } export default { setup() { const result = useQuery({ query: ` query ($id: ID!) { post(id: $id) { id title author { id firstName lastName } } } `, // we need to type variables manually variables: { id: 1 } as PostQueryVariables }) return { from, data: result.data } } } </script>

Not typing or manually maintaining the data-types can lead to many issues:

  • outdated typing (regarding the current Schema)

  • typos

  • partial typing of data (not all Schema's fields has a corresponding type)

For this reason, GraphQL Code Generator is providing a @graphql-codegen/typescript-vue-urql plugin that generates fully-typed composition functions with:

  • typed URQL options
  • typed variables
  • typed result

1. Install the @graphql-codegen/typescript-vue-urql plugin

yarn add @graphql-codegen/typescript-vue-urql yarn add @graphql-codegen/typescript yarn add @graphql-codegen/typescript-operations

2. Configure the plugin

Create or update your codegen.yaml file as follows:

schema: http://my-graphql-api.com/graphql documents: './src/**/*.tsx' generates: ./graphql/generated.ts: plugins: - typescript - typescript-operations - typescript-vue-urql

schema and documents values

schema needs to be your target GraphQL API URL ("/graphql" included).

documents is a glob expression to your .graphql, .ts or .tsx files.


3. Run the codegen and update your code

Assuming that, as recommended, your package.json has the following script:

{ "scripts": { "generate": "graphql-codegen" } }

Running the following generates the graphql/generated.tsx file.

yarn generate

We can now update our code as follows:

<template> <ul v-if="data"> <!-- UI... --> </ul> </template> <script lang="ts"> import { usePostQuery } from '../generated/graphql' export default { setup() { // `variables` option and `result` are typed! const result = usePostQuery({ variables: { id: 1 } }) return { from, data: result.data } } } </script>

 

For more advanced configuration, please refer to the plugin documentation.

For a different organization of the generated files, please refer to the "Generated files colocation" page.

 


 

Vue.js Apollo#

Most Vue.js Apollo usage with TypeScript will look as follows:

<template> <div class="apollo"> <!-- UI... --> </div> </template> <script lang="ts"> interface PostQueryVariables { id: string } export default { apollo: { post: { query: gql` query ($id: ID!) { post(id: $id) { id title author { id firstName lastName } } } `, variables: { id: 1 } as PostQueryVariables } }, data() { return { post: undefined } } } </script>

Not typing or manually maintaining the data-types can lead to many issues:

  • outdated typing (regarding the current Schema)

  • typos

  • partial typing of data (not all Schema's fields has a corresponding type)

For this reason, GraphQL Code Generator is providing a @graphql-codegen/typescript-vue-apollo-smart-ops plugin that generates fully-typed composition functions with:

  • typed URQL options
  • typed variables
  • typed result

1. Install the @graphql-codegen/typescript-vue-apollo-smart-ops plugin

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

2. Configure the plugin

Create or update your codegen.yaml file as follows:

schema: http://my-graphql-api.com/graphql documents: './src/**/*.tsx' generates: ./graphql/generated.ts: plugins: - typescript - typescript-operations - typescript-vue-apollo-smart-ops

schema and documents values

schema needs to be your target GraphQL API URL ("/graphql" included).

documents is a glob expression to your .graphql, .ts or .tsx files.


3. Run the codegen and update your code

Assuming that, as recommended, your package.json has the following script:

{ "scripts": { "generate": "graphql-codegen" } }

Running the following generates the graphql/generated.tsx file.

yarn generate

We can now update our code as follows:

<template> <div class="apollo"> <!-- UI... --> </div> </template> <script lang="ts"> import { usePostQuery } from '../generated/graphql' export default { apollo: usePostQuery({ // `variables` is properly typed! variables: { id: 1 } }), data() { return { post: undefined } } } </script>

 

For more advanced configuration, please refer to the plugin documentation.

For a different organization of the generated files, please refer to the "Generated files colocation" page.