DEV Community: Mrityunjay-Palled

Reading, Writing and Pipelining Streams in Node.js

Mrityunjay-Palled — Sat, 14 Jan 2023 12:15:49 +0000

Streams are the objects that allow you to read data from a source or write data to a destination in a continuous manner.

Reading from a stream:

First create a text file named "myFile.txt" with the following content

The greater damage for most of us is not that our aim is too high and we miss it, but that it it too low and we reach it.

create a js file named index.js with the following code

//importing file system module
let fs = require("fs");
let data = "";
//creating a redable stream
let rs = fs.createReadStream("myFile.txt");
// Get the data as utf8 strings.
// If an encoding is not set, Buffer objects will be received.
rs.setEncoding("UTF8");
// Readable streams emit 'data' events once a listener is added.
rs.on("data", function (chunk) {
  data += chunk;
});
//end event specifies that body has been read completely 
rs.on("end", function () {
  console.log(data);
});
//error occured 
rs.on("error", function (err) {
  console.log(err.stack);
});

console.log("Program Ended");

we have two events for readable stream one is "data" another is "end"

data: Emitted when data is available
end: Emitted when there is no data

Run the code by writing the following command:

node index.js

Output of the above code is as shown below:

Program Ended
The greater damage for most of us is not that our aim is too high and we miss it, but that it it too low and we reach it.

Writing to a stream:

create a js file named index.js with the following code

//import file system module
let fs = require("fs");
//data to be written to a stream
let data = `I hated every minute of training, but I said, Don't quit. Suffer now and live the rest of your life as a champion.`;
// creating a writable stream
let ws = fs.createWriteStream('output.txt');
//using UTF8 encoding
ws.write(data,'UTF8');
// indicating end of file
ws.end();
// handling finish event
ws.on('finish', function() {
   console.log("Write completed.");
});
//handling error event
ws.on('error', function(err) {
   console.log(err.stack);
});

console.log("Program Ended");

In the above code, we are creating a write stream using the createWriteStream method. We are then using the write method to write data to our output file.Then, we can call the end function to mark the end of the file. "finish" event is emitted when writing data to a stream is completed.

Run the code by writing the following command:

node index.js

Output of the above code is as shown below:

Program Ended
Write completed.

Once the above program is executed completely, you can notice that a file named "output.txt" will be created in your file tree with the following content:

I hated every minute of training, but I said, Don't quit. Suffer now and live the rest of your life as a champion.

Pipelining the streams:

Pipelining means providing the output of one stream as an input to another stream. Now let's take a look at pipelining

create a js file named index.js with the following code

//importing a file system module
let fs = require("fs");
// creating a redable stream
var rs = fs.createReadStream("myFile.txt");
// creating a writable stream
var ws = fs.createWriteStream("output.txt");
//pipeling the read and write
//reading from myFile.txt and writing it to output.txt
rs.pipe(ws);
console.log("Program Ended");

Run the code by writing the following command:

node index.js

Output of the above code is as shown below:

Program Ended

Once the above program is executed completely, you can notice that a file named "output.txt" will be created in your file tree with the same content that is present in the "myFile.txt".

Writing files with Node.js

Mrityunjay-Palled — Sat, 31 Dec 2022 07:28:57 +0000

Writing data to a file is one of the most common tasks in any programming language. Now let's take a look at how we can write files in node.js

Using writeFile():

//importing file system module
const fs=require('fs')
const path='./Files/write.txt'
const data='Hello this is new data'
fs.writeFile(path,data,(err)=>{
  if(err)return console.log('error occurred while writing data')
})

As we see above writeFile takes the following parameters:

path:filepath of the file to write
data:data to be written to the file
callback:If there is no error, err === null, otherwise err contains the error message.

writeFile is asynchronous in nature, means it does not effect the execution of the program.

using writeFileSync():

//importing file system module
const fs=require('fs')
const path='./Files/write.txt'
const data='Hello this is new data'
try{
    fs.writeFileSync(path,data)
    //file written successfully
}catch(err){
    console.log('error occurred while writing data')
   //error occurred
}

As we see above writeFileSync takes the following parameters:

path:filepath of the file to write
data:data to be written to the file

