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>