# Sending a POST request

## Firebase

It is a service offered by Google, which acts as an API for our database, which isn't actually a database.

Create a project on Firebase. Select real-time database, and create a new real-time database, with test settings. This will give us an API URL to which we can send and receive data from.

To use it in thee `fetch` method in our React app, we will use the URL with a `/movies.json`, which will create a new node called `movies` , and the `.json` in the end is a standard for Google Firebase real-time db, through which we fetch and post data.

```jsx
const response = await fetch(
  'https://movie-db-default-rtdb.firebaseio.com/movies.json'
);
```

### Sending data to `POST` to server

We need to set the `method` to `POST`, and use `JSON.stringify()` to convert the JavaScript object into a JSON object so that it can be sent as the POST `body`. We also set the headers here.

Of course, we need to add the `async` and `await` keywords since "POSTing" data to the server is also an asynchronous task.

```jsx
const addMovieHandler = async(movie) => {
  const response = await fetch(
    'https://movie-db-6b0ae-default-rtdb.firebaseio.com/movies.json', {
       method: 'POST',
       body: JSON.stringify(movie),
       headers: {
         'Content-Type': 'application/json'
       }
    }
  );
}
```

Here, `movie` is an object which contains `id`, `title`, `releaseDate` and `openingText` about a movie.

Here is a screenshot of the data when we send the POST request to the API, and store the data in Firebase:

![](/files/-MZw6MGPbJRD3cwksKsg)

To access the data from the Firebase database, we would need to access the data on the unique keys that are added to the data by Firebase.

```jsx
const fetchMovieHandler = async() => {
  const response = await fetch('https://movie-db.firebase.io/movies.json');
  const data = await response.json();

  const loadedMovies = [];
  for (const key in data) {
    loadedMovies.push({
      id: data[key].id,
      title: data[key].title,
      releaseDate: data[key].releaseDate,
      openingText: data[key].openingText
    })
  }

  //iterate over loadedMovies with .map() and set state of movies to each movie
  //in the loadedMovies array.
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sydrawat.gitbook.io/react/advanced-concepts/reaching-out-to-the-web/sending-a-post-request.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.