writeFileSync is synchronous in nature, which means the rest of the code execution will be stopped until the file writing is complete.

Using promise-based writeFile():

//importing promise-based file system module
const fs=require('fs').promises
const path='./Files/write.txt'
const data="Hello this is new data"
const fileWrite=async ()=>{
    try{

        await fs.writeFile(path,data)
        //file written successfully
    }catch(err){
        console.log('error occurred while writing data')
        //error occurred
    }
}
fileWrite()

As we see above promise-based writeFile takes the following parameters:

path:filepath of the file to write
data:data to be written to the file

since it is promise-based we can use async-await as shown above

Reading files with Node.js

Mrityunjay-Palled — Mon, 26 Dec 2022 15:13:16 +0000

As we know, reading the content of a file is one of the most common and important tasks of programming. Let's take a look at how we can read files in node.js.

Using readFile():

readFile takes three parameters, and they are:

path: Filepath of the file to read
encoding: It is an optional parameter; possible values are ascii, utf8,and base64.
callback: It is passed with two arguments: error and data,error contains the error message, and data contains the data coming from the file.
readFile is asynchronous in nature; therefore, it will not interrupt the execution of the program.

//importing file system module 
const fs=require('fs')
const path='./myFiles/read.txt'
fs.readFile(path,'utf8',(err,data)=>{
    if(err)return console.log("error occured while reading data");
    console.log(data);
})

output in the console is as shown below

Hello from read.txt

without 'utf8' encoding then output will be raw buffer data

<Buffer 48 65 6c 6c 6f 20 66 72 6f 6d 20 72 65 61 64 2e 74 78 74>

using readFileSync():

readFileSync takes two parameters, and they are:

path: Filepath of the file to read
encoding: It is an optional parameter; possible values are ascii, utf8,and base64.

readFileSync is synchronous in nature, which means the rest of the code execution will be stopped until the file is read completely.

//importing file system module
const fs = require("fs");
const path = "./myFiles/read.txt";
try {
  const data = fs.readFileSync(path, 'utf8');
  console.log(data);
} catch (err) {
  console.error(err);
}

output in the console is as shown below

Hello from read.txt

Using promise-based readFile():

Promise-based readFile takes two parameters, and they are:

path: Filepath of the file to read
encoding: It is an optional parameter; possible values are ascii, utf8,and base64.

since it is promise-based we can use async-await.

//importing promise-based file system module
const fsPromise = require("fs").promises;
const path = "./myFiles/read.txt";

const fileRead = async () => {
  try {
    const data = await fsPromise.readFile(path, "utf8");
    console.log(data);
  } catch (err) {
    console.error(err);
  }
};

fileRead();

output in the console is as shown below

Hello from read.txt

useEffect() Hook in React

Mrityunjay-Palled — Sat, 24 Dec 2022 13:59:24 +0000

The useEffect hook is used to introduce side effects into our functional component. Making an API call to fetch the data from the server, manually changing the DOM, and setting up the subscriptions are all examples of side effects.If you are familiar with class-based component life cycle methods, then the useEffect hook acts as the combined form of the componentDidMount, componentDidUpdate, and componentWillUnmount methods.Now let's see how we can import the useEffect hook into our react application.

import { useEffect } from 'react'

The useEffect hook takes two parameters. One is a callback function that contains actual side effects, and another is an optional dependency array.By default useEffect runs both after a first render and after every update. React always guarantees that DOM has been updated by the time it runs the effects

useEffect with no dependency:

import React, { useState } from 'react'
import { useEffect } from 'react'

const App = () => {
  const [count,setCount]=useState(0)
  useEffect(()=>{
    //runs on every render
    console.log(`You clicked ${count} times`)
  })
  return (
     <button onClick={()=>setCount(count+1)}>
      click here
     </button>
  )
}
export default App

Since no dependency array is passed in the above example, the useEffect is executed after each render.

useEffect with empty array as a dependency:

import React, { useState } from 'react'
import { useEffect } from 'react'

const App = () => {
  const [count,setCount]=useState(0)
  useEffect(()=>{
    //runs only after the initial render
    console.log(`You clicked ${count} times`)
  },[])

  return (
    <button onClick={()=>setCount(count+1)}>
      click here
    </button>
  )
}
export default App

