DEV Community: Andrew Kao

How to cleanup local branches which tracking branch has been removed

Andrew Kao — Mon, 28 Jun 2021 08:03:49 +0000

We can use git fetch --prune to remove the remote-tracking branches that no longer exist on the remote. However, the local branches that track on them still exist. This post aims to tell you how to remove them using the git alias git cleanup and explain how it works.

TLDR

Step 1: Create a file git-cleanup under your PATH

Step 2: Paste the following scripts in git-cleanup:

#!/bin/bash
git fetch --prune && git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -D

Note: The first line(shebang) should be either #!/bin/bash or #!/bin/zsh

Step 3: Make it executable:

chmod +x ./git-cleanup

Step 4: Add git alias:

git config alias.cleanup "!git-cleanup"

Then, you can call git cleanup directly in your command line!

How it works

Let's look at the shell script git-cleanup. Assume that we have the following branches in the local:

main -> origin/main
branch1 -> origin/branch1
branch3

Note: -> means track on

And the branches in the remote

origin/main
origin/branch2

The branch1 is merged and has been removed in the remote. And the branch3 is still under development and hasn't been pushed to remote yet.

According to the assumptions, let's look at how the script works!

`git fetch --prune`

This command removes the remote-tracking branch in your local.
See the git documentation for more information.

`git branch -r`

Show all the remote branches. Documentation

`awk '{print $1}'`

awk is a program that helps you parse your stdin. In this case the stdin is the result of git branch -r:

origin/HEAD -> origin/main
origin/main
origin/branch2

We are interested in the first field of each line. So we use the action 'print $1' to list out all the remote branches. The result will be:

origin/HEAD
origin/main
origin/branch2

`egrep -v -f /dev/fd/0 <(git branch -vv | grep origin)`

This is the most important part of this script. Let's look at git branch -vv | grep origin first.
git branch -vv shows the local branches with their tracking branches in the following:

main       <SHA> [origin/main] last commit message
branch1    <SHA> [origin/branch1] last commit message
branch3    <SHA> last commit message

Thus, we use grep to filter the lines with origin, which means it has a remote-tracking branch. So the output of git branch -vv | grep origin will be:

main    <SHA> [origin/main] last commit message
branch1 <SHA> [origin/branch1] last commit message

Then, we are going to compare the result of git branch -r and git branch -vv | grep origin to find the local branches which remote-tracking branch has been removed. We are using egrep with -v options to select the lines which is not in the git branch -r. We use -f option because <(), which we call Process Substitution, will be treat as a file. /dev/fd/0 means stdin, which is git branch -r in our case.
Thus until here, the result should be:

branch1 <SHA> [origin/branch1] last commit message

`awk '{print $1}'`

Again, we are using awk to parse the stdin. The result should be:

branch1

`xargs git branch -D`

Finally, we are going to delete the branches in the previous result one-by-one using xargs. You can think of xargs works like:

for line in stdin
 git branch -D line

Here I use -D to force delete even though the branch isn't fully merged. If you don't want to delete the branches that aren't fully merged, please use -d

`#!/bin/bash`

It is very important to add this line at the first of the script. This is called shebang and it is use to specify which shell are we going to execute this script. We are leveraging Process Substitution, which isn't supported in sh. So if not specifying this, the script may be triggered by sh and throws error because sh doesn't recognize <().

Reference

stack overflow - How to prune local tracking branches that do not exist on remote anymore

How to understand the request deduplication in SWR

Andrew Kao — Sat, 17 Apr 2021 07:52:53 +0000

SWR is an amazing react library that makes fetching data easier and more performant. What I really like about the library is the cache and deduplication. However, if we don't understand the mechanism correctly, it will lead you to a disaster. This post aims to take a look at some tricky cases of SWR caching and explain the reason.

The options `onSuccess`

Although we can configure the options onSuccess with the same key in multiple hooks, only the one in the first mounted hook will be fired.

