Maximilian: Now, when it comes to sending requests
from inside React apps,
we must not forget that in the end,
we're still writing regular JavaScript code, right?
A React application in the end
is just a JavaScript application.
That is what it's all about.
And since that is the case,
we can, of course, use any send HTTP requests
in JavaScript solution, which we want.
For example, there is a package called axios,
which you could use.
You can visit it on GitHub,
which makes sending HTTP requests
and dealing with responses very, very simple,
no matter which JavaScript library you might be using.
You can even use it without any library.
But nowadays, we also have a built-in mechanism
for sending HTTP requests from inside JavaScript.
Adm that's the Fetch API.
The Fetch API is built into browsers
and it allows us to fetch data
and actually also to send data
even though the name doesn't imply it.
And we can use that to send HTTP requests
and work with responses.
And therefore, it's the Fetch API,
which I wanna use here to get my movies.
Now, we can start simple
and make sure that whenever this button here is clicked,
we do fetch movies
and then we display the movies.
And for that, I will simply remove my dummyMovies here
and instead add a new function here,
which I'll name fetchMovies or fetchMovieHandler.
fetchMoviesHandler is probably a better name, like this.
And in here, we can now use fetch this function
because that's a function the browser makes available to us.
That's this Fetch API being used.
And in its simplest form,
we just need to pass in as a string the URL
to which you wanna sent the request.
So in my case, swapi.dev/api/films.
To be precise, https and then that URL.
We could provide a second argument here,
which allows us to pass in a JavaScript object
where we configure various options,
for example, where we add extra headers
or an extra body or change the HTTP request method,
but here we don't need that
because the default method will be GET,
so by default, a GET request will be sent
and that's all we need here for the moment.
So that will now send such a HTTP request
whenever this function is called.
But, of course, we also wanna handle the response.
And fetch returns a promise,
which allows us to then react to the response
or any potential errors we might be getting.
Now, we're getting a promise here,
which is an object which will eventually yield some data
instead of immediately doing that
because, of course, sending an HTTP request
is an asynchronous task.
It doesn't finish immediately.
It can take a couple of seconds or milliseconds.
It can even fail, of course.
And therefore, we can't just continue
in the next line of code
and use the result immediately.
Instead, the result will be there
at some point in the future
and that's exactly what promises exist for in JavaScript.
So we can add then here
to the final function which will be called
whenever we got a response.
And we could add catch
to handle any potential errors.
But for the moment, let's ignore that
and let's focus on the then case.
Here we get a response
and then here I'll write an arrow function.
We get a response and then in this function body,
we can use the response.
And this response argument here
is now actually an object
with a bunch of data about the response.
For example, we can read the response headers,
we can get the status code.
There also is a utility ok field,
which will be true if everything worked
and false if we got some error.
But here we're now interested in the response body.
And this API sends back data in JSON format.
JSON is simply a data format,
a very popular one for exchanging data
and it looks like this.
It looks like a JavaScript object
but keys are wrapped between double quotes, for example,
and there are a couple of other rules you have to keep
in mind as well.
Also there are no methods, it's just data.
And the advantage of JSON data
is that it's very easy
to translate it to JavaScript objects
but there is a translation step,
which needs to be transformed.
Thankfully, the response object which we get
has a built-in method,
which will automatically translate this JSON response body
to a real JavaScript object,
which we can use in our code.
All we've gotta do for that is call json,
which is a built-in method on that response object.
And this will now do this transformation.
Now, this itself them again returns a promise
and therefore, what we should do here
is return that promise
and then add another then block here,
which will then be fired
once this data transformation is done.
And here we, therefore, then get our transformed data,
which in the case of this URL
will have this structure here.
So it's an object with a count field,
a next field, previous and a results field,
which then in turn holds an array.
And it's this array I'm interested in here.
So we can access data.results
to get access to this array like this
and then store these results in some state,
which we then update in this place here
and which we then use here for MoviesList.
So let's add useState
and initialize extra piece of state here
in this App component.
Let's say initially it's an empty array
and we name it movies and setMovies.
That's our state updating function.
And here, once we've got our movies,
once we've got the parsed and extracted movies,
I will call setMovies
and set my data results,
so this array here,
as my new state, as my new movies state.
And now we've just gotta forward movies here
as a value for the movies prop.
Now, one thing to note here
is that in my application here,
I'm actually extracting title, releaseDate
and openingText from the data I receive.
Now, there will be a title key
but openingText is actually called opening_crawl here
and releaseDate is called release_date here.
So we either adjust the prop names here,
which I expect
or we make sure that we transform the incoming data
from this format here
to the format we expect in our app.
And I'll do the latter.
So in App.js where we are making that HTTP request,
before setting the data, the results as a new state,
I'll actually transform them.
So here I'll have my transformedMovies let's say
and that in the end will be data.results,
which is this array we're getting back, .map
to convert every object in the results array
into a new object.
And it's then the new objects,
the array full of new objects,
which will be stored in transformedMovies.
Now, the logic for mapping here simply
is that I get my movieData
or whatever you wanna call it,
which will have this format here,
so like this object here.
And I'm only interested in the id, the title,
the opening_crawl and the release_date.
So I will return a new object here
and this will be my movie object
in the front end application,
which has an id,
which I get by accessing movieData.episode_id
because there is this episode_id field
in the data we get back.
And I now translate this into just an id field
in the data I'm working with here in my front end.
Now, for the title,
we access movieData.title like this
and for my openingText, which I expect to get,
I simply access movieData.opening_crawl.
So the text stored in this opening_crawl field
will be stored in an openingText field here
in the object I'm creating here.
And then we also need the releaseDate, of course,
and that will be movieData.release_date.
Now this is transformed
and now it's the transformedMovies
which I'll store here with setMovies.
Now, to make sure that everything works,
we now have to connect fetchMoviesHandler,
this function to this button.
And therefore, of course, here we add onClick
and point at fetchMoviesHandler.
If we now save that all,
we can go back to the React application
and initially, we've got no movies
because I removed the dummy data
but if I click Fetch Movies,
you see it takes a short while
but then this movie data shows up
and this is now fetched from this Star Wars API
and therefore from a backend app,
which in turn is talking to a database.
And that in a nutshell is how you do connect to a database
from inside React apps
and since this is the wrong term,
it would be better to say
that this is how you send HTTP requests
from inside React apps to a backend.