Setup Nhost with React
Get up and running with Nhost and React
Create Project
If you haven’t, please create a project through the Nhost Dashboard.
Setup Database
Navigate to the SQL Editor of the database and run the following SQL to create a new table movies
with some great movies.
CREATE TABLE movies (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
director VARCHAR(255),
release_year INTEGER,
genre VARCHAR(100),
rating FLOAT
);
INSERT INTO movies (title, director, release_year, genre, rating) VALUES
('Inception', 'Christopher Nolan', 2010, 'Sci-Fi', 8.8),
('The Godfather', 'Francis Ford Coppola', 1972, 'Crime', 9.2),
('Forrest Gump', 'Robert Zemeckis', 1994, 'Drama', 8.8),
('The Matrix', 'Lana Wachowski, Lilly Wachowski', 1999, 'Action', 8.7);
Track this
is enabledpermissions
Select the new table movies
just created, and click in Edit Permissions to set the following permissions for the public
role and select
action.
Setup a React Application
Create a React application using Vite.
npm create vite@latest nhost-react-quickstart -- --template react
Install the Nhost package for React
Navidate to the React application and install @nhost/react
.
cd nhost-react-quickstart && npm install @nhost/react
Configure the Nhost client and fetch the list of movies
Create a new file with the following code to creates the Nhost client.
import { NhostClient } from "@nhost/react";
export const nhost = new NhostClient({
subdomain: "<subdomain>",
region: "<region>",
})
<subdomain>
and <region>
with the subdomain and region for the projectFinally, update ./src/App.jsx
to fetch the list of movies.
import { useEffect, useState } from "react";
import { NhostProvider } from "@nhost/react";
import { nhost } from './lib/nhost'
const getMovies = `
query {
movies {
title
genre
rating
}
}
`;
function App() {
return (
<NhostProvider nhost={nhost}>
<Home />
</NhostProvider>
);
}
function Home() {
const [loading, setLoading] = useState(true);
const [movies, setMovies] = useState([]);
useEffect(() => {
async function fetchMovies() {
setLoading(true);
const { data, error } = await nhost.graphql.request(getMovies);
setMovies(data.movies);
setLoading(false);
}
fetchMovies();
}, []);
return (
<div>
{loading ? (
<p>Loading...</p>
) : (
<table>
<tbody>
{movies.map((movie, index) => (
<tr key={index}>
<td>{movie.title}</td>
<td>{movie.genre}</td>
<td>{movie.rating}</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
}
export default App;
The end
Run your project with npm run dev -- --open --port 3000
and enter http://localhost:3000
in your browser.