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
- Yarn
npm install @nhost/vue @nhost/apollo @apollo/client graphql @vue/apollo-composable
yarn add @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`
`)
</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>