Resources

• Project Repo. Check out the restaurant-entities-reviews branch.

Transcript

[00:02] All right. Let me show you the solution for this exercise. I started with the ratings type, which is the one I shared in the previous video. The first thing I did was to create a new function in my API module where I just use a regular fetch function, calling this endpoint. This looks exactly like the other functions, except I’m calling the reviews endpoint. So hopefully this wasn’t a big problem.

[00:30] Then in the restaurant.ts module, I created this new function that will give me the restaurant ratings. Again, it takes an ID of a restaurant and gives me back a promise complying with the ratings object and the ratings type that I defined. This is another aggregation type of module where I’m calling two different endpoints: the restaurant endpoint and the restaurant reviews.

[00:59] I’m returning this object where I return the ratings and the number of ratings that come from the first endpoint, the restaurant endpoint, and the reviews that come from the reviews endpoint. But I’m also mapping them so that I return these in this simplified format.

[01:16] Now, you might be wondering something that I didn’t mention in the last video: what happens if I call this function multiple times? What happens if I call this ten times in ten different components? This won’t result in 20 fetch calls for this function. So calling it ten times won’t result in 20 network requests.

[01:42] But that won’t be the case, at least in Next.js, which is what we’re using right now, because those requests are being cached. So the first time that I call them, they get cached, and subsequent requests don’t cost an actual network request. This is, of course, very specific to Next.js, but many other frameworks have different types of caching and memoization mechanisms.

[02:11] So now you can use something like React Query, for example. In the case of React, there’s also an equivalent type of library for other types of frameworks where it’s some data caching library where you can make your network request and you can make sure that those requests are being cached properly so that they don’t cause subsequent requests over time.

[02:38] So that’s a bit of a tangent that I went on, but I wanted to mention that in case you were wondering what happens if I call these model functions like a bunch of times.

[02:50] Alright, so back to the exercise. The last thing that I did was to actually use this function call to call it from my ratings component. This is my ratings feature. As a rule of thumb, I like to make the network requests or the data access from the feature, rather than from the component just to keep things more decoupled from the actual data.

[03:09] So in this case, ratings is one of my features that I defined when I did my component breakdown, and I’m passing the data. I’m actually just rendering some of the data here that I get from this function in the component itself or in the feature itself. And then I’m passing the other data out to my customer review component, which is just a plain component that takes some properties and just renders them.

[03:38] So this is how it looks like in the UI. If I scroll down a little bit, you’ll see that my ratings feature are with the ratings and the number of ratings. And then each one of my components has the information about that particular review.

[03:54] So that’s it. That’s for the exercise. I hope you gave this one a try. This was the last one in the entire course. I hope that these were useful somehow. You will, of course, find the branch with the solution in the description below. Yeah. Thank you for doing this, if you did. And if not, I hope that you enjoyed watching me struggle with the solutions.