Since we have added an empty array as the dependency. This causes the useEffect to run only once after initial rendering.No matter how many times we click the button this will only show initial value of count

useEffect with state or props variable as a dependency:

import React, { useState } from "react";
import { useEffect } from "react";

const App = () => {
  const [incrementCount, setIncrementCount] = useState(0);
  const [decrementCount,setDecrementCount] = useState(0);

  useEffect(() => {
    //runs only when the value of incrementCount changes
    console.log(`Count after increment: ${incrementCount}`);
  }, [incrementCount]);

  return (
    <>
      <button onClick={() => setIncrementCount(incrementCount + 1)}>
        click here to increment a count
      </button>
      <button onClick={() => setDecrementCount(decrementCount - 1)}>
        click here to decrement a count
      </button>
    </>
  );
};
export default App;

As we see above, we are passing the state variable incrementCount as the dependency to the useEffect, hence the useEffect will run only when the value of incrementCount changes.

useEffect with cleanup:

import React, { useState } from 'react'
import { useEffect } from 'react'

const App = () => {
  const [count,setCount]=useState(0)
  useEffect(()=>{
    let intervalId=setInterval(()=>{
      console.log(`You clicked ${count} times`)
    },1000)
    return ()=>{
      clearInterval(intervalId)
    }
  },[count])

  return (
    <button onClick={()=>setCount(count+1)}>
      click here
    </button>
  )
}
export default App

As we see above, there is a return function, which is also called the cleanup function. This function cleans up the timer every time the value of count changes and starts it from the beginning.

Using Axios with React

Mrityunjay-Palled — Sat, 17 Dec 2022 08:41:58 +0000

Axios is an HTTP-based client for node.js and browsers that allows you to make requests to a given endpoint.

Setting up Axios with React:

You can run the following command to install Axios in your current React environment .

npm install axios

Making a GET request:

import React, { useEffect, useState } from 'react'
import axios from 'axios'

const App = () => {
  const [allPosts,setAllPosts]=useState([])
  useEffect(()=>{
    getAllPosts()
  },[])

  const getAllPosts=()=>{
    axios.get("https://jsonplaceholder.typicode.com/posts")
    .then((posts)=>{
      setAllPosts(posts.data)
    })
  }

  return (
    <>
     {allPosts?.map((post)=>(
      <li key={post.id}>{post.title}</li>
     ))}
    </>
  )
}

export default App

As we see above, we are using Axios to make GET requests to the server. We are passing a URL as a parameter to the get method provided by Axios. Since we know Axios is promise-based, we are using the ".then" callback to get all the posts that are returned by the server. We are using useEffect to invoke the getAllPosts function whenever the component mounts.

Making a POST request:

import React, { useState } from "react";
import axios from "axios";

const App = () => {
  const [postAdded, setPostAdded] = useState(false);
  const addMyNewPost = () => {
    let _newPost = {
      userId: 1,
      title: "Hello People.....!!!",
      body: "Have a Great Day...!!!",
    };
    axios
      .post("https://jsonplaceholder.typicode.com/posts", _newPost)
      .then((post) => {
        if (post) setPostAdded(true);
      });
  };

  return (
    <>
      <button onClick={addMyNewPost}>Add My New Post</button>
      {postAdded ? <p>New Post Added</p> : null}
    </>
  );
};

export default App;

As we see above, unlike the get method, we are also passing data that needs to be posted on the server along with the URL.In our case, the data payload that needs to be posted on the server is stored in "_newPost". Whenever a user clicks on the button, the addMyNewPost function will be triggered, which then triggers the POST API call.The request payload and the response are as shown below.

since we are using the JSON Placeholder API. The resources will not really be updated on the server, but they are faked as if they were. As we see above we are getting proper response from the server for our POST request. In this way we can post data to the server using Axios.

Error handling:

