Translating Node JS request to an API to React Fetch syntax

Question

I am writing an app in React-Native that makes a request to the Hubspot API. This has given me issues, as I initially attempted to make the request using the Node JS request module, which does not work with React Native when using Expo. I am now attempting to make the request to the Hubspot API with React Native's own Fetch API, but am having trouble translating my initial code written using the Node JS request module. I get an error when making a request to the Hubspot API. I've attached the two versions of the code to this question. Could anyone explain what is wrong with my translation of the Node JS code? Any advice would be much appreciated. Node JS version (request succeeds)

Fetch version (request fails)

Welcome to StackOverflow. Post code as text please. – Dani Jul 07 '20 at 08:14 — Dani, Jul 07 '20 at 08:14

score 0 · Answer 1 · answered Jul 07 '20 at 07:47

Welcome to Stack Overflow :)

I think your fetch request is not written correctly. Instead of creating a new Request const you could pass all your params to the fetch function directly:

fetch('https://hubapi.com/whatever/CONFIDENTIAL', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
   properties
  })
})
.catch((error) => {
  console.error(error);
});

Notice I also added a catch block at the end of the request. If it still fails you should at least get a better understanding of what exactly is failing.

The code I quoted above is taken from the React Native docs, link here. The docs contain a lot of great examples, including using a async/await and other networking libraries.

This was really helpful thanks! As I said on a comment above I think the main reason my initial request was failing was because I didn't convert the body to a JSON format. Thanks for the link to the examples too, I'll be looking those over as I work more with requests in the future. — Charles Kraemer, Jul 07 '20 at 18:20

score 0 · Answer 2 · answered Jul 07 '20 at 07:47

I tested it for you in my react native project. The request succeeds, of course I get This hapikey (CONFIDENTIAL) doesn't exist as response, because I don't have a key, but the query runs successfully:

try {
    const response = await fetch(
        'https://api.hubapi.com/contacts/v1/contact/?hapikey=CONFIDENTIAL',
        {
            method: 'POST',
            headers: new Headers({ 'Content-Type': 'application/json' }),
            body: JSON.stringify({
                "properties": [
                    { property: 'email', value: 'test@email.com' },
                    { property: 'firstname', value: 'Sean' },
                    { property: 'lastname', value: 'Smith' },
                ]
            })
        }
    );
    const responseJson = await response.json();
    console.log("response from hubapi:", responseJson)
} catch (e) {
    console.error("Error on fetch request:", e);
}

This was really helpful thank you! I think the main reason my request was failing before was because I didn't convert the body to a JSON format. — Charles Kraemer, Jul 07 '20 at 18:18
I'm glad it helped! Could you please mark my answer as accepted answer so that other people having the same problem can go right to the solution? Thanks — Vincent, Jul 07 '20 at 18:52

Translating Node JS request to an API to React Fetch syntax

2 Answers2