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@v1.1.3 @nhost/react-auth@v1.0.5 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
.
Parameter | Description | Required |
---|---|---|
auth | The auth object from the Nhost Client | Yes |
gqlEndpoint | GraphQL API Endpoint | Yes |
headers | Custom headers. | No |
publicRole | Public role that Apollo will automatically use if the user is not logged in. Will default to public . | No |
cache | Customized cache. More info. | No |
connectToDevTools | Enable Apollo Dev tools. More info | No |
onError | Custom function for error handling with Apollo link. More info | No |