Quantcast
Channel: Active questions tagged rest - Stack Overflow
Viewing all articles
Browse latest Browse all 4802

How to modify/complete url on execute in useAxios from vueuse? Or: How to delete item using useAxios?

$
0
0

I'm building a Vue application which makes requests to an REST-API.

I want to use "useAxios" from vueuse to make theese requests like below:

const {data: todosList, isLoading, error, execute} = useAxios("/myapi/todos", {method: "GET"})

This is used inside a Pinia store and works like expected. But now I want to use the same approach to delete an todo item using it's id. The API allows this by doing a delete request to "/myapi/todos/5", where 5 is the id of the todo item. To achieve this my Pinia store has a function "deleteTodo" which takes the todo as an argument. One solution would look like this:

function deleteTodo(todo){    const {data, isLoading, error, execute} = useAxios("/myapi/todos/" + todo.id, {method: "DELETE"}).then(() => {todosList.value.splice(todosList.value.indexOf(team), 1)})}

Problem here is, that I can't return isLoading and error from pinia store to use them inside my component.

A different approach would be to prepare the request in advanced (outside the deleteTodo function) and call execute inside the function:

const {data, isLoading, error, execute} = useAxios("/myapi/todos/", {method: "DELETE"}, {immediate: false})function deleteTodo(todo){     execute().then(() => {todosList.value.splice(todosList.value.indexOf(todo), 1)}); // will not work becaus the todo id is missing in the url   }

Which will not work, because now the todo id is missing in the url.

A third approach is to prepare the request without an url and pass the url on execute:

const {data, isLoading, error, execute} = useAxios({method: "DELETE"}, {immediate: false})function deleteTodo(todo){     execute("/myapi/todos/" + todo.id).then(() => {todosList.value.splice(todosList.value.indexOf(todo), 1)}); // build the complete url with the todo id right on execute}

This will fullfill all my needs but is in my opinion not very elegant, because the request definition is split up in two separate parts.

Question

Is there a way to prepare the statement with the url and only append the todo id to the predefined url when calling execute? Something like this:

const {data, isLoading, error, execute} = useAxios("/myapi/todos/", {method: "DELETE"}, {immediate: false})function deleteTodo(todo){     execute({urlSuffix: todo.id}).then(() => {todosList.value.splice(todosList.value.indexOf(todo), 1)}); // just append the todo id on execute}

Viewing all articles
Browse latest Browse all 4802

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>