FlamePrinz
FlamePrinz

Reputation: 490

How do I edit my axios post request so that I successfully send a put request?

As far as I'm aware I should be using an axios .put request to send an update to my backend/database which is a Django REST framework.

I have been using .get, .post, and .delete successfully by following a guide.

I've been getting conflicting messages from online resources about how to do a .put request successfully. Some resources say that the url in my path should be something like '/path/in/urls/:id' where id is the thing I want to update. Other resources have shown that my inputs to .put should have an identical format to my .post. For my .post I've been using the path '/path/in/urls/ and then the second argument is an object.

For all of these requests the final argument is always a type of token. In the code I use it looks something like: tokenConfig(getState), but this value is equal to, for example:

{
  headers: {
    Authorization: "Token 032b2f569037f0125753ef8f67e7774d34a756646ae28cefd54eb1c54bd0b149"
    Content-type: "application/json"
  }
}

I need some clarification on what is wrong with my .put request. Here is an example of how I do a .post request, where eventdefinition is what I'm posting:

// ADD EVENT DEFINITION
export const addEventDefinition = (eventdefinition) => (dispatch, getState) => {
  axios
    .post("/api/eventdefinitions/", eventdefinition, tokenConfig(getState))
    ...
};

Here is my attempt where I keep everything the same as with the .post method. As you can see it is nearly identical. With this implementation I get a 405 (Method Not Allowed) error:

// EDIT EVENT DEFINITION
export const editEventDefinition = (eventdefinition) => (dispatch, getState) => {

  axios
    .put(`/api/eventdefinitions/`, eventdefinition, tokenConfig(getState))
    ...
};

I also tried this implementation where instead of passing in a second argument, I pass in the id in the url and what I need to edit also in the url. For this implementation I get a 401 (Unauthorized) error:

// EDIT EVENT DEFINITION
export const editEventDefinition = (event_id, event_change) => (dispatch, getState) => {

  const event_key = Object.keys(event_change)[0];
  const event_value = event_change[event_key];

  axios
    .put(`/api/eventdefinitions/${event_id}/?${event_key}=${event_value}/`, tokenConfig(getState))
    ...
};

More specifically the first error looks like, in all cases:

Method Not Allowed: /api/eventdefinitions/
[20/Nov/2020 00:36:13] "PUT /api/eventdefinitions/ HTTP/1.1" 405 40

More specifically the second error looks like, for example:

Unauthorized: /api/eventdefinitions/4/
[20/Nov/2020 01:03:51] "PUT /api/eventdefinitions/4/?active_for_generation=true/ HTTP/1.1" 401 58

Upvotes: 0

Views: 1786

Answers (1)

pplonski
pplonski

Reputation: 5859

Please use PATCH instead of PUT:

  • PATCH is for partial update, you only send fields which you want to update,
  • PUT is for full update (all fields).
const event_key = Object.keys(event_change)[0];
const event_value = event_change[event_key];
axios.patch(`/api/eventdefinitions/${event_id}/`, {event_key: event_value}, tokenConfig(getState))

Please check my article about CRUD in DRF+React.

BTW, you don't need to include token config in each request. You can set token in config:

import axios from "axios";
export const setAxiosAuthToken = token => {
  if (typeof token !== "undefined" && token) {
    // Apply for every request
    axios.defaults.headers.common["Authorization"] = "Token " + token;
  } else {
    // Delete auth header
    delete axios.defaults.headers.common["Authorization"];
  }
};

Upvotes: 1

Related Questions