Search code examples
laravelreact-nativefetchlaravel-6laravel-api

React Native fetch getting an Empty array when making POST request to Laravel Api


I am working on a project for my self learning that has laravel in the backend and running react native in the front end. I have implemented the login and register screen for my apps. Now I am trying to connect it to my laravel server through its api routes. I was first having CORS issue so I solved it by making a new middleware and editing the kernel.php file as stated in this thread.

CORS Issue with React app and Laravel API

Now I tried to run some tests first with get request my submit function in react is

handleSubmit = async() => {
const email  = this.state.email
const pass = this.state.password

const proxyurl = "https://cors-anywhere.herokuapp.com/";
/*TEST FOR GET REQUEST */
let response = await fetch(`http://mobileprediction/api/user?email=${email}&pass=${pass}`, {
  headers: {
     "Content-Type" : "application/json",
     "Accept" : "application/json"
   },

})


let result = await response.json()
console.log(result)
}

and my api.php file in the routes of laravel was

Route::get("/user", function (Request $request) {
  return $request;
});

and it gave the desired output, but then when I tested the same way with a post request I am getting an empty array no matter what and I am unable to figure out what the problem is

the handlesubmit function in my react native app is

handleSubmit = async() => {
const email  = this.state.email
const pass = this.state.password


/*TEST FOR POST REQUEST */
 let response = await fetch(`http://mobileprediction/api/user`, {
   method: "POST",
   header : {
     "Content-Type" : "application/json",
     "Accept" : "application/json"
   },
   body : JSON.stringify({
     emailid : email,
     password : pass
   }),
 })

let result = await response.json()
console.log(result)
}

and api.php file in laravel is

Route::get("/user", function (Request $request) {
  return $request;
});

Route::post("/user", function(Request $request) {
  return $request;
});

Solution

  • So what I understood is that from the fetch request in react native its not sending just the inputs but rather a page with a body that has json formatted key values. So I cant access data in my server as

    $request->param 
    

    or with

    request("param")
    

    you could get the json formatted string with

    $request->json()->all()
    

    but still I couldnt get to the individual values

    for me what was working is to get all the contents and then access the values with

    $postInput = file_get_contents('php://input');
       $data = json_decode($postInput, true);
       return ["email" => $data["emailid"] ];