To handle errors we can make use of ".catch" block.Inside the block we can use the error object returned by the axios to handle the subsequent errors

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [allPosts, setAllPosts] = useState([]);

  useEffect(() => {
    getAllPosts();
  }, []);

  const getAllPosts = () => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((posts) => {
        setAllPosts(posts.data);
      })
      .catch((error) => {
        if (error.response) {
          // The request was made and the server responded with a status code
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log("Error", error.message);
        }
      });
  };

  return (
    <>
      {allPosts?.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </>
  );
};

export default App;

React Query - Data Fetching

Mrityunjay-Palled — Sat, 10 Dec 2022 09:48:45 +0000

React Query is a data fetching library for React that makes data fetching, caching, and synchronizing easier. Now let's take a look at how we can fetch data using React Query.

Providing query client:

The first and foremost method of using React Query is to provide a query client to your application.

As we see above, we are importing QueryClientProvider and QueryClient from React Query. We are using QueryClient to handle the global data caching. The QueryClientProvider component can be used to provide a QueryClient to our application.

Creating query functions:

Query functions are those that are used to fetch data from the server.

As we see above, getPosts is a query function that fetches all the posts. In our case, we are using Axios to fetch the data.

Using the useQuery hook to fetch data from the network and cache it:

As we see above, we are importing useQuery from React Query. The useQuery hook accepts two parameters. The first one is key; in our case, it is "posts." Keys are generally used to uniquely identify a particular HTTP request. The second parameter for useQuery is a query function, which in our case is "getPosts". Query functions are used to fetch data from the server. useQuery always returns some of the most useful properties which are as listed below.

data
dataUpdatedAt
error
errorUpdatedAt
failureCount
isError
isFetched
isFetchedAfterMount
isFetching
isIdle
isLoading
isLoadingError
isPlaceholderData
isPreviousData
isRefetchError
isRefetching
isStale
isSuccess
refetch
remove
status

In our case we are using only isLoading, isError and data properties.The data that is fetched from the server is always stored in the data property returned by the useQuery hook. isLoading is a boolean property value that is set to true when data fetching is in progress. isError is also a boolean property value that is set to true when there is an error while fetching data from the server.

Understanding Svelte Reactivity

Mrityunjay-Palled — Sun, 04 Dec 2022 11:27:51 +0000

Reactivity is one of the most important and useful features of Svelte. It helps to keep the DOM in sync with the application state. Now let's take a look at the example.

As we see above, we are not using any state variables like we do in React to update the application state. In our example, whenever the value of count changes, Svelte reacts automatically and updates the application state, and keeps our application state in sync with the DOM. Svelte uses something called a "reactive declaration" to keep variables also in sync with each other. Let's understand with an example.

In the above example as we can see doubledCount is referring to the count variable whenever the value of count is doubled Svelte automatically re-renders the entire code again to update the value of doubledCount. In this way we can keep variables in sync with each other. In Svelte, any changes made to an array or object do not cause components to re-render on their own. Let's try to understand with an example.

In the above example, we are trying to push a random number between 1 and 10 into an array when the button is clicked. In the above case, no matter how many times we click the button, it does not cause a component to re-render, as Svelte on its own does not react to any changes that happens to arrays or objects. We can solve the above problem manually by causing a component to re-render. This can be done as shown below.

As we see above, we are causing a component to manually re-render
by assigning a variable to itself. As we know in Svelte assignment always causes a component to re-render. In this way, we are indirectly making this component react to any changes that happen to the array. Now, for every button click, a new random number will be displayed on the screen.

useState() Hook in React

Mrityunjay-Palled — Fri, 25 Nov 2022 16:31:43 +0000

In React, hooks are the special type of function that allows us to "hook into" React features. The useState() hook provides us with the ability to maintain state variables for the functional components. useState() causes a compnent to re-render whenever the value of the state variable changes

Importing useState() Hook in React App:

  import React, { useState } from "react";

We can import the React useState() hook as shown above.

useState() Syntax:

 const[count,setCount]=useState(0)

The useState() hook always takes an initial value, which in our case is 0. It always returns a state variable and a function to update a state variable; in our case, these two things are destructured into count and setCount, respectively.

Implementing a Simple Counter Using the useState() Hook:

import React, { useState } from "react";

