Building Whinst Part 15: Creating and adding all API endpoints

The Whinst web app so far has 3 main models, these are users, catalogs and products. I've so far created endpoints (a specific location within an API that accepts requests and sends back responses) for these models to be created, edited and deleted. In this article, I'll walk you through how I created these endpoints and added them to the Whinst web app. Let's dive in🏄🏾‍♂️.

Creating and adding API endpoints⚙️

• GET endpoints: These endpoints are used to retrieve a resource. In the Whinst web app, these endpoints are used to get a list of catalogs and products and a single catalog and product. Before creating the endpoints I had to create the catalog and product models. The catalog model is linked to the user model via a foreign key field in the same way the product model is linked to the catalog model. I also set on delete cascade to these models so that they are deleted when their parent models are deleted. The blocks of code below show how I set up the get endpoints for retrieving a single item and the queries I used to link the database items.

    //GET ENDPOINT
    app.get("/items/:id", async (req, res) => {
      try {
        const { id } = req.params;
        const items = await pool.query("SELECT * FROM items WHERE id = $1",[id])
        res.json(items.rows);
      } catch (err) {
        console.error(err.message);
      }
    });
  

     /*DATABASE A TABLE WITH FOREIGN KEY AND ON DELETE CASCADE*/
    CREATE TABLE items(
    id INT PRIMARY KEY,
    parent_id INT REFERENCES parent_table(id) ON DELETE CASCADE,
    );
  

• POST and PUT endpoints: These endpoints are used to edit resources. In the Whinst web app, this endpoint is used to edit the user, catalog and product models. For the POST endpoints when an object has been created the newly created object is returned then for the PUT endpoints when an object is edited a success message and status code are returned. The code blocks below show how these endpoints are implemented.

    //A POST ENDPOINT
    app.post("/create_product",async(req,res)=>{
      try{
        const { item} = req.body;
        const newItem = await pool.query("INSERT INTO item (item) VALUES ($1) RETURNING *",
        [item],(errors,results)=>{
          newItem = results.rows
          newItem.map((item)=>{
            res.json(item)
          })
        })
      }
      catch(err){
        res.status(500)
      }
    })
  
    //A PUT ENDPOINT
    app.put("/item/:itemId",async(req,res)=>{
        try{
            const {itemId} = req.params;
            const  { item_content } = req.body;
            const item = await pool.query("UPDATE item SET item_content = $1 WHERE item_id = $2",
            [item_content,itemId]
            );
            res.status(201)
        } catch(err){
            res.status(500)
        }
    })
  

• DELETE endpoints: These endpoints are used to delete resources. In the Whinst web app, these endpoints are used to delete the user, catalog and products. All the models connected to parent models that have the on-delete cascade are deleted when their parent models are deleted. When deleted a success message is sent.

    // DELETE ENDPOINT
    app.delete("/item/:id",async(req,res)=>{
      try{
        const {id} = req.params;
        const deleteProduct = await pool.query("DELETE FROM item WHERE id = $1",[
          id
        ]);
        res.json('item deleted successfully')
      } catch(err){
        console.log(err)
      }
    })
  

I then moved these endpoints to the frontend code where users can interact with the database using them. With almost all endpoints implemented I've since moved on to adding media files to the database. Thanks for reading and see you in the next article🙏.