Salesforce LWC Tutorial Part 4 | ToDo App Project | Understanding Wire Service Immutability

Hello Trailblazers,

Welcome to the fourth tutorial in LWC Tutorial Series where we're building a ToDo App Project. We're focusing on the concept of Learning By Doing in this tutorial series. In this tutorial, we're going to learn how we can fetch the data from the apex controller for our ToDo List component using wire service in LWC. We'll learn about how we can bind our return value to a property by using wire and we'll try to mutate/change that property and thereby learn about the immutability property of wire service.

Note:- We'll not be using the changes that we'll do in this tutorial as a base in further LWC tutorials for ToDo App Series. This tutorial is important because, It's Equally important to understand WHAT NOT TO DO as it is to understand WHAT TO DO. We'll be learning about immutability property of wire service in this tutorial and we'll see how we can fetch the data from apex to lwc component using wire service.

So, let's continue building the above application. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

I highly recommend you to have a look at the video to understand in detail. However, let's have a quick look at the code below to understand in short:-

Apex Class (ToDoListController.cls)

As you can see above, I have created a simple method named as:- getTasks() which will return the list of tasks assigned to the logged-in user. Notice that I have added:- @AuraEnabled(cacheable=true) annotation to the method as it's required in order to make it available to the wire service. Let's have a look at the JavaScript code now.

JS Snippet (todo.js)

As you can see above, I have imported the getTasks method from the apex controller and wire service from lwc. At the end of the js, I have called getTasks method using the wire service and binded the response with todoTasks variable. It's the same variable that we initialized to an empty array in the previous tutorials (I've commented that code as you can see above the newTask variable declaration). Now, this todoTasks variable will store the response that we're getting by calling getTasks method i.e. an object with 2 keys:- data - which will contain the list of tasks and error - which will contain the error messages as you can see in the comments below the wire service.

Also, in the addTaskToList() method, I've commented the previous code of pushing the new task to todoTasks list as now we'll be pushing the new task to todoTasks.data as the list of todoTasks is present there. The id and name keys of each task are now replaced by Id and Subject as we're getting those tasks from apex now. For a new ToDo Task, the Id will have a value:- this.todoTasks.data.length + 1 instead of this.todoTasks.length + 1 as the list of todo tasks is now stored in this.todoTasks.data.

HTML Snippet (todo.html)

If you notice carefully, I have updated the todoTasks array in the for:each loop. Instead of todoTasks, I am using todoTasks.data and instead of using todoTask.id, todoTask.name, I am using todoTask.Id and todoTask.Subject

I have also wrapped this for:each loop under an if condition using <template if:true={todoTasks.data} which will check, if the data under the todoTasks object is defined or in simple words we can say that it'll check, if the tasks are fetched from the server successfully, as it may take some time to fetch the data from the server when the component is rendered. Once all the data is fetched, it'll go inside this template with if condition and render all the todo tasks using a for:each loop.

In the output you'll see that the todoTasks are fetched from salesforce successfully and you'll be able to view those. However, if you try to add a new todoTask to the list, you won't be able to do that as All the data which is fetched by using the wire service is Immutable (can't be updated). We'll see the solution to this issue in the next tutorial, where we'll bind a function with the wire service instead of a variable.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!