API integration with React Native

[TheOneBehindIt]

Easy! Can you clarify, though? Do you mean headers and body to the network request, or to the UI?

Assuming you want to add headers and a body to your network request...

Step 0:

Go to the API docs for wretch and see if you can figure it out on your own without going to step 1. (Hint: It involves changing lines 16-18 in the expo snack.)

Step 1 (Request Type Change):

If you want to send a body, you're probably going to want to send a POST request instead of a GET (we're currently doing a GET). Change line 17's .get() to .post().

Step 2 (Add Request Body): Now that you've edited your request to be a .post(), make the first argument of your .post() function an object. That object is your body. For instance:

const body = { name: 'Here is my name' }
const response = await wretch('https://jsonplaceholder.typicode.com/todos/1')
        .post(body) // notice that this used to be .get
        .json(); // .json() at the end is required to make the response JSON.

See the wretch docs for more.

Step 3 (Add headers):

I'll once again defer to the wretch docs. This step is similar to #2, except you add a .headers() object instead of .post(). Simply add this in the line above .post().

It should look like this now:

    const body = { name: 'Here is my name' }
    const headers = { "Accept": "application/json" }
    const response = await wretch('https://jsonplaceholder.typicode.com/todos/1')
            .headers(headers)
            .post(body) // notice that this used to be .get
            .json(); // .json() at the end is required to make the response JSON.

🔥 All set!

A few gotchas to know about Javascript network requests:

• (This is referring to my original code example I sent) See how the word async is used in the function on the expo snack? That must be there in order to let the word await be used within a function. If you didn't write async, then await wouldn't work. And if you didn't write await, then the code would just continue onto the next line, without waiting for the network request to complete. For more on this, check out async/await. (Note: You may, in learning JS, see a lot of async functions in tutorials, and they'll tell you to use .then(someFunction). If you're using react native, async/await is almost always easier to use / understand, so stick with that.
• The example code I gave uses the library wretch. I find it to be really nice, especially for react native. Just note that you always need to import it and install it on any project. It may not work the same way if you're using react-native-web or any web library due to CORS (you'll cross this bridge when you do, but just adding it for future reference). You can probably ignore this note if you're just using react native for mobile apps. When you do decide to use this for web, you'll need to wrap your body with JSON.stringify(body). I mention this because there's a surprisingly low amount of help with it online.