const App = () => {

  const[count,setCount]=useState(0)

  const handleIncrement=()=>{
    setCount(count+1)
  }
  const handleDecrement=()=>{
    setCount(count-1)
  }
  return (
    <>
     <button onClick={handleDecrement}>-</button>
     <p>{count}</p>
     <button onClick={handleIncrement}>+</button>
    </>
  );
};

export default App;

In the above example, as we can see, the initial value of the state variable count is set to 0. When the user clicks on the "+" button, the handleIncrement function is fired, which in turn calls the setCount() function to increment the value of count by 1. In a similar way, when the user clicks on the "-" button handleDecrement function is fired, which in turn calls the setCount() function to decrement the value of count by 1.

Building a Small project:

This small project takes book name and author as input from the user and returns them back when the user click on the submit button

Before Clicking the Submit Button:

After Clicking the Submit Button:

We are going to build the above project in two ways

Using Multiple States
Using a Single State

Using Multiple States:

import React, { useState } from "react";

const Book = () => {
  const [bookname, setBookName] = useState("");
  const [author, setAuthor] = useState("");
  const [submittedData, setSubmittedData] = useState({});

  const handleNameChange = (event) => {
     setBookName(event.target.value)
  };
  const handleAuthorChange = (event) => {
    setAuthor(event.target.value)
  };
  const handelSubmit = () => {
     setSubmittedData({
        bookname:bookname,
        author:author
     })
  };

  return (
    <>
      <div>
        <label>Book Name</label>
        <input
          type="text"
          onChange={handleNameChange}
        ></input>
      </div>
      <div>
        <label>Author</label>
        <input
          type="text"
          onChange={handleAuthorChange}
        ></input>
      </div>
      <div>
        <button onClick={handelSubmit}>Submit</button>
      </div>
      <br />
      <span>Book Name: {submittedData.bookname}</span>
      <br />
      <span>Author: {submittedData.author}</span>
    </>
  );
};

export default Book;

In the above example, we are maintaining separate individual state variables, namely bookname, author, and submitData, for the corresponding actions.This is the simple and commonly used approach when working with the useState() hook.

Using a Single State:

import React, { useState } from "react";

const Book = () => {

  const [userData, setUserData] = useState({
    bookname: "",
    author: "",
    submittedData: {},
  });

  const handleNameChange = (event) => {
    setUserData((prev) => ({
      ...prev,
      bookname: event.target.value,
    }));
  };
  const handleAuthorChange = (event) => {
    setUserData((prev) => ({
      ...prev,
      author: event.target.value,
    }));
  };
  const handelSubmit = () => {
    setUserData((prev) => ({
      ...prev,
      submittedData: {
        bookname: prev.bookname,
        author: prev.author,
      },
    }));
  };

  return (
    <>
      <div>
        <label>Book Name</label>
        <input
          type="text"
          onChange={handleNameChange}
        ></input>
      </div>
      <div>
        <label>Author</label>
        <input
          type="text"
          onChange={handleAuthorChange}
        ></input>
      </div>
      <div>
        <button onClick={handelSubmit}>Submit</button>
      </div>
      <br />
      <span>Book Name: {userData.submittedData.bookname}</span>
      <br />
      <span>Author: {userData.submittedData.author}</span>
    </>
  );
};

export default Book;

In the above approach we are maintaining the single state variable
to handle all the corresponding actions. If we take a closer look
at setUserData() function we are accessing value previous state and updating it with the new values.This type of approach can be used when we are heavily dependent on previous state values.

Promises in JavaScript

Mrityunjay-Palled — Sat, 19 Nov 2022 08:51:53 +0000

Promise is basically a JavaScript object that produces some result to represent the eventual completion or failure of an asynchronous operation. Before moving further some prior knowledge of asynchronous JavaScript is required. Let's take a look at the general syntax of promises.

JavaScript promises usually consist of producing code and consuming code. Producing code uses "resolve" and "reject" as arguments. On one side, "resolve" is called when the job is finished successfully. On the other, "reject" is called when we have some errors.Consuming code consists of ".then" and ".catch" blocks. The ".then" block is executed when the job is successfully completed. On the other side, ".catch" is executed when we have some errors.

Promise States:

pending: This is the initial state of Promise
fulfilled: Promise is said to be fulfilled when it is resolved
rejected: Promise is said to be rejected when we have some
error while resolving

