@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.

#Install

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.

Initialize the Nhost client

src/utils/nhost.js
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.

#Create React App

See full Nhost Create React App with Apollo.

src/index.js
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")
);

#Next.js

See full Nhost Next.js with Apollo.

pages/_app.js
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.

#Usage

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

Options and parameters for NhostApolloProvider.

ParameterDescriptionRequired
authThe auth object from the Nhost ClientYes
gqlEndpointGraphQL API EndpointYes
headersCustom headers.No
publicRolePublic role that Apollo will automatically use if the user is not logged in. Will default to public.No
cacheCustomized cache. More info.No
connectToDevToolsEnable Apollo Dev tools. More infoNo
onErrorCustom function for error handling with Apollo link. More infoNo