# Fetching and Deleting a Contact with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js) **Author:** Ndianabasi Udonkang **Published:** 2021-10-21 Learn how to fetch and delete a contact from the database with AdonisJS for the Google Contacts Clone App. We use Postman to test the endpoints. --- ## Tags - [JavaScript](/llms/technical-blog/tag/javascript.md) - [Nodejs](/llms/technical-blog/tag/nodejs.md) - [Vuejs](/llms/technical-blog/tag/vuejs.md) - [Adonisjs](/llms/technical-blog/tag/adonisjs.md) - [Quasar Framework](/llms/technical-blog/tag/quasar-framework.md) ## Part of Series: [Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vue.js (Quasar Framework)](/llms/technical-blog/series/clnwu9bc991hiu3wo2vwmw45/full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vue-js-quasar-framework.md) This article is part of the **[Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vue.js (Quasar Framework)](/llms/technical-blog/series/clnwu9bc991hiu3wo2vwmw45/full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vue-js-quasar-framework.md)** series. ### Articles in this Series: - [Introduction to Full-Stack Google Contacts Clone with Node.js (Adonisjs Framework) and Vuejs (Quasar Framework)](/llms/technical-blog/article/xe5mlxg43s9rpx1pxsvfdp3r/introduction-to-full-stack-google-contacts-clone-with-node-js-adonisjs-framework-and-vuejs-quasar-framework.md) - [Workspace Setup | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/fo8str8yjpkz5dygxg875bpw/workspace-setup-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Frontend Overview | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/nxgmng6fhf1cwjk30coflro2/frontend-overview-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [The Left Drawer | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/m6fagvy2il5h65llxxbbl9os/the-left-drawer-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Improve The Header | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/jjwbxcg450jmkkcrrmkmwvwj/improve-the-header-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [New Contact Form Design | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/ebguwpkntk3empakunrki4dq/new-contact-form-design-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Validating the Contact Form with Vuelidate | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/z0xr9m2ljler2cwnpsw2ycwa/validating-the-contact-form-with-vuelidate-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Designing the Contacts Table | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/h2p1x1z406ib38zu2dci3jur/designing-the-contacts-table-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Designing the Contacts Table (Part 2) | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/j0iscua9gg8ekuz8ifh6chpn/designing-the-contacts-table-part-2-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Refactoring the Main Layout | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/uktmlqsivwtr3cvnpld59k9q/refactoring-the-main-layout-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Improving User Experience with the Contacts Table | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/dzs812auf61ej7qu2cg726dh/improving-user-experience-with-the-contacts-table-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Designing the Contact Details Page | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/kf9pz97n63fvgfrcy5viwzrg/designing-the-contact-details-page-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [Creating the Contact Edit Page | Full-Stack Google Contacts Clone with Adonis.js/Node.js and Quasar (Vue.js)](/llms/technical-blog/article/fmr90prj84c9zn0633jc368g/creating-the-contact-edit-page-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-vue-js.md) - [How Software Backends Work | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/aca8fcrghz70nn1wqg3uzbum/how-software-backends-work-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Setting Up The Backend | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/fxb49fmz9ljbwrimbnnzudfv/setting-up-the-backend-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Why Choose the AdonisJs Framework? | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/lnhm5oudx34yo2869gmcms37/why-choose-the-adonis-js-framework-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Setting Up Our API Server with AdonisJs Framework | Full-Stack Google Contacts Clone with AdonisJs (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/x1jgmet84aqj9qggu5mulkh0/setting-up-our-api-server-with-adonis-js-framework-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Setting Up Postman with the API Server | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/v4qehksislosmuy92qgjr4ct/setting-up-postman-with-the-api-server-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [The Model-View-Controller Design Pattern in AdonisJS | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/h5wqql65iejop5xrplujw458/the-model-view-controller-design-pattern-in-adonis-js-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Create Column Definitions & Insert New Contacts | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/asc2emsho4u73r6jb2gxjddw/create-column-definitions-and-insert-new-contacts-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Data Validation & Sanitisation with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/bcey0ac7m5sbs9hqy1h824sl/data-validation-and-sanitisation-with-adonis-js-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - [Creating a Middleware and Updating a Contact | Full-Stack Google Contacts Clone with AdonisJS (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/oqxzmtgfy1r3oewpnedc7wf6/creating-a-middleware-and-updating-a-contact-full-stack-google-contacts-clone-with-adonis-js-node-js-and-quasar-framework-vue-js.md) - **Fetching and Deleting a Contact with AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)** (Current Article) - [Using Model Factories and Seeders in AdonisJS | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/cfotveuxbgjtdp12l6pzcb2y/using-model-factories-and-seeders-in-adonis-js-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md) - [Creating and Registering a Vuex Module | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/cw96ewnzujgsz2e2garhbuzb/creating-and-registering-a-vuex-module-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md) - [Connecting UI Components to the Vuex Store | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/fdyqp17yehbnqrjvjvab4b5b/connecting-ui-components-to-the-vuex-store-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md) - [Connecting the Frontend to the API Server | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/fk4262359gg3g7f0jn95fn9b/connecting-the-frontend-to-the-api-server-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md) - [Creating and Updating Contacts From the Frontend | Full-Stack Google Contacts Clone with AdonisJS Framework (Node.js) and Quasar Framework (Vue.js)](/llms/technical-blog/article/t15w2s3ao9jo74l96stjo7z6/creating-and-updating-contacts-from-the-frontend-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js.md) - [Uploading Files and Creating Avatars for Contacts With AdonisJS and Axios](/llms/technical-blog/article/hg9ilaubqesm8angg0rhrjp9/uploading-files-and-creating-avatars-for-contacts-with-adonis-js-and-axios.md) - [Deleting a Contact with AdonisJS and Vuejs](/llms/technical-blog/article/zdr4pxmgcax2dsfnwimhty0g/deleting-a-contact-with-adonis-js-and-vuejs.md) --- ## Article Content In this lesson, we will learn how to create API endpoints for fetching the details of a contact and also deleting a contact. We will take advantage of our `FindContact` middleware to check for the existence of the contact and get the model of the contact before the request lifecycle gets to the controller. Let's start by creating a new branch for our repo: ```bash # Make sure you are within your project git checkout -b 15-fetching-and-deleting-a-contact ``` ## Adding New Route Endpoints We will add two new route definitions to our `api/start/routes.ts` file. Open the `api/start/routes.ts`. Refer to this [snapshot](https://github.com/ndianabasi/google-contacts/blob/15-fetching-and-deleting-a-contact/api/start/routes.ts). Add the following lines to end of the file: ```ts Route.get('/contacts/:id', 'ContactsController.show').middleware(['findContact']) Route.delete('/contacts/:id', 'ContactsController.destroy').middleware(['findContact']) ``` Above, we are adding a `GET /contacts/:id` endpoint for fetching all the details of a contact. We assign the `show` method in the `ContactsController` class as the handler. The full details of the contact will be used to populate the details page of the contact on the frontend. We are also adding a `DELETE /contacts/:id` endpoint for deleting a contact. The `destroy` method in the `ContactsController` class is assigned as the route handler. Both route definitions are attached the `findContact` middleware for getting the `Contact` model before the request lifecycle gets to the controller. ## Improving the `FindContact.ts` middleware Next, we will improve the error handling in the `api/app/Middleware/FindContact.ts` middleware. The following changes are made. Refer to this \[snapshot] (https://github.com/ndianabasi/google-contacts/blob/15-fetching-and-deleting-a-contact/api/app/Middleware/FindContact.ts) for the updated file. ```diff - const contact = await Contact.findOrFail(id) - if (!contact) { + let contact: Contact + try { + contact = await Contact.findOrFail(id) + } catch (error) { return response.notFound({ message: 'Unknown contact was requested' }) } ``` This call, `await Contact.findOrFail(id)`, automatically throws an error if the `id` is not found in the `contacts` table. Because of this, we need to wrap it with a `try...catch` block if we are to catch the error and handle it ourselves, else the old line, `if(!contact) {...}` will not be reached if an error is thrown. In the `catch` block, we manually return `400` (bad request) error with a message. ## Updating the `show` and `destroy` methods Now, we will update the `show` and `destroy` methods in the `ContactsController` file. Open the `api/app/Controllers/Http/ContactsController.ts` file. Refer to this [snapshot](https://github.com/ndianabasi/google-contacts/blob/15-fetching-and-deleting-a-contact/api/app/Controllers/Http/ContactsController.ts) for these updates. Update the `show` method to the following: ```ts public async show({ response, requestedContact }: HttpContextContract) { try { return response.ok({ data: requestedContact }) } catch (error) { Logger.error('Error at ContactsController.show:\n%o', error) return response.status(error?.status ?? 500).json({ message: 'An error occurred while deleting the contact.', error: process.env.NODE_ENV !== 'production' ? error : null, }) } } ``` On Line 83, we make sure that we destructure `requestedContact` from the `HttpContext`. Next, we simply return the `requestedContact` without any other modifications: `return response.ok({ data: requestedContact })`. Update the `destroy` method to the following: ```ts public async destroy({ response, requestedContact }: HttpContextContract) { try { await requestedContact?.delete() return response.created({ message: 'Contact was deleted', data: requestedContact?.id }) } catch (error) { Logger.error('Error at ContactsController.destroy:\n%o', error) return response.status(error?.status ?? 500).json({ message: 'An error occurred while deleting the contact.', error: process.env.NODE_ENV !== 'production' ? error : null, }) } } ``` In Line 154, we make sure that we destructure `requestedContact` from the `HttpContext`. Then, on Line 156, we call the static `delete` method on the `Contact` model to delete the contact: `await requestedContact?.delete()`. Then, we return a response with a custom message. ## Testing the Endpoint with Postman Next we will use `Postman` to test the two endpoints we have created and programmed. Launch `Postman` and make sure that the `Google Contacts Clone` workspace is active. Also ensure that your API server is running. If it is not running, do the following: ```bash cd api yarn serve ``` ### Fetching a Contact For the `GET /contacts/:id` endpoint, do the following: 1. Right-click on the `CRUD` collection and click `Add Request`. Enter `Fetch Contact` as the name. 2. Ensure that the request method is `GET`. Enter `{{baseURL}}/contacts/:id` in the`Request URL` field. The `Path Variable` table will be displayed under the `Params` tab. If not shown, switch to the `Params` tab below the `request URL` manually. We need to populate the `id` of the contact we want to update. 3. Open `MySQL Workbench` and open the connection we created for this series. Expand the `google_contacts_app` schema, and browse the `contacts` table. Copy the `id` of any contact from the `contacts` table. 4. Now, switch back to `Postman` and paste the `id` into the `VALUE` column for the `id` parameter row. Enter `Contact ID` under `DESCRIPTION`. See the image below: ![image.png](https://cdn.ndianabasi.com/site/fetching_and_deleting_a_contact_with_adonisjs_full_stack_google_contacts_clone_with_adonisjs_framework_node_js_and_quasar_framework_vue_js_v1634853207709_X_Jj_J_Gir1b_c715463d46.png) 5. As seen in the screenshot above, you can define an environmental variable (`contactId`) to hold the `Contact ID` so that you update it centrally. To do this, follow these steps: ![image.png](https://cdn.ndianabasi.com/site/fetching_and_deleting_a_contact_with_adonisjs_full_stack_google_contacts_clone_with_adonisjs_framework_node_js_and_quasar_framework_vue_js_v1634853683339_q0_Eqh1_U6_e5cb459b23.png) ![image.png](https://cdn.ndianabasi.com/site/fetching_and_deleting_a_contact_with_adonisjs_full_stack_google_contacts_clone_with_adonisjs_framework_node_js_and_quasar_framework_vue_js_v1634853787779_D_Bx_EBY_7zy_4713d48915.png) 1. Make sure that your active `environment` is the `default` environment we created earlier. 2. Click the `eye` icon at the top-right corner to see the `Environment` dialog and click `Edit` to edit the `environment`. Add a new variable `contactId` and paste the `id` you copied from the database under `INITIAL VALUE`. Save the \`environment. 3. If you need to update the variable, make sure that you change both the `INITIAL VALUE` and `CURRENT VALUE`. 6. Now, click on the `Fetch Contact` request and enter `{{contactId}}` under the `VALUE` column for the `id` variable in the `Path Variables` area. 7. Save the request. 8. Click `Send` to send the request. If all went well, you should get a response like this: ```json { "data": { "id": "ckuyj7r9w00000ovod2eo0yf5", "first_name": "Morris", "surname": "Fahey", "company": "Baumbach, Borer and Gleason", "job_title": "Forward Response Orchestrator", "email1": "Morris_Fahey@gmail.com", "email2": null, "phone_number1": "(701) 351-4525", "phone_number2": null, "country": "Ethiopia", "street_address_line1": "162 Schoen Curve", "street_address_line2": "18962 Larry Squares", "city": null, "post_code": "31207", "state": "Iowa", "birthday": null, "website": "https://ozella.biz", "notes": null, "created_at": "2021-10-19T21:21:16.000+01:00", "updated_at": "2021-10-19T21:21:16.000+01:00" } } ``` Congratulations! You have fetched a contact from the database. ### Deleting a Contact For the `DELETE /contacts/:id` endpoint, do the following: 1. Right-click on the `CRUD` collection and click `Add Request`. Enter `Delete Contact` as the name. 2. Ensure that the request method is `DELETE`. Enter `{{baseURL}}/contacts/:id` in the`Request URL` field. The `Path Variable` table will be displayed under the `Params` tab. If not shown, switch to the `Params` tab below the `request URL` manually. 3. Enter `{{contactId}}` under the `VALUE` column for the `id` variable in the `Path Variables` area. This assumes that you have defined a `contactId` environment variable. Else, manually enter the `id` value instead of `{{contactId}}`. See the following screenshot: ![image.png](https://cdn.ndianabasi.com/site/fetching_and_deleting_a_contact_with_adonisjs_full_stack_google_contacts_clone_with_adonisjs_framework_node_js_and_quasar_framework_vue_js_v1634854960895_2frld_Ok_Eq_cf20d56844.png) 4. Save and send the request. 5. If all went well, you should get a response like this: ```json ``` { "message": "Contact was deleted", "data": "ckuyj7r9w00000ovod2eo0yf5" } ```` Congratulations! You have successfully deleted a contact. 6. Attempt to delete the contact again by resending the request with the same `id`. You should get the following 404 error: ```json { "message": "Unknown contact was requested" } ```` Awesome. Our `middleware` is working well and has thrown an error because that `id` has been deleted. We have successfully created API endpoints and demonstrated how AdonisJS makes Database operations so easy as seen in our controller. With just one to two lines of code, we were able to return a response from the `show` and `destroy` methods. This was also possible because we refactored the process of getting the `requestedContact` into a middleware. This concludes this lesson. In the next lesson, we will learn how to created a factory and seeder for mass creation of contacts as we continue to build and test our application. We will also learn how to list all the contacts with the help of pagination. This lesson will be interesting. 🚀🚀 Don't miss it. 😁 Save all your files, commit, merge with the master branch, and push to the remote repository (Github). ```bash git add . git commit -m "feat(api): complete fetching and deletion of contacts" git push origin 15-fetching-and-deleting-a-contact git checkout master git merge master 15-fetching-and-deleting-a-contact git push origin master ``` *This document was generated from the live article page on https://ndianabasi.com/technical-blog/article/p6bh0ponq43u3vi6o8uww84x/fetching-and-deleting-a-contact-with-adonis-js-full-stack-google-contacts-clone-with-adonis-js-framework-node-js-and-quasar-framework-vue-js • 2026-06-07*