Implementing Promises:

Initially the promise will be in the pending state. As the consuming code is waiting for the result of producing code(either "resolve" or "reject") which is asynchronous in nature.

when the "if" condition becomes true, the promise gets resolved
after 2 seconds, now we can say the promise is fulfilled. The ".then" block of consuming code is executed, and the result will be logged to the console.

when the "if" condition becomes false, the promise gets rejected
after 2 seconds, now we can say the promise is in rejected state. The ".catch" block of consuming code is executed, and the result will be logged to the console.

Union Type in TypeScript

Mrityunjay-Palled — Sat, 12 Nov 2022 09:18:37 +0000

In TypeScript, the union type allows us to combine two or more types separated by a pipe symbol ('|').Before moving further, some prior knowledge of typescript is required.

Basic Union Type:

In the above example, we can see that we declared a variable named "id" by using a union type. As we can see now, we can assign either string or number values to that particular variable.

As we can see above, typescript throws an error if we try to assign a value of some other type; in our case, we are trying to assign a boolean value to "id," which is not possible because we declared "id" as the union type of string and number.

Union Type as an argument to a function:

As we can see above, the function myId takes "id" as an argument, which is a union type of string and number.

In the above example, we can see that typescript throws an error when we try to pass a boolean type as a parameter to the myId function.

Arrays with a union type:

As we see above, "id" is declared as an array with a union type of string and number.

When we try to add a boolean type to an array with a union type of string and number, typescript throws an error.

Union type as type aliases:

If we take a closer look at the above example, we can see that we are using myIds as a type alias. Type aliases are most useful when you want to chain many data types. As we see above, we are defining argument "id" using a type alias myIds.

fetch() in JavaScript

Mrityunjay-Palled — Sat, 05 Nov 2022 11:36:15 +0000

The fetch() method can be used as a replacement for XMLHttpRequest. It is used to get the data from the server asynchronously. The major
The difference between fetch() and XMLHttpRequest is that XMLHttpRequest uses callbacks and fetch() uses promises. Before going further some prior knowledge of promises is required.

Fetching data from a REST API:

In most cases, fetch() takes only one parameter, which is the request URL. In the above example, the "then" block is executed if the promise returned by fetch() is resolved; otherwise, the "catch" block is executed if the promise is rejected. Now let's see what other parameters we can pass to the fetch() method.

In the above example we can see that we are passing method and header properties along with request URL. method property can be any HTTP method ('GET','POST','PUT','DELETE','PATCH') and header property can be any suitable MIME type.

Posting data to a REST API:

In the above example, we are posting the data to an API, and while posting the data to an API, we added an additional body property to the fetch() method. The body property takes the data to be posted; in our case, the data to be posted is stored in the "_payload".

As we can see, the data is successfully posted to an API.

setTimeout(),setInterval() and clearTimeout() in JavaScript

Mrityunjay-Palled — Sat, 29 Oct 2022 11:32:41 +0000

setTimeout(): This method allows us to execute a piece of code after a certain amount of time.

In the above example, the myName function will be executed after 2 seconds (2000 milliseconds). For the setTimeout() function, the duration after which the code has to execute will be passed in milliseconds.

In the above example, we can see that we are passing a parameter to the myName function via the setTimeout() function.

setInterval(): This method executes a piece of code repeatedly with the fixed time delay between each call

In the above example, the myName function will be executed repeatedly after every 2 seconds (2000 milliseconds).We can also pass parameters to the setInterval() method, similar to the setTimeout() method as discussed before.

clearTimeout(): This method helps us to clear the timeout previously set by the setTimeout() method. The setTimeout() method returns an ID which must be passed to the corresponding clearTimeout() method

In the above example, the ID returned by the setTimeout() method is stored in the timeoutID and will be passed to the clearTimeout() method. In the above scenario, we have two buttons: one to show the alert and the other one to stop the alert.
We have a function named showAlert() that will display the alert message. The clearTimeout() function is used by stopAlert() to clear all timeout settings. The alert window will not be displayed if the stopAlert button is clicked before the completion of 2 seconds from when you clicked the showAlert button.