function Child ({index}) {
  const { /* ... */ } = useSWR('/api/user', {onSuccess: () => console.log(`success ${index}`)});

  return // ....
}

function App () {
  return <>
    <Child index={1}/>
    <Child index={2}/>
    <Child index={3}/>
    <Child index={4}/>
  </>
}

In the console:

success 0

There are four hooks with the key /api/user, but due to the request deduplication in SWR, only the first hook will trigger the request. That's why only the onSuccess in the first hooks is triggered.

So now we know that only the first hook of the same key will trigger the request, let's look at the following example

function Child ({index}) {
  useSWR('/api/user', {onSuccess: () => console.log("Child success")});

  return // ....
}

function Parent () {
    useSWR('/api/user', {onSuccess: () => console.log("Parent success")});
  return <Child/>
}

What will be the result in the console?

If your answer is "Child success", well done! The reason is simple. Because the hook inside the Child component will be mounted first, so the request will be triggered by it but not the one in Parent. So only the onSuccess in Child will be triggered.

The options `dedupingInterval`

Awesome! Now we have a clear understanding of how the request is being triggered and which onSuccess will be fired. Let's look at the following example

function Child ({index}) {
  const {data} = useSWR('/api/user', {onSuccess: () => console.log("Child success")});

  return // ....
}

function Parent () {
    const [showChild, setShowChild] = useState(false);
    useSWR('/api/user', onSuccess: () => console.log("Parent success"));

    useEffect(() => {
        setTimeout(() => {
            setShowChile(true);
        }, 3000)
    }, []);

  return showChild && <Child/>
}

What will be the result in the console?

In this case, both "Parent success" and "Child success" will be shown. The reason is all about the option dedupingInterval, which defaults to 2000ms. dedupingInterval means during the interval, all the useSWR with the same key will not fire request. So for the first and the second examples, the hooks are mounted within 2 seconds and this won't trigger another request. But for the third example, the second hooks are mounted after 3 seconds, which is greater than the dedupingInterval.

Also, we should notice that the data return from the hook in the Child will be the cached data at first instead of undefined. Please refer to this codesandbox to see the behavior.

Summary

Finally, we can understand the life cycle of SWR as follow:

When the hook mounted, it will first check if there is data in the cache. If there is, set it to the data
Then check if there is any hook with the same key mounted before during the depupingInterval. If not, trigger the request. After the request success, the onSuccess callback in the same hook will be fired.

Reading a File through Related Path Using Fetch API

Andrew Kao — Sun, 01 Dec 2019 09:20:52 +0000

In some cases, we may want to read files (.csv, .txt ….) while building a web app. There are several ways to do this. Today, I am going to share an easy way to read these files using Fetch API.

What is Fetch?

Before we start, let's figure out what Fetch API exactly is. According to MDN, Fetch is described as below:

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
Fetch is an API to request data through networks using Http request, and we could also use this to request local files!
Start Fetching Local Data!

fetch('../static/test.txt', {mode: 'no-cors'})
  .then(response => response.text())
  .then(data=> console.log(data))
  .catch(error => console.error(error));

Quite easy doesn't it? Now we can get our file in type of string since we use the method text(). If we are reading a JSON file, we can use json() . See more method we can handle with the response here.

DEV Community: Andrew Kao

How to cleanup local branches which tracking branch has been removed

TLDR

How it works

git fetch --prune

git branch -r

awk '{print $1}'

egrep -v -f /dev/fd/0 <(git branch -vv | grep origin)

awk '{print $1}'

xargs git branch -D

#!/bin/bash

Reference

How to understand the request deduplication in SWR

The options onSuccess

The options dedupingInterval

Summary

Reading a File through Related Path Using Fetch API

What is Fetch?

`git fetch --prune`

`git branch -r`

`awk '{print $1}'`

`egrep -v -f /dev/fd/0 <(git branch -vv | grep origin)`

`awk '{print $1}'`

`xargs git branch -D`

`#!/bin/bash`

The options `onSuccess`

The options `dedupingInterval`