How to Fetch Data From a REST API in a React Native Mac App

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Building React Native Apps for Mac course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Building React Native Apps for Mac, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Building React Native Apps for Mac

  • [00:00 - 00:16] In the beginning of the course we mentioned, we're not going to go into every little detail that we need to create a full fledged React Native app. But sir, there are some important topics that we need to cover. One of them is connecting to a backend, which most applications do nowadays.

    [00:17 - 00:32] And we also need to fetch some data from the set backend via network requests. So in order to do this, I have created a small server implementation. It's just mocked. It doesn't have any persistence, so you can kill it. There's no problem with it.

    [00:33 - 00:54] So you're going to do the lesson and you can download it from there. I already have it on my downloads folder, so I'm just going to decompress that one. I'm going to move it to my developer folder. And let's just explore what this server can do. So my terminal, I'm just going to open a new terminal.

    [00:55 - 01:10] And then I'm going to go into the server folder. Inside this, I'm going to do a yard to install the dependencies. And I'm going to do a yard start to start the server. So you can see it's running on local host 3000.

    [01:11 - 01:27] I'm going to open a new tab. And I'm going to use curl to do one request. I'm going to do it on the book endpoint. So you can see it returns some data and it's pretty much the same data that we have on our application.

    [01:28 - 01:43] So this is the endpoint that you will use to query for our books for the data or for application. There is one more endpoint. So I'm just going to take again the command from the lesson.

    [01:44 - 02:02] So what this is going to do is going to do a HTTP post request. So here you can see dash X changes the method of the command dash H sets a header. So we need to tell it this is adjacent.

    [02:03 - 02:11] And that dash D sets the body of our request. So this is just a sample payload. This is just Jason.

    [02:12 - 02:31] We send a title and we send a date. And finally, we send the, we have to set the URL where we want to send this request. It's also book. The endpoint hasn't changed, but because the method has changed , this is going to trigger a different response from the server.

    [02:32 - 02:55] So if we send this, we can see it has returned some data. It has all the previous titles that were in there, but it has now inserted our newest value, which is the test. So the idea that we will follow is we're going to create a layer only for the networking code.

    [02:56 - 03:07] The idea is that none of the networking code should escape this layer. We're going to put it into a store. Just because if we do that, it's going to get a little bit confusing, right?

    [03:08 - 03:20] Sometimes you will be dealing with HTTP headers or some HTTP type of error. And you just want to keep somewhere everything encapsulated. So let's say one day you decide to switch to GraphQL, which is a different networking protocol.

    [03:21 - 03:45] So instead of going into every single piece of your code where you need to change the networking layer, you can just go into one single store and change it there. So there's another important point that I should mention. So there are now several React libraries that they try to attempt or they attempt to abstract a lot of the networking code for you.

    [03:46 - 04:07] One of them is SWR from Vercel and React Query. So basically they follow the hook pattern on React, where inside of your component you just declare the route where you want to fetch and it kind of takes care of a lot of the complexity for you.

    [04:08 - 04:31] However, again, we're going to postpone using hooks for a little bit and I just want you to get the basics, understand the basics on your own, and then you can decide maybe these libraries are the good decision for you in your project, but if not, you can do it manually. One more other thing that I should mention or networking implementation will be quite simple.

    [04:32 - 04:50] But you could enhance it with MobX, right? You could create more observables to say render some spinning wheels or block your UI while your network or your fetching data from the network. So we're not going to do that, but it's perfectly doable.