Deleting data with no-code backend REST API
In this step, we are looking at deleting records via the no-code backend.
After this step, users will be able to delete tasks.
![Tasks screen](/assets/image/tutorial/sample_app_tasks.png)
Go to TODOLISTS service, open the Tasks model, switch to the Integration tab.
![Tasks model, delete code](/assets/image/tutorial/task_integration_delete.png)
Copy JavaScript code from the Delete (DELETE) tab.
![Copy to clipboard](/assets/image/tutorial/copy_to_clipboard.png)
Go back to sample code and open the file src/components/Tasks/Tasks.js. Locate the function deleteTask().
// Delete Task
const deleteTask = (id) => {
setLoading(true)
// ** INSERT DELETE CODE HERE **
// ** INSERT DELETE CODE ENDS **
}
Paste the JavaScript code from earlier inside the marked area.
// Delete Task
const deleteTask = (taskId) => {
setLoading(true)
// ** INSERT DELETE CODE HERE **
fetch("[YOUR LIGHTSWITCH API ENDPOINT]" + "/**** INSERT id HERE ****/", {
headers: {
"Authorization": "Bearer " + "/**** INSERT token.value HERE ****/",
"Content-type": "application/json"
},
method: "DELETE"
})
.then(response => response.json())
.then(json => {
if (!json.success)
throw new Error(json.message)
})
.catch((error) => {
// handle error
alert(error.message)
})
// ** INSERT DELETE CODE ENDS **
}
Append taskId to the URL.
fetch("[YOUR LIGHTSWITCH API ENDPOINT]" + taskId, {
Update the Authorization header to include the authorization token. If you don't see the authorization header in sample code, make sure you've configured permissions as described in configuring permissions.
"Authorization": "Bearer " + auth.token?.value,
Next, we'll handle the response.
.then(json => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
if (!json.success)
throw new Error(json.message)
// remove the task from the user interace
setTasks(tasks.filter((task) => task.id !== taskId))
// ***** UPDATED ***** //
})
The final output should look something like this.
// Delete Task
const deleteTask = (taskId) => {
setLoading(true)
// ** INSERT DELETE CODE HERE **
fetch("[YOUR LIGHTSWITCH API ENDPOINT]" + taskId, {
headers: {
"Authorization": "Bearer " + auth.token?.value,
"Content-type": "application/json"
},
method: "DELETE"
})
.then(response => response.json())
.then(json => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
if (!json.success)
throw new Error(json.message)
// ***** UPDATED ***** //
// remove the task from the user interace
setTasks(tasks.filter((task) => task.id !== taskId))
})
.catch((error) => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
// handle error
alert(error.message)
})
// ** INSERT DELETE CODE ENDS **
}
Save your code. You should now be able to delete tasks in the app.
![Sample app - task deleted](/assets/image/tutorial/app_delete_tasks.png)