Issues sending Fetch delete request in React to Rails API

Question

I'm able to send get and put methods fine, but am surprisingly not able to send a delete fetch request from my Redux action to my Rails backend. This is even more perplexing because in Postman I'm able to hit the Destroy route fine. I've searched all over for a fix, but haven't found anything that works. I have an onClick function that triggers the Redux action that sends this request:

 export const deleteQuestion = (questionId, routerHistory) => {
   return dispatch => {
     return fetch(`${API_URL}/questions/${questionId}`, {
       method: 'DELETE',      
     }).then(response => {
         dispatch(removeQuestion(questionId));
         routerHistory.replace(`/`);
     })
     .catch(error => console.log(error));
   };
 };

I've checked numerous times to make sure the syntax and route is fine. questionId is also the correct question ID. However, no matter what I do, the Destroy method in the Questions controller won't recognize the request. I've checked the route in Rails and it exists. I don't get any errors, no request is ever sent to the server, and nothing is returned, not in terminal, the console, or anything.

This is the Github account: https://github.com/jwolfe890/react_project1

I'd really appreciate any insight anyone has. Thank you!

Can you add the output in the rails server when make the request? — Sebastián Palma
– Sebastián Palma, Commented Oct 2, 2017 at 11:25
it doesn't even contain output and i have no idea why. the get and post requests are still working fine in the app though. — Dog
– Dog, Commented Oct 2, 2017 at 11:26
i'm assuming it does. it has a Destroy method in the controller and the delete route is defined in the routes and shows up when i do rails routes — Dog
– Dog, Commented Oct 2, 2017 at 11:28
Something in the browser console that you can add to the question? The network tab? — Sebastián Palma
– Sebastián Palma, Commented Oct 2, 2017 at 11:30

ulferts · Accepted Answer · 2017-10-02 13:21:59Z

Your deleteQuestion method returns an anonymous function with a dispatch parameter which never seems to be called (Calling code). Only deleteQuestion is called but not the function returned by it.

Because it is called by a click handler I'd say you actually want something like this:

export const deleteQuestion = (questionId, routerHistory) => {   
  fetch(`${API_URL}/questions/${questionId}`, {
     method: 'DELETE',      
  }).then(response => {
     dispatch(removeQuestion(questionId));
     routerHistory.replace(`/`);
  })
  .catch(error => console.log(error));
};

Or if you want to return the promise, you could of course change it to:

export const deleteQuestion = (questionId, routerHistory) => {   
  return fetch(`${API_URL}/questions/${questionId}`, {
     method: 'DELETE',      
  }).then(response => {
     dispatch(removeQuestion(questionId));
     routerHistory.replace(`/`);
  })
  .catch(error => console.log(error));
};

If you want to dynamically inject the dispatch function, you could leave your original code, but would have to call the method like this:

deleteQuestion(this.state.question.id, history)(myDispatchMethod);

Collectives™ on Stack Overflow

Issues sending Fetch delete request in React to Rails API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related