DEV Community: Yatharth Nigam

Using Mergify to automate merging Pull Requests.

Yatharth Nigam — Wed, 31 Aug 2022 05:42:49 +0000

Introduction
Mergify
Features
Automatic merges
Merge Queue
Installing
Configuration
Example
Conclusion

Introduction

Merging code into a branch can be a really time-consuming task, especially on large projects with many developers, or if you have a large number of Pull Requests that have to be reviewed, approved, and merged in the correct order. Also, if before your PR gets merged, other PRs get merged to main then your PR gets outdated. Then GitHub's CI tests will take place and if they get passed then we'll have to click on merge to get the PR merged. This can also be automated using Mergify. Pretty cool right!! So, in this blog, we'll be learning what Mergify is and how we can get started with it and use it to make our lives easier as a developer.

If you are more into visual learning, Do check out this video from Kunal Kushwaha:-
Video

Mergify

Mergify is a tool that helps prioritize, queuing, and automatically merge your pull requests. It can also rebase and update your branches while commenting, labeling, assigning, and closing your pull requests. In simple terms, Mergify is a GitHub pull request automation tool with a merge tool. But there's a lot more to it that it can do. The best part is you don't need to learn any other technology, it gets integrated into GitHub.

Features

Automatic merges

You can customize automatic merge behavior and once that criteria/conditions such as CI tests pass, your PRs will be merged automatically. This can be done by describing your pull request conditions in a YAML file. You can match any pull request based on any criteria.

Merge Queue

As I explained about outdated PRs in the introduction. You should not merge outdated PRs and it can be time-consuming to keep the PRs up to date. This is where the merge queue comes into the picture. Your pull requests are merged serially and tested by your CI one after the other, avoiding code regression.

When multiple pull requests are mergeable, they are scheduled to be merged sequentially, and are updated on top of each other. The pull request branch update is only done when the pull request is ready to be merged by the engine, for example when all conditions are validated.
That means that when a first pull request has been merged, and the second one is outdated like you can see in this image, Mergify will make sure that pull request 2 is updated with the latest tip of the base branch before merging.

Installing

First, we need to login into Mergify and allow access to our Github repository. This should install Mergify in our Github account.

Click on Enable Mergify and then select all repositories or any specific repository as per your requirement.

Now, you'll be seeing a dashboard. Here you can manage your selected repositories, write configuration files (write rules and then actions associated with them), merge queues, and many more.

Now, in order to connect your repository with Mergify in order to apply all the rules and actions you define, create a Mergify configuration in each repository where Mergify is used.

The configuration file should be created in the root directory of the repository and named either .mergify.yml or .mergify/config.yml or .github/mergify.yml. As the file name implies, the configuration file format is based on YAML, a simplistic file format for data.

Configuration

Configuration file documentation

You can get started by using the code in Config Editor in Mergify.

pull_request_rules:
  - name: Automatic merge on approval
    conditions:
      - "#approved-reviews-by>=1"
    actions:
      merge:
        method: merge

It consists of:-

Name of your rule explaining what the rule does.
Conditions to be checked and verified for the action to take place.
Actions that will take place upon verification of the conditions.

Example

Let's see an example. We'll try the merge configuration written above which automatically merges the pull request if one or more reviewers approve the pull request.

Here, you can see a pull request that has been raised.

I'll just approve the pull request.

Voila! the Mergify bot automatically merges the pull request.

You can also auto-assign reviewers based on the type of file changed. Example: If python files and modified in the PR then assign them to person A, if java files are changed, assign it to person B, and so on.

pull_request_rules:
  - name: assign PRs with Python files modified to Rishwanth
    conditions:
      - "check-success=ci/circleci: validate"
      - files~=\.python$
    actions:
      assign:
          add_users:
              - rishwanthram

This is just a small example among the endless amazing things that Mergify can do. Here is a list of actions that you can perform using Mergify.

Conclusion

In this blog, you have learned how to get started with Mergify. Mergify is a great tool that can help in the automation when working with version control systems and save a lot of time. I hope you learned something from this blog and will try Mergify. You can go to Mergify to read the official documentation and learn more about it.

PS: I've posted this blog on HashNode as well. If you like it, do upvote it in HashNode that'll be helpful. Link

Thanks For Reading!

Using Axios with React to Make API Requests

Yatharth Nigam — Tue, 23 Nov 2021 08:22:55 +0000

Introduction

I was working on a project that uses React and Material UI. For this project, I needed to fetch data from the server and I encountered some difficulties trying to fetch data from API. After some research and practice, I understood the concept and was able to fetch data using Axios.
So I've written this post to get you started with basics of Axios.
At the end of this article, you will be able to get data from a server.

Axios

Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
Axios is a Promised-based JavaScript library that is used to send HTTP requests. You can think of it as an alternative to JavaScript's native fetch() function.

Features

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

Installing

Using npm:

$ npm install axios

Using yarn:

$ yarn add axios

Where do we make http request?

In a class based component, requests are made in componentDidMount() lifecycle while in a functional component, requests are made in react lifecycle hooks i.e. useEffect.
Axios supports several request methods such as get, post, delete, put, etc.
Our major focus will be on get and post method which is commonly used.

Fetching data in Axios using the Get method

Axios offers a get method with at least one argument (url).

For example:

axios.get('url')
.then(response => {
console.log(response);
});

Axios uses promises and get returns a promise 'then' which is a method which takes a function as the input and the function will get executed once the promise resolves, that is when the data from the server is there.

The above code is a simple API fetch using axios. Now, let's explain:

Axios uses promises. get returns a promise 'then' which is a method which takes a function as the input and the function will get executed once the promise resolves, i.e. when the data from the server is there.

In the code, we create an arrow function where the fetched data from the server is passed in into a variable called getApi and called it in the lifecycle hooks. The second parameter [ ] empty array was passed so that the lifecycle hooks runs just once.

Among the response gotten back from the API, we only need to the data, that is why we stored response.data is passed in the state.

The output will be:

Error Handling

If we make any error in the URL or in the syntax, how we'll handle that error.

To handle this error, add a catch method which catches any error you get, after the then method.

.catch ((error) {
console.log(error)
});

Fetch data from the server using the async/await function

To use the async/await syntax, we need to wrap the axios.get() function call within an async function. We encase the method call with a try…catch block so that we can capture any errors. The variable “response” that receives the http data had to use await to ensure the asynchronous data was received before continuing.

Conclusion

In this post, you have learned how to make http requests to the server using axios and we have been able to get data from server using both promise and async/await. I am sure this article has made you axios journey a nice one. You can got to Axios to read the official documentation and learn more about it.

DEV Community: Yatharth Nigam

Using Mergify to automate merging Pull Requests.

TABLE OF CONTENTS

Introduction

Mergify

Features

Automatic merges

Merge Queue

Installing

Configuration

Example

Conclusion

Using Axios with React to Make API Requests

Introduction

Axios

Features

Installing

Where do we make http request?

Fetching data in Axios using the Get method

Error Handling

Fetch data from the server using the async/await function

Conclusion