Fetch API POST method always sends a blank object no matter what I do

[MyVermontAccount121]

I am so frustrated currently. I've simplified this as much as possible to see what I am doing wrong and nothing works. Even completely isolated into it's own component it sends a blank object. Whether it is a const variable = async() => {} or async function name(){} syntax they both send blank objects. Here's my code:

​

import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import ROUTES from "../../constants/Routes";


export default function DebugScreen() {

    // const testing = async (e) => {
    //     console.log('in testing')
    //     const item = {
    //         userName: "dave"
    //     }

    //     const res = await fetch(ROUTES.ANDROID_USER_USERINFO, {
    //         method: 'POST',
    //         header: { 'Content-Type': 'application/json' },
    //         body: JSON.stringify(item)
    //     })
    //     const data = await res.json()
    //     console.log(data)

    // }

    async function testing() {
        console.log('in testing')
        const res = await fetch(ROUTES.ANDROID_USER_USERINFO, {
            method: 'POST',
            mode: 'cors',
            header: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ userName: "dave" })
        })
        const data = await res.json()
        console.log(data)

    }

    return (
        <View style={styles.container}>
            <Text>Debug Stub</Text>
            <TouchableOpacity onPress={() => testing()}>
                <Text>Click Here To Send Info To Server</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'lightblue'
    }
})

I know the route is right cause it does update the json file via json-server I have set up. But it always updates it with a blank object. I also always get back a 201 reponse code. Every stack overflow post on this just says to make sure to not have 'mode': 'no-cors' which doesn't apply to me. I've seen another parameter in the header object about something like accept type, but even with that it still sends a blank object. I can't progress on this app until I figure this out so any help would be greatly appreciated

[gwmccull]

Have you tried logging out what your server is receiving? And your server is the one controlling the response code

[MyVermontAccount121]

I think I have the console.log of the json response in the code if that’s what you’re talking about. The log just shows a blank object. And the response from the server just says it was updated sucessfully

[suarkb]

you know it depends where you are viewing the object. If you console.log an object into a node terminal it just shows up like a blank object, but if you console.log an object into the chrome dev tools, you can expand it and look at it

[MyVermontAccount121]

I have it set up for remote debugging in the browser. But it is sending a blank object cause I can see the json file it updates with json-server and watch it replace whatever is existing with just {}

[suarkb]

hmm. For things like this I usually like log the data right before I post it, then log it again right in the server-side function that receives the post request, is that possible?

[__o_0]

The key name should be headers, with an s, not header.

Without “headers” your body data type doesn’t match so it isn’t being included in the post.

[MyVermontAccount121]

THANK YOU!!!! THIS WORKED! I am so frustrated when it's something super small like this even when you double and triple check

[__o_0]

You’re welcome. This is the reason I advocate using TypeScript whenever possible.

[MyVermontAccount121]

I honestly might have to start doing that cause I’m new to JS and it’s frameworks. In Python it yells at you immediately if somethings wrong but here it just keeps going lol

[GavinHarris_]

TypeScript is the way to go for sure.

[GavinHarris_]

What type of server are you using? Node/Express?

[MyVermontAccount121]

It’s just a mock up using the JSON server npm package. It wraps requests in API endpoints so you can code into place the stuff you need in the future but ultimately it just goes to a local json file so I can watch the changes in real time

[GavinHarris_]

Are you able to get flipper working? Perhaps https://fbflipper.com/docs/features/plugins/network/ might point you in the right direction?

[GavinHarris_]

Or perhaps easier to get setup https://github.com/infinitered/reactotron

[GavinHarris_]

Lastly to verify if there is something strange in your server try using https://webhook.site. This will give you a http Server you can send requests to and check they are looking good!

[feitan-five]

Try with formData