Reputation: 490
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
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