reference
supporting libraries
@nhost/react-apollo
@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].nhost.run'
})

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

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 {
        id
        name
      }
    }
  `)

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

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

  return (
    <div>
      <ul>
        {data.todos.map((todo) => {
          return <li key={todo.id}>{todo.name}</li>
        })}
      </ul>
    </div>
  )
}


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: