supporting libraries
@nhost/react-apollo makes it easy to use Apollo in your React app with Nhost.
Install @nhost/react-apollo and its dependencies.
npm install @nhost/nhost-js @nhost/react-apollo @apollo/client graphql

@nhost/react-apollo exposes one component: <NhostApolloProvider>. Wrap this component around your whole App.
import React from 'react'
import ReactDOM from 'react-dom'
import { NhostClient } from '@nhost/nhost-js'
import { NhostApolloProvider } from '@nhost/react-apollo'

import App from './App'

const nhost = new NhostClient({
  backendUrl: 'https://[app-subdomain]'

    <NhostApolloProvider nhost={nhost}>
      <App />

Now you can use Apollo Client anywhere in your app:
import { useQuery, gql } from '@apollo/client'

export function App() {
  const { loading, data } = useQuery(gql`
    query {
      todos {

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

  if (!data) {
    return <div>No data</div>

  return (
        { => {
          return <li key={}>{}</li>

If you use @nhost/react-apollo and NhostApolloProvider without authentication (auth property) all GraphQL requests will be made with the public role.

More information about the dependent packages: