Skip to main content

Apollo GraphQL

A ready-to-use Apollo client is available in the @nhost/apollo package. It is compatible with the Nhost Vue client and Vue Apollo v4.

Installation

npm install @nhost/vue @nhost/apollo @apollo/client graphql @vue/apollo-composable

Initializing

Create the Nhost Apollo client in your main file, then provide it to your app using the DefaultApolloClient:

src/main.js
import { createApp } from 'vue'
import { createApolloClient } from '@nhost/apollo'
import { NhostClient } from '@nhost/vue'
import { DefaultApolloClient } from '@vue/apollo-composable'

import App from './App.vue'

const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})

const apolloClient = createApolloClient({ nhost })

createApp(App).provide(DefaultApolloClient, apolloClient).use(nhost).mount('#app')

Usage

You can now use all Apollo Vue composables (queries, mutations, subscriptions) and the correct authentication headers will automatically be set based on the authentication status of the user.

Example

<script setup>
import { useQuery } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { loading, result, error } = useQuery(gql`
query Books {
books {
id
title
}
}
`)
</script>
<template>
<div v-if="loading">Loading query...</div>
<div v-else>
<ul>
<li v-for="book in result.books">{{ book.name }}</li>
</ul>
</div>
</template>