How To Integrate Github Using Fetch API In LWC?
In this blog, you will learn how you can integrate Github API using native Fetch API in lightning web component.
You can consider this as an advanced version of XMLHttpRequest. This API is more powerful and easy to use.
The Fetch Web API provides a global fetch() method which can be used in JavaScript to perform any kind of callout to an external system across the network and get the data easily.
The Promise returned from fetch() method won’t reject on HTTP error status even if the response is an HTTP 404 or 500.
Instead, the Promise will resolve normally.
The OK property of the response is set to true if the callout is successful and it's set to false if the response isn’t in the range 200–299 and it will only reject on network failure or if anything prevented the request from completing.
Sample Code
LWC.html
<template>
<div class="card" style="background-color:white">
<lightning-input type="search" value={username} onchange={updateUsername} label="Enter Github Username"></lightning-input>
<lightning-button label="Search" variant="brand" style="margin-top: 40px;margin-left: 10px;" onclick={getGithubResult}></lightning-button>
</div>
<div if:true={userPopulated}>
<div class="card">
<div class="img">
<img src={user.image}>
</div>
<div class="infos">
<div class="name">
<h2>{user.name}</h2>
<h4>@{username}</h4>
</div>
<p class="text">
{user.about}
</p>
<span class="text">
<h4>Blog - {user.blog}</h4>
</span>
<span class="text">
<h4>Twitter - {user.twitter}</h4>
</span>
</br>
<ul class="stats">
<li>
<b><h3>{user.repos}</h3></b>
<b><h4>Repos</h4></b>
</li>
<li>
<b><h3>{user.gists}</h3></b>
<b><h4>Gits</h4></b>
</li>
<li>
<b><h3>{user.followers}</h3></b>
<b><h4>Followers</h4></b>
</li>
</ul>
<div class="links">
<button class="follow" style="margin-left: -10px;">Follow</button>
<button class="view" style="margin-left: 10px;" onclick={handleRedirect} >View profile</button>
</div>
</div>
</div>
</div>
</template>
LWC.js
import { LightningElement } from 'lwc';
const GITHUB_URL = 'https://api.github.com/users/';
export default class GithubUserDetails extends LightningElement {
username;
user = {};
get userPopulated() {
return this.user && this.user.id;
}
get githubURL() {
return 'https://www.github.com/' + this.username;
}
updateUsername(event) {
this.username = event.target.value;
}
getGithubResult() {
if(this.username) {
this.user = {};
fetch(GITHUB_URL + this.username)
.then(response => {
console.log(response);
if(response.ok) {
return response.json();
} else {
throw Error(response);
}
})
.then(githubUser => {
this.user = {
id: githubUser.id,
name: githubUser.name,
image: githubUser.avatar_url,
blog: githubUser.blog,
about: githubUser.bio,
repos: githubUser.public_repos,
gists: githubUser.public_gists,
followers: githubUser.followers,
url: githubUser.html_url,
twitter: githubUser.twitter_username,
blog: githubUser.blog,
email: githubUser.email,
};
})
.catch(error => console.log(error))
} else {
alert('Please specify a username');
}
}
handleRedirect(){
var redirectWindow = window.open(this.user.url, '_blank');
redirectWindow.location;
}
}
LWC.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
<target>lightning__AppPage</target>
<target>lightning__Tab</target>
</targets>
</LightningComponentBundle>
LWC.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
align-items: center;
justify-content: center;
background-color: #ADE5F9;
min-height: 100vh;
}
img {
max-width: 100%;
display: block;
}
ul {
list-style: none;
}
/* Utilities */
.card::after,
.card img {
border-radius: 50%;
}
body,
.card,
.stats {
display: flex;
}
.card {
padding: 2.5rem 2rem;
border-radius: 10px;
background-color: rgba(255, 255, 255, .5);
max-width: 500px;
box-shadow: 0 0 30px rgba(0, 0, 0, .15);
margin: 1rem;
position: relative;
transform-style: preserve-3d;
overflow: hidden;
}
.card::before,
.card::after {
content: '';
position: absolute;
z-index: -1;
}
.card::before {
width: 100%;
height: 100%;
border: 1px solid #FFF;
border-radius: 10px;
top: -.7rem;
left: -.7rem;
}
.card::after {
height: 15rem;
width: 15rem;
background-color: #4172f5aa;
top: -8rem;
right: -8rem;
box-shadow: 2rem 6rem 0 -3rem #FFF
}
.card img {
width: 8rem;
min-width: 80px;
box-shadow: 0 0 0 5px #FFF;
}
.infos {
margin-left: 1.5rem;
}
.name {
margin-bottom: 1rem;
}
.name h2 {
font-size: 1.3rem;
}
.name h4 {
font-size: .8rem;
color: #333
}
.text {
font-size: .9rem;
margin-bottom: 1rem;
}
.stats {
margin-bottom: 1rem;
}
.stats li {
min-width: 5rem;
}
.stats li h3 {
font-size: .99rem;
}
.stats li h4 {
font-size: .75rem;
}
.links button {
font-family: 'Poppins', sans-serif;
min-width: 120px;
padding: .5rem;
border: 1px solid #222;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: all .25s linear;
}
.links .follow,.links .view:hover {
background-color: #222;
color: #FFF;
}
.links .view, .links .follow:hover{
background-color: transparent;
color: #222;
}
@media screen and (max-width: 450px) {
.card {
display: block;
}
.infos {
margin-left: 0;
margin-top: 1.5rem;
}
.links button {
min-width: 100px;
}
}
Demo
Posted By :
Date :
Date :
Follow Us