React
The Nhost React client exports a React provider, hooks, and helpers that make it easier to work with Nhost in your React app. If you're using React with Next.js, you should use the Nhost Next.js client.
Installation
Install the Nhost React client together with GraphQL:
- npm
- Yarn
npm install @nhost/react graphql
yarn add @nhost/react graphql
Initializing
Initialize a single nhost
instance using your Nhost subdomain
and region
:
src/lib/nhost.js
import { NhostClient } from '@nhost/react'
export const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'
})
Using custom URLs
There are cases where you might want to use a custom URL for one or more of the services (e.g: when you are self-hosting or you are running services on custom ports). You can do this by passing in the custom URLs when initializing the Nhost client:
src/lib/nhost.ts
import { NhostClient } from '@nhost/react'
export const nhost = new NhostClient({
authUrl: 'https://auth.mydomain.com/v1',
storageUrl: 'https://storage.mydomain.com/v1',
graphqlUrl: 'https://graphql.mydomain.com/v1',
functionsUrl: 'https://functions.mydomain.com/v1'
})
Import nhost
and wrap your app with the NhostProvider
.
src/App.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { NhostClient, NhostProvider } from '@nhost/react'
import { nhost } from './lib/nhost'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<NhostProvider nhost={nhost}>
<App />
</NhostProvider>
</React.StrictMode>,
document.getElementById('root')
)
export { nhost }
info
The nhost
instance created with the NhostClient
above is the same as the JavaScript Nhost client.