typescript-vue-apollo.mdx

title	description
typescript-vue-apollo	GraphQL Code Generator plugin for Vue Apollo. It generates Vue Apollo hooks and TypeScript types. It also generates a Vue plugin that can be used to register the generated hooks as global components.

import { Callout } from '@theguild/components' import { PluginApiDocs, PluginHeader } from '@/components/plugin' import { pluginGetStaticProps } from '@/lib/plugin-get-static-props' export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })

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.

Examples

The examples below use Vue 2 with the (composition api plugin).

Queries

Using the generated query code.

Basic query

For the given input:

query Message {
  feed {
    id
  }
}

We can use the generated code like this:

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

Select a single property with useResult and add an error message

For the given input:

query allAccounts {
  accounts {
    accountID
    givenName
    age
  }
}

We can use the generated code with a watcher like this:

<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 setup lang="ts">
import { useAllAccountsQuery } from '../generated/graphqlOperations'
import { ref, watch } from 'vue'
 
const { result, loading, error } = useAllAccountsQuery()
const allAccounts = ref();
// Only select the property 'accounts' for use in the template
watch(result, data => allAccounts.value = data.accounts)
</script>

Use an options object

Every useXxxxQuery can receive an options object to define query specific settings. To demonstrate the use of an options object we will try to only execute a query once a condition is met.

The ref isAuthenticated represents a boolean value that is set to true once the user successfully logged in to the app. To retrieve the user's application settings we can only execute the graphql query once the user is logged on (and the ref isAuthenticated is set to true). Setting this ref is done in another part of the app and is used as a simple example.

For the given input:

query {
  viewer {
    preference {
      language
      darkMode
    }
  }
}

Within the options object is a property enabled that defines if a query is enabled or disabled. To only execute the query when isAuthenticated is true we set the property enabled equal to the ref isAuthenticated:

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

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>