DEV Community: Ashiqur Rahman

Build a MERN stack todo app using react-query

Ashiqur Rahman — Mon, 19 Oct 2020 16:03:01 +0000

React-query is a Hooks for fetching, caching and updating asynchronous data in React. Many of us use redux or context API to manage our server state (asynchronous state). But What if we stop trying to manage our server state in our frontend code and instead treat it like a cache that just needs to be updated periodically? I think this will make our code more accessible to pure frontend developers.

Fetch Todos

const fetchPosts = async () => {
  const {
    data: { todos },
  } = await axios.get(`http://localhost:7777/api`);
  return todos;
};

const { data: todos, isLoading, error } = useQuery("tasks", fetchPosts);

You can see from the above snippet, I give 2 argument on useQuery where tasks is the key (we can refetch the data by using that key) and fetchPosts is the callback function in which I call my express-API.

useQuery gives data, isLoading, error state. It reduces lots of boilerplate code.

Create a todo.

We will create todoItem using useMutation

Todo form

<form
  className="form"
  onSubmit={(e) => {
    e.preventDefault();
    mutate({ task: value });
    reset();
  }}
>
  <input
    type="text"
    className="form__box"
    onChange={onChangeHandler}
    name="task"
    value={value}
    placeholder="Enter a task..."
    required
  />

  <button className="form__button">Add Task</button>
</form>;

useMutation

const [mutate] = useMutation(
  (values) => axios.post("http://localhost:7777/api", values),
  {
    onSettled: () => {
      queryCache.refetchQueries("tasks");
    },
  }
);

I have called the mutate function when the form is submitted. and gave newTask as an argument. useMutation got that value as a parameter and send a post request to my express API. as a result a todo is created.

But, we can take this to next level. what if I want to see the submitted todo task before the api call is finished? Here comes an optimistic update. We will optimistically update the UI for a better User experience.

Optimistic Update

const [mutate] = useMutation(
  (values) => axios.post("http://localhost:7777/api", values),
  {
    onMutate: (newTask) => {
      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
      queryCache.cancelQueries("tasks");
      //   optimistic update
      const previousTasks = queryCache.getQueryData("tasks");
      queryCache.setQueryData("tasks", (old) => [...old, newTask]);
      return () => queryCache.setQueryData("tasks", previousTasks);
    },

    onError: (error, newTask, rollback) => {
      //   If there is an errror, then we will reset the tasks to previous tasks
      rollback();
    },
    onSettled: () => {
      queryCache.refetchQueries("tasks");
    },
  }
);

Look we have two new methods. one is onMutate another is onError. onMutate will call as soon as the form is submitted. so on this method, I am updating the todo list and show the updated list to the user.

//   optimistic update
const previousTasks = queryCache.getQueryData("tasks");
queryCache.setQueryData("tasks", (old) => [...old, newTask]);

But, what if an error occurred? for example, user goes offline as soon as he submitted the new todo? here comes the onError method. It will call the rollback function (the function which is returned from onMutate) and on cache, we will set the previous list as listItems array.

And after that, we will refetch the tasks list on onSettled method.

I think, If you understand create todo, you will easily understand delete and update items.

Update Item Form

<form
  onSubmit={(e) => {
    e.preventDefault();
    mutate({ task: value });
    reset();
    toggle(false);
  }}
>
  <input
    type="text"
    autoFocus
    className="edit"
    onChange={handleChange}
    value={value}
  />
</form>;

Update Item Mutation

const [mutate] = useMutation(
  (newTodo) => axios.put(`http://localhost:7777/api/${todo._id}`, newTodo),
  {
    onMutate: (newTask) => {
      console.log(newTask);
      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
      queryCache.cancelQueries("tasks");

      // Snapshot the previous value
      const previousTask = queryCache.getQueryData("tasks");

      // Optimistically update to the new value
      queryCache.setQueryData("tasks", (oldTasks) =>
        oldTasks.map((item) =>
          item._id === todo._id ? { ...item, task: newTask.task } : item
        )
      );

      return () => queryCache.setQueryData("tasks", previousTask);
    },

    onError: (error, newTask, rollback) => {
      //   If there is an errror, then we will reset the tasks to previous tasks
      rollback();
    },
    onSettled: (data, error, newTask) => {
      queryCache.refetchQueries("tasks");
    },
  }
);

Delete Item

 const [mutateToggle] = useMutation(
    (values) => axios.patch(`http://localhost:7777/api/${todo._id}`),
    {
      onSettled: () => {
        queryCache.refetchQueries('tasks');
      },
    }
  );

You will get the full working code on this repository.
React-query Todo App

What is the purpose of Dockerfile and Docker-compose in development mode?

Ashiqur Rahman — Wed, 23 Sep 2020 13:34:22 +0000

I am building a MERN stack app. but I am not sure about the benefit of dockerize it on development mode.
I saw many examples on github where there are separate Dockerfile on client and server folder and there is a docker-compose file where they import client and server services. but do I really need them?

If I need then, how can I run command parallelly? suppose I need to build the backend in watch mode in one terminal and in another terminal I need to execute the yarn start command. How can I achieve that?

Different ways of state management in a react app

Ashiqur Rahman — Sun, 06 Sep 2020 12:04:56 +0000

I was always confused by the various techniques of state management. so, I have decided to build an app using different state management techniques. I hope it will be easier for beginners to compare among those techniques and they will get a basic overview of them.

I build a todo list app using react-context-api, react-redux and redux-toolkit(recommended by redux)

React-Context-Api

React-Redux

Redux-Toolkit

Probably, from now on, I will use redux-toolkit in my side projects because it reduces lots of boilerplate code and with the help of the library called immer, it is possible to mutate the state directly. immer will make the code immutable under the hood.

For example, in traditional redux reducer in order to add an item to an array we have to do this:

return [...state, { id: uuid(), task: payload, completed: false }];

But, by using redux-toolkit we can mutate the array directly like this:

state.push({ id: uuid(), task: action.payload, completed: false });

Difference between innerText, textContent, innerHtml and outerHtml

Ashiqur Rahman — Wed, 26 Aug 2020 16:21:21 +0000

Often we need to extract the text from Html elements. but
sometimes we are puzzled about the difference between them. let's tackle them now. this is our html element:



<h2>
   Sub Div
   <span>I am hidden</span>
</h2>

we want to, extract the text part of the above element. let's write some javascript(basically dom-manipulation),



const heading = document.querySelector('h2');
console.log(heading.textContent);
console.log(heading.innerText);

You can see in the browser console. both outputs are almost the same (the one which uses 'textContent' is not trimmed properly)

So, what is the difference between them? For example, we add a style tag inside h2 element.



<h2>
   Sub Div
   <style>
      h2 {
      background-color: orangered;
      }
   </style>
   <span>I am hidden</span>
</h2>

now if you console.log again. you will get this as output

We are seeing that the textContent is giving the whole style element along with text and innerText is giving us the human-readable text.

There is another useful difference between them. suppose we hidden the visibility of an element by applying css rules and then try to extract them.



<head>
   <style>
      h2 span {
      display: none;
      }
   </style>
   <head>
<body>
   <h2>
      Sub Div
      <span>I am hidden</span>
   </h2>
</body>

Now let's take a look what console.log gives us:

We are seeing that textContent does not care about the css rules but innerText does. So, textContent would be handy If we need to get the text of an element that is hidden by CSS. 😉

The other two techniques are innerHtml and outerHtml. I think if we see the output in browser console we will understand them easily as they are pretty self-explanatory.



const heading = document.querySelector('h2');
console.log(heading.innerHTML);
console.log(heading.outerHTML);

let's see the output in the browser cosnole