@nhost/react-apollo

Make it easy to use Apollo and React with your Nhost project.

@nhost/react-apollo exposes one component: NhostApolloProvider. Wrap your whole App around this component to make GraphQL requests anywhere from your app.

It's recommended to use @nhost/react-apollo with @nhost/react-auth and nhost-js-sdk for users to login and interact with the GraphQL API.

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

npm install @nhost/react-apollo @nhost/react-auth nhost-js-sdk @apollo/client graphql

@apollo/client is required for @nhost/react-apollo to work and will be used to import useQuery, useMutation, and useSubscription.

import { createClient } from "nhost-js-sdk";

const config = {
  baseURL: "https://backend-REPLACE.nhost.app",
};

const { auth, storage } = createClient(config);

export { auth, storage };

Read more about nhost-js-sdk here.

See full Nhost Create React App with Apollo.

import React from "react";
import ReactDOM from "react-dom";
import { NhostAuthProvider } from '@nhost/react-auth";
import { NhostApolloProvider } from "@nhost/react-apollo";
import { auth } from "utils/nhost";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <NhostAuthProvider auth={auth}>
      <NhostApolloProvider
        auth={auth}
        gqlEndpoint={`https://hasura-REPLACE.nhost.app/v1/graphql`}
      >
        <App />
      </NhostApolloProvider>
    </NhostAuthProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

See full Nhost Next.js with Apollo.

import { NhostAuthProvider } from "@nhost/react-auth";
import { NhostApolloProvider } from "@nhost/react-apollo";

import { auth } from "utils/nhost";

function MyApp({ Component, pageProps }) {
  return (
    <NhostAuthProvider auth={auth}>
      <NhostApolloProvider
        auth={auth}
        gqlEndpoint={`https://hasura-REPLACE.nhost.app/v1/graphql`}
      >
        <Component {...pageProps} />
      </NhostApolloProvider>
    </NhostAuthProvider>
  );
}

export default MyApp;

Learn more about auth and storage in the nhost-js-sdk library.

Since the NhostApolloProvider is now installed it's possible to use the Apollo client with its useQuery, useSubscription, and useMutation functions anywhere in your app.

import { useQuery, gql } from "@apollo/client";

const GET_TODOS = gql`
  query {
    todos {
      id
      created_at
      name
      completed
    }
  }
`;

export function App() {
  const { loading, data } = useQuery(GET_TODOS);

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

  return (
    <div>
      <h1>in app</h1>
      {!data ? (
        "no data"
      ) : (
        <ul>
          {data.todos.map((todo) => {
            return <li key={todo.id}>{todo.name}</li>;
          })}
        </ul>
      )}
    </div>
  );
}

Options and parameters for NhostApolloProvider.