Using HTTP "Delete" method in REST API on Vercel

We can use HTTP DELETE method instead of POST to implement deleting of data from a database in a REST API. This allows us to implement CRUD operations using a single API endpoint. Since HTML forms have no support for delete method, we should use JavaScript to send a delete request to server. Note that such requests should not have a body, so we provide an empty body to avoid browsers like Chrome throwing an error.

fetch(`/api/endpoint/${post_id}`, {
   method: 'DELETE',
   body: JSON.stringify({})
});

Then on the server the request can be processed like this:

import { ObjectId } from 'mongodb';

// code removed for sake of simplicity

const deleteDocument = async (request, collection) => {
  if (request.method === 'DELETE') {
    const query = {_id: new ObjectId(request.query.post_id)};
    const result = await collection.deleteOne(query);
    console.log(result.deletedCount);
  }
};

To make sure that post_id is received as a query in backend, we need to provide a rewrite rule in vercel.json:

{
    "rewrites": [
      {
        "source": "/api/endpoint/:post_id",
        "destination": "/api/endpoint"
      }
    ]
}

Using Location API on anchor elements

Did you know that a HTML anchor element can be treated as a Location object? This means similar to how you can use window.location to read or write different parts of a URL, you can do the same with an anchor element. For example if you have a link like this:

<a id="myLink" href="https://mydomain/products.html?category=clothing#productName">test</a>

You can get the value of hash in this way:

const hash = document.getElementById('myLink').hash.substring(1); // returns productName

You can use different properties of Location object on an anchor element and same as with window.location you can both read and write these properties. For example to get the value of category from previous link you can use this:

const params = document.getElementById('myLink').search;
const category = new URLSearchParams(params).get('category'); // clothing

For more info see: https://developer.mozilla.org/en-US/docs/Web/API/Location