First of all , you must not give direct access to database in broswer side.
The right order is React app <-> backend app <-> database.
You can use browser built-in method 'fetch'
async function fetchMovies() {
try {
const response = await fetch("https://swapi.dev/api/films");
const data = await response.json();
const transformedMovies = data.results.map((movieData) => {
return {
id: movieData["episode_id"],
title: movieData.title,
openingText: movieData["opening_crawl"],
releaseDate: movieData["release_date"],
};
});
setMovies(transformedMovies);
} catch (error) {
console.log(error);
}
}
Before we get a data from API or server, users doesn't know what's going on their browser if there is any instruction.
So set state for loading and generate it as to condition
const [isLoading, setIsLoading] = useState(false);
{!isLoading && movies.length > 0 && <MoviesList movies={movies} />}
{!isLoading && movies.length === 0 && <p>No movie found</p>}
{isLoading && <p>Loading...</p>}
If you use axios package, axios will generate error automatically.
But Fetch doesn't work so.
const [error, setError] = useState(null);
try{
.
.
setError(null);
const response = await fetch("https://swapi.dev/api/films");
if (response.status !== 200) {
throw new Error("What the fuck you doing!");
}
.
.
} catch (error) {
setError(error.message);
}
Especially, When user loading the home page, home route definitely need some data from server.
Is this case, we can send request right away with useEffect as soon as user come into our web page.
useEffect(() => {
fetchMovies();
}, [fetchMovies]);
In this case, we execute fetchMovies at the first time and whenever fetchMovies function changed.
But if we use external state in fetchMovie func, we should wrap it with "useCallback()" to avoid infinite loop
Change method to 'POST'
async function addMovieHandler(movie) {
try {
const response = await fetch(
"https://react-http-975ab-default-rtdb.firebaseio.com/movies.json",
{
method: "POST",
body: JSON.stringify(movie),
headers: {
"Content-Type": "application/json",
},
}
);
const data = await response.json();
console.log(data);
} catch (err) {
console.log(err);
}
}