Using the TasteJS Movies API

[00:00:00]
>> Okay, so on the home page of the app we've got a big featured movie at the top. And then we have three carousels of trending movies, movies that are now playing and movies that are upcoming. So let's grab some data for that first of all from the API.

[00:00:18]
To do that, we're gonna need to add a page.js file with a load function, and we're using page.js instead of page.server.js because the place that we're gonna be able to get this data from doesn't require any secrets. There's no API key or authentication. So we're gonna make requests directly from the browser when we navigate client side.

[00:00:43]
So, for that reason, we're not gonna have a server load function cuz we don't need to make a round trip to our own server to get the data. As well as making things faster, that's gonna mean that our application is cheaper to host. So, create our load function, and we're gonna grab the fetch helper that we learned about earlier, In fact, let's make this page.TS file instead so that we can use TypeScript make our life a little bit easier, and the place that we need to get this data from is a version of the movie database API that is hosted by the tastejs.com organization.

[00:01:36]
So the base URL for our API calls is gonna be https://api.movies.tastejs.com, and to get the, To get the trending movies data we're gonna make a fetch call, To that base followed by /trending/movie/day. That's gonna get the day's trending movies, Then we'll use response.json to get hold of that data, This needs to be an async function so that we can use await.

[00:02:37]
So let's add that there, and now that we've done this inside our page.svelte, we can create a script lang=ts. So that we use TypeScript and add export let data. And if we hover over that data and we'll see that we have a trending property. Although at the moment it has an any value, which is not much help.

[00:03:01]
If we're gonna be able to build this app under the time constraints that we're working under, then it would be really helpful if TypeScript could tell us what we're dealing with. So at this point, what I want you to do is open frontend-masters-svelteflix.vercel.app and append the word gist to the end of that, right?

[00:03:22]
That's gonna give us a TypeScript declaration file which contains type information about all of the responses from the API that we're gonna be dealing with. So just hit that raw button, grab that whole thing, copy it and then inside your app, inside the lib directory we're gonna create a file, types.d.ts.

[00:03:44]
And it's gonna paste that whole thing, We forgot the await before our fetch so add that to get rid of that red squiggly. And when we're dealing with fetch, TypeScript doesn't know what the data is, so we have to tell TypeScript what kind of thing we're dealing with.

[00:04:15]
So we're gonna add an "as" at the end of this and inside our types.d.ts we have a bunch of different things, but one of the things that we're gonna be dealing with a lot is this MovieList interface. This data that we're getting from this endpoint is a promise of a MovieList, actually no, we need to put that down, down here.

[00:04:43]
And because we're awaiting it, it's not a promise, it's just a MovieList. We need to import that from our type declarations. And now when we open our Page.svelte, hopefully it's gonna tell us that trending is a MovieList. So that makes our life a little bit easier.

[00:05:04]
Okay, so we can add, Top trending movies over here. And then the first thing we'll do is just have a look and see what information we have on that data object. Open DevTools, open the console, you can see that we have a bunch of trending results. And we're gonna wanna grab the first one of these and render the information therein. It doesn't actually have everything that we want for the big hero image at the top because we wanna grab a logo as well and the logo is not in the list results.

[00:05:46]
So we're gonna need to make another fetch call to get the full information about the movie at the top of the trending list. So back in our page.ts. We'll grab the first movie and call it "featured", and now we're gonna make another request to the API, and this time the data that we're gonna get is /movie/featured.id, and that's going to be a MovieDetails object, Okay, so if we now look in our dev tools and see what's in the featured_data, it still doesn't have quite everything that we need because we need to tell the API that we wanna get some additional information.

[00:07:19]
But before we get into that, all of this fetch code is already getting me down. There's so much duplication because like, first you have to get the response and then you have to get the JSON from the response. And it's, it's just no fun. So at this point, I'm gonna create an API helper in my lib directory.

[00:07:38]
And we're gonna use that every time we interact with the API instead. So let's open source/lib, add an api.ts file, and we're going to start moving over some of that code. We'll get that base value, drop that in here, we'll export it. And we'll export a get function, that takes the fetch object from our event. Need to give it a type.

[00:08:13]
The type of fetch is type of globalThis.fetch. And then it's gonna take an endpoint which is a string. And then we'll optionally add some parameters, which is gonna be a record of strings, and then inside here we can make the actual fetch calls. So we'll grab that. We'll replace this with the endpoint that was passed in. Need to make this an async function, and we can return the JSON that we got from that response. Okay, so now we can replace the existing calls to fetch in our load function with our new API helper.

[00:09:15]
First, we import it. { import * as api from $lib/api }, and we'll replace this whole thing with const trending equals, await api.get pass in fetch, and then we'll just grab that endpoint there, and we can delete all of that, and we can delete this too, Now a moment ago I mentioned that we don't yet have all the information.

[00:10:21]
The movie database API allows you to make multiple requests in one go by adding the append to results parameter, and that looks like this append to results. We can specify which pieces of additional data we want to get when we fetch a featured movie. And particularly right now we want to get the images property.

[00:10:51]
All right, so we're making a fetch to this endpoint and we're passing in a parameter. We need to do something with that parameter. So we'll go back into our API module. And we're gonna add a query string parameter based on what was passed in by creating a new, URLSearchParams object, URLSearchParams will take any objects that has a set of key value pairs and it will that into a queryable search params object that you can easily turn into a string.

[00:11:34]
So we just add question mark and then q, that is now gonna be a URL that reflects those parameters in a fully URL encoded fashion, So if we've set this up correctly, we're now making the full API call that is gonna add all of the images to our featured movie.

[00:11:57]
Append to response. Okay, so I got this wrong it's actually not append to result it's append to response, and now at long last we have this images object inside the featured movie where we can grab a backdrop and we can grab a logo to put in our big hero slot at the top there,