Skip to main content

Apollo GraphQL

Installation

npm install @nhost/react @nhost/react-apollo @apollo/client graphql

Initializing

Wrap the React app with the NhostApolloProvider and make sure the NhostApolloProvider is nested inside the NhostReactProvider.

This way, the correct authentication headers are set automatically for GraphQL requests being made by Apollo.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { NhostApolloProvider } from '@nhost/react-apollo'
import { NhostClient, NhostReactProvider } from '@nhost/react'

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

ReactDOM.render(
<React.StrictMode>
<NhostReactProvider nhost={nhost}>
<NhostApolloProvider nhost={nhost}>
<App />
</NhostApolloProvider>
</NhostReactProvider>
</React.StrictMode>,
document.getElementById('root')
)

Usage

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

Example

import { gql, useQuery } from '@apollo/client'
import { useAuthenticated } from '@nhost/react'

const GET_BOOKS = gql`
query Books {
books {
id
title
}
}
`

export const BooksQuery = () => {
const isAuthenticated = useAuthenticated()
const { loading, data, error } = useQuery(GET_BOOKS)

if (loading) {
return <div>Loading...</div>
}

if (!isAuthenticated) {
return <div>You must be authenticated to see this page</div>
}

if (error) {
return <div>Error in the query {error.message}</div>
}

return (
<div>
<ul>
{data?.books.map((book) => (
<li key={book.id}>{book.name}</li>
))}
</ul>
</div>
)
}

Hooks

useAuthQuery

The useAuthQuery hook works just like Apollo's useQuery except the query will be skipped if the user is not authenticated.

Read more

Learn more about the GraphQL Apollo Client.