DEV Community: Jahir Fiquitiva

Create a Next.js API Route to retrieve GitHub Sponsors data

Jahir Fiquitiva — Sun, 31 Jul 2022 22:40:57 +0000

Intro

For some time I’ve been wanting to be able to get my current GitHub Sponsors data using an API. The API GitHub offers is currently set for GraphQL only, so it was a bit of a struggle to get the data, because I’m not really much familiar with GraphQL.

Besides that, setting up GraphQL in a project where only one query would be used, seemed like overkill for me. Anyway, I found out that we could send the GraphQL query in a normal REST API request using the body parameter. I used this repository for reference.

TL:DR; You can find the finalized project code at https://github.com/jahirfiquitiva/sponsors-edge-api

The GraphQL Query

It took me quite a while to explore the GitHub GraphQL API docs and build the query to get all the info needed so I’ll skip the details. I basically used their GraphQL Explorer and went through multiple Interfaces, Objects and other data, while doing a trial-and-error process to get the final query.

Some of the data I used was:

User
Sponsorable
SponsorConnection
SponsorsListing
SponsorsTierConnection
SponsorsTier
SponsorsTierAdminInfo
Sponsorship
Sponsor

And the final query is as follows:

{
  user(login: "jahirfiquitiva") {
    sponsorsListing {
      id
      tiers(first: 20) {
        nodes {
          ... on SponsorsTier {
            id
            adminInfo {
              sponsorships(first: 100) {
                totalRecurringMonthlyPriceInDollars
                nodes {
                  ... on Sponsorship {
                    sponsorEntity {
                      ... on User {
                        login
                        avatarUrl
                        name
                        websiteUrl
                      }
                      ... on Organization {
                        login
                        avatarUrl
                        name
                        websiteUrl
                      }
                    }
                    tierSelectedAt
                  }
                }
              }
            }
            monthlyPriceInDollars
            isOneTime
            isCustomAmount
            name
            description
          }
        }
      }
    }
    ... on Sponsorable {
      sponsors {
        totalCount
      }
    }
  }
}

What does this query do?

Basically, it gets the GitHub Sponsors listing data and the sponsors total count for the user defined at the query beginning: user(login: "jahirfiquitiva") here I used my GitHub username, but you can replace it with yours.

I am getting the listing data because I wanted to group my sponsors by their tier, as well as knowing the tier price and other details. If you only wanted to know the sponsors, regardless of their tier, a simpler query might be built using the sponsors property at the end of the query above.

From the Sponsors listing data, I get the different tiers. A tier is basically a donation option, for example, I have 6 monthly tiers: star, crystal ball, rocket, robot, lightning and diamond based on different price. This is because I “named” them although they don’t really have a name by default. This just helps me categorize my sponsors.

tiers(first: 20) will return the first 20 tiers from your sponsors listing. As I said, I have 6 monthly tiers, and 3 one-time tiers: 9 tiers in total, so even 20 is more than needed. Also, you can only have a total of 10 published monthly tiers and 10 published one-time tiers.

From each tier, I get the following info:

monthlyPriceInDollars: How much this tier costs per month in USD.
isOneTime: Whether this tier is only for use with one-time sponsorships.
isCustomAmount: Whether this tier was chosen at checkout time by the sponsor rather than defined ahead of time by the maintainer who manages the Sponsors listing.
name: The name of the tier. (iirc this name is just something like ${price} per month, which might not be very helpful depending on the use case)
description: The description of the tier. (in MarkDown format)
adminInfo: Object that contains the sponsorships property, which includes:
- totalRecurringMonthlyPriceInDollars: The total amount in USD of all recurring sponsorships in the connection whose amount you can view. Does not include one-time sponsorships.
- nodes: Which would correspond to data related to the sponsorship, including the sponsor information using the sponsorEntity property. sponsorEntity can be a User or Organization, so that’s why we access both.
  - Additionally, sponsorEntity includes tierSelectedAt which identifies the date and time when the given tier was chosen for this sponsorship.
- sponsorships(first: 100) returns the first 100 nodes for this sponsorship tier. I don’t really have many sponsors, so this one is fine for me. If you have more sponsors, you’ll have to look into pagination for this property.

If you need more information about your sponsors or the sponsorships, you can explore the docs.

Authorization

Before we actually use this query to access this data, we must create a Personal Access Token, as it requires authorization.

To do so, go to your GitHub account Settings, then go to Developer Settings and finally select Personal Access Tokens, or just follow this link: https://github.com/settings/tokens

There, click on the Generate new token button, give it a specific name, set the expiration period to one you’d like, although this one only reads data, so I think No expiration is fine.

The scopes required for this query are:

[ ] admin:org
- [x] read:org
[ ] user
- [x] read:user

Then scroll down and click on Generate token

Make sure to save the token in a safe and accessible place, as you won’t be able to access its value ever again.

Project setup

Let’s create a new NextJS project. We’ll use TypeScript in this guide, so we do it with the following command:

npx create-next-app --ts {folder}

Replace {folder} with the name of the folder you want the project to be at.

Now, open the project with your favorite editor or IDE.

Create a .env.local file with the Personal Access Token previously generated:

GH_PAT=ghp_XXxxXXxxXX

You can name the variable differently, but be careful when we access it in code later.

Initial request

Let’s quickly setup the API and the code to make an initial request.

Aiming to keep things organized, let’s create a folder named lib on the project root, and another folder named sponsors inside.

Create a file named request.ts :

const { GH_PAT: githubPat = '' } = process.env;

const graphQlQuery = `
...
`;

export const getSponsorsGraphQLResponse = async () => {
  return fetch('https://api.github.com/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${githubPat}` },
    body: JSON.stringify({ query: graphQlQuery }),
  }).then((res) => res.json());
};

Put the query content from the one showed at the beginning of this post, inside the backticks in graphQlQuery

Here we are getting GitHub Personal Access Token (PAT) via the GH_PAT environment variable (setup previously in .env.local), and creating a function that will do a simple fetch POST request to https://api.github.com/graphql sending the PAT in an Authorization header, then get the JSON body from the response and return it.

Now create a file named index.ts :

export * from './request';

Here we just export everything already exported in the request.ts file.

Now, let’s setup the API route. Go to file pages/api/hello.ts and rename it to sponsors.ts, there, modify it to look like this:

import type { NextApiRequest, NextApiResponse } from 'next';
import { getSponsorsGraphQLResponse } from './../../lib/sponsors/request';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const rawResponse = await getSponsorsGraphQLResponse();
  return res.status(200).json(rawResponse);
}

Here, we import the function previously created, then we call it using the async function handler , then we get the JSON body from it and return it as our API response.

Testing

Let’s test our simple API, in order to do that, run npm run dev or yarn dev in your Terminal or CMD from the project root.

Once the project is running, you’ll see this:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Next, go to http://localhost:3000/api/sponsors, if everything was setup correctly, you will see the raw response from the API, which format isn’t really nice to read or use, and looks like this:

{
  "data": {
    "user": {
      "sponsorsListing": {
        "id": "MDExxxxxxxxxxxxxxxx==",
        "tiers": {
          "nodes": [
            {
              "id": "MDExxxxxxxxxxxxxxxx==",
              "adminInfo": {
                "sponsorships": {
                  "totalRecurringMonthlyPriceInDollars": 2,
                  "nodes": [
                    {
                      "sponsorEntity": {
                        "login": "xxxx",
                        "avatarUrl": "https://avatars.githubusercontent.com/u/xxxxxx",
                        "name": "Xxxxx Xxxxx",
                        "websiteUrl": "https://jahir.dev/"
                      },
                      "tierSelectedAt": "2022-03-02T07:59:51Z"
                    }
                  ]
                }
              },
              "monthlyPriceInDollars": 2,
              "isOneTime": false,
              "isCustomAmount": false,
              "name": "$2 a month",
              "description": "Lorem ipsum dolor sit amet."
            },
            ...
          ]
        }
      },
      "sponsors": {
        "totalCount": 1
      }
    }
  }
}

I recommend using the JSON viewer extension, to read the response more easily

Typing raw response

Let’s define interfaces for the raw response from the GitHub GraphQL API. Create a file named types.ts under the lib/sponsors folder.

We can start with the deepest nested object, which would be the sponsorEntity

export interface SponsorEntity {
  login: string;
  name?: string;
  avatarUrl: string;
  websiteUrl?: string;
}

Now we can go one level up to sponsorships

interface Sponsorships {
  totalRecurringMonthlyPriceInDollars: number;
  nodes: Array<{
    sponsorEntity: SponsorEntity;
    tierSelectedAt?: string; // TimeStamp
  }>;
}

Since adminInfo only includes the sponsorships property, let’s go a couple levels up at a time:

export interface SponsorsTier {
  id: string;
  adminInfo?: {
    sponsorships: Sponsorships;
  };
  monthlyPriceInDollars: number;
  isOneTime: boolean;
  isCustomAmount: boolean;
  name: string;
  description?: string;
}

Now let’s go up to sponsorsListing

interface SponsorsListing {
  id: string;
  tiers: {
    nodes: Array<SponsorsTier>;
  };
}

And finally the whole response:

export interface SponsorsResponse {
  data?: {
    user: {
      sponsorsListing: SponsorsListing;
      sponsors: {
        totalCount: number;
      };
    };
  };
  message?: string;
}

Now, can import the SponsorsResponse interface in request.ts and type the getSponsorsGraphQLResponse function, so it will look like:

import type { SponsorsResponse } from './types';

...

export const getSponsorsGraphQLResponse = async (): Promise<SponsorsResponse> => {
  ...
}

Typing the response won’t affect anything in the API as it is at this point, but will allow us to transform that data into a more readable format in an easy way.

Transforming the raw response

First, let’s plan the desired object format to make the response easier to read:

{
  "tiers": [
    {
      "id": "MDExxxxxxxxxxxxxxxx==",
      "price": 2,
      "isOneTime": false,
      "isCustomAmount": false,
      "name": "$2 a month",
      "description": "Lorem ipsum dolor sit amet.",
            "totalEarningsPerMonth": 2,
      "sponsors": [
        {
          "username": "xxxx",
          "name": "Xxxxx Xxxxx",
          "avatar": "https://avatars.githubusercontent.com/u/xxxxxx",
          "website": "https://jahir.dev/",
          "since": "2022-03-02T07:59:51Z"
        },
        ...
      ]
    },
    ...
  ],
  "total": 1
}

With this format, we have an object with 2 properties: tiers and total. Tiers will have all its corresponding information including a sponsors object array with the information for each sponsor. There’s a couple fields renamed from the raw response, to make them a bit simpler:

login → username
avatarUrl → avatar
websiteUrl → website
tierSelectedAt → since
totalRecurringMonthlyPriceInDollars → totalEarningsPerMonth
totalCount → total

Let’s create the interfaces for this new object in lib/sponsors/types.ts:

export interface Sponsor {
  username: string;
  name?: string;
  avatar: string;
  website?: string;
  since?: string;
}

export interface Tier {
  id: string;
  price: number;
  isOneTime: boolean;
  isCustomAmount: boolean;
  name: string;
  description?: string;
  totalEarningsPerMonth: number;
  sponsors: Array<Sponsor>;
}

export interface Sponsors {
  tiers: Array<Tier>;
  total: number;
}

Finally, let’s create a function to transform the SponsorsResponse object into the Sponsors one, in the lib/sponsors/request.ts file:

import type {
  SponsorsResponse,
  Sponsors,
  SponsorEntity,
  Sponsor,
  SponsorsTier,
  Tier,
} from './types';

...

const transformSponsorEntityIntoSponsor = (
  entity: SponsorEntity,
  tierSelectedAt?: string
): Sponsor => {
  return {
    name: entity.name,
    username: entity.login,
    avatar: entity.avatarUrl,
    website: entity.websiteUrl,
    since: tierSelectedAt,
  };
};

const transformRawTierIntoTier = (tier: SponsorsTier): Tier => {
  return {
    id: tier.id,
    price: tier.monthlyPriceInDollars,
    isOneTime: tier.isOneTime,
    isCustomAmount: tier.isCustomAmount,
    name: tier.name,
    description: tier.description,
    totalEarningsPerMonth: tier.adminInfo?.sponsorships.totalRecurringMonthlyPriceInDollars || 0,
    sponsors: (tier.adminInfo?.sponsorships?.nodes || []).map((node) => {
      // Transform `SponsorEntity` into `Sponsor` using the `transformSponsorEntityIntoSponsor` function
      // and the `tierSelectedAt` property
      return transformSponsorEntityIntoSponsor(node.sponsorEntity, node.tierSelectedAt);
    }),
  };
};

export const transformResponseIntoSponsorships = (rawResponse: SponsorsResponse): Sponsors => {
  // Get the listing and sponsors object from the raw response.
  // We rename `sponsorsListing` to just `listing` for ease.
  // This is done locally only and does not modify the `rawResponse` object.const { sponsorsListing: listing, sponsors } = rawResponse.data?.user || {};
  if (!listing || !sponsors) {
    return { tiers: [], total: 0 };
  }
  return {
    // Transform `SponsorsTier` into `Tier` using the `transformRawTierIntoTier` function
    tiers: listing.tiers.nodes.map(transformRawTierIntoTier),
    total: sponsors.totalCount,
  };
};

Finally, let’s update our API to use the new function:

import type { NextApiRequest, NextApiResponse } from 'next';
import {
  getSponsorsGraphQLResponse,
  transformResponseIntoSponsorships,
} from './../../lib/sponsors/request';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const rawResponse = await getSponsorsGraphQLResponse();
  return res.status(200).json(transformResponseIntoSponsorships(rawResponse));
}

Now if we go to http://localhost:3000/api/sponsors, we will see a response with the format we initially planned for. 🎉

You can try the deployed version of this endpoint at https://sponsors-edge-api.vercel.app/api/sponsors

Extra: Edge Runtime

Additionally, and this is completely optional, we can modify the API to use the new Edge Runtime.

The Next.js Edge Runtime is based on standard Web APIs. The Edge API routes, enable you to build high performance APIs with Next.js. Using the Edge Runtime, they are often faster than Node.js-based API Routes.

To achieve this, we can modify the API to be like:

- import type { NextApiRequest, NextApiResponse } from 'next';
+ import type { NextRequest } from 'next/server';
import {
  getSponsorsGraphQLResponse,
  transformResponseIntoSponsorships,
} from './../../lib/sponsors/request';

export const config = {
  runtime: 'experimental-edge',
};

- export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+ export default async function handler(req: NextRequest) {
  const rawResponse = await getSponsorsGraphQLResponse();
-  return res.status(200).json(transformResponseIntoSponsorships(rawResponse));
+  return new Response(JSON.stringify(transformResponseIntoSponsorships(rawResponse)), {
+    status: 200,
+    headers: { 'content-type': 'application/json' },
+  });
}

As you can see, we change the type NextApiRequest for NextRequest, remove the res parameter from the handler function, and change the way we return the JSON response by using the Response object.

You can try the deployed version of this endpoint at https://sponsors-edge-api.vercel.app/api/sponsors-edge

Closing up

That’s it, now you have an API to get your GitHub sponsors and use that data to anything you’d like.

I have used it to list my sponsors in my donate page, for example. I hope it’s useful for you too.

You can find the finalized project code at https://github.com/jahirfiquitiva/sponsors-edge-api.

Have a great day! 👋😀

Things you can do to get started with development

Jahir Fiquitiva — Wed, 05 Jan 2022 23:48:35 +0000

I think a few of the first things you’ll need are: patience, time and willingness to learn.

Patience and time because learning is a long process. I think once you start, you will also keep finding more and more things to learn. You don’t need to do it all at once. Take your time, go at your own pace and you eventually will.

Really, try not to feel overwhelmed by the amount of things to learn. There’s always more coming and being built, but it’s ok to not know them all.
What I suggest you do is try to explore a few, find the ones you like or enjoy using the most and then learn and practice a lot about it.

The willingness to learn will keep you focused and help you overcome many challenges you might find during the process.

Choose a path

Now, to get started with development you will need to choose a path, and I know it might be hard at the beginning if you haven’t explored any before. I think you can start by asking yourself what kind of things you would like to build, be it websites, server-side work, mobile apps (for android or iOS), desktop apps along others.

The next things I will mention are mostly not focused on a single path, therefore you might be a bit lost on where to start. Like, which topics should you learn first for the path you’ve chosen?

Well, Developer Roadmaps is a great tool that can help you with that. It will show you the whole path you can follow to become a developer on a specific area. From the basics to complex stuff.

Find resources

Here’s a few sites that will provide resources or content for you to keep learning and get deep into the topics you want to explore.

FreeCodeCamp:
This platform includes articles and interactive courses to learn about algorithms and data structures, web, backend, python and much more. The content is translated to multiple languages and you can also even get certifications for what you learn. Everything completely free
Codewell:
Provides different challenging projects for you to build and practice your web development skills. You will get access to design assets so you can have a reference of what you would build. Many of them are free.
YouTube and Udemy
You will find many on these platforms. Courses on Udemy might not be free, but they frequently have discounts, and you can access them anytime, anywhere, and learn little by little, at your own pace.

Git and GitHub

Learning git is really important. If you learn it in your early days as a developer, you will already have a useful skill.

Git can help you have your projects stored somewhere on the internet, allowing you to work on them from anywhere, plus also allowing you to do collaborative work and even learn by helping others when contributing to their projects.

GitHub is one of the platforms you can use to store your projects. Other options are GitLab, BitBucket and there’s even self-hosted options such as Gitea.

Some resources to help you learn about these tools are:

Get better at search

While learning, you will usually find yourself searching for concepts, videos, tutorials and more about the topics you’re learning.

When searching, it’s important that you learn to find the best and most interesting/useful results.

One thing you can do is using search operators, such as:

Quotes:

Will provide results including exactly that text.

Example: android "FloatingActionButton"
Site:

The site operator will bring results from a specific website.

Example: javascript site:dev.to

With just these two, I’ve always found great results. You can find more advanced and complex search operators on this site.

Additionally, even if you’re primary language is other than English, I suggest you do search in English. You will find even more content and you will be working on an extra skill.

Searching can also help with getting more specific results. Say you want to create a rounded button for a website. When you search with those exact words, you will find results focused on achieving that, instead of long blog posts or videos telling a lot of other things too. Which isn’t bad at all, but I have found myself wanting to go straight to the point, and that specifying what I’m looking for has helped.

Learn by example

When I was starting, I usually looked at existing projects on GitHub and I still do every now and then. Exploring their code, how they are built, the tools, frameworks or libraries they use, all those things provide a wider view about the things I can do and learn about.

Besides seeing the code of others has helped me learn a bit about best practices, why a thing is chosen instead of another, how a project can be structured and more.

Learn with games

I just know a couple games that are focused on learning CSS, but if these exist, I’m sure there’s more out there to learn about other stuff. If you eventually get interested in CSS, these might come in handy:

These might result in a more interactive and fun way to learn.

Build!

You should really put the things you learn into practice. Don’t just stay with what you watch in videos, read in blogs or tutorials, and your notes. Build projects.

Many of the resources you might find, will encourage you or guide you to build projects while learning. If that’s the case, dare to build something else too. Build a different project where you can implement the same concepts and even a few more. Or give a twist to the project you’ve built and give your own touch to it.

Ask for help

Yeah, if you feel lost at some point, don’t know what to do next, or have trouble understanding a concept, feel free to ask for help. Asking for help is ok and there’s nothing bad about it.

On Twitter there’s a lot of people that wouldn’t mind sharing feedback and support. You just have to find the right ones and get in touch. What I’d suggest though, is you do it in public, via a tweet, instead of a private message. Believe it or not, many people might have a similar question, or get benefit of the reply you get so they can learn a bit more too.

You can also find many posts on dev.to with advice, guidance, questions and more. Go to that site and search for the topic you’re learning or use the site: operator in your favorite search provider/tool. dev.to is definitely a great place for learning and sharing knowledge, and people are always nice and kind and open to provide help if you need it.

That’s it for now. If you know more resources or things you think I could add to this post, feel free to share them with me.

Thank you for reading. Until next time 👋

Originally published at jahir.dev

Publishing a React component package on npm

Jahir Fiquitiva — Sun, 02 Aug 2020 23:01:07 +0000

Recently at work I had to create and publish a React component on npm, which is planned to be used in multiple projects with little functionality or styles changes.

Due to being a company project, I can't share the source code, but I will share some important snippets as needed.

It isn't as easy as expected 😕

When I was asked to do such task, we already had the component built and working as a create-react-app project, which was also a website and stuff.

I thought it would be as simple as running npm publish and that I was going to be able to import it in the other project right away.

Unfortunately it wasn't like that and I ran into compilation issues in the project that implemented it. So I started looking for the right way to do it.

Meet `create-react-library` 🤓

While searching how to achieve that, I came across with create-react-library.

I was looking for the simplest approach to do what I needed, and didn't want to deal with webpack or babel stuff and whatnot, so that project definitely came in handy because it was easy to use and pretty straight forward.

Using `create-react-library` 👨🏼‍💻

Creating a library project is as easy as running

npx create-react-library project-name

You will be prompted for some config, similar to create-react-app, but once done, you get the project and everything setup to work right away.

I liked it because I didn't have to do much else, and it also comes with an example project inside, that uses your library, so you can test everything will be working properly after you've "published" the package.

Next thing for me was just migrating the component from the previous project to the library project. It was pretty much a copy-paste process with some little refactoring, but nothing significant else.

The challenges 😬

Despite requiring no configuration, I encountered a couple problems during the process...

1. React Fragments 🖼

I was getting compilation errors for using React Fragments like this <>{...}</>, so I changed that to <React.Fragment>{...}</React.Fragment> and they stopped... well, kinda.

Then I started getting ReferenceError: Fragment is not defined errors. It wasn't easy to solve so I asked for help in the Unicorn Utterances discord server, and Corbin found an issue in the create-react-library repo that mentioned adding --jsxFragment React.Fragment to the build and start scripts.

And then it was all working again.

2. Included SVGs 📐

The component included an SVG (the company logo), imported and used something like this:

import CompanyLogo from './company-logo.svg'
...
return (
  ...
  <img src={CompanyLogo} alt={'Company Logo'} />
  ...
);

It worked fine locally, even with the local project that imported the component library, but after published in npm and imported in the other project, compilation failed, because the svg file was "compiled" with a different name, similar to company-logo~aBcDe.svg. Notice the ~ character. That was the issue, because it can't be used in JS var names.

The quick solution, was to make it a prop and allow passing it to the component, so it wasn't compiled by the library but the other project. Again, I didn't want to deal with webpack or babel or any extra config, so this was the easiest for me.

3. CSS 🎨

I was using css modules for the library components, but I also needed a little of normal css, because the component used other components from rmwc, and they use that and I needed to override a few styles.

From what I understood create-react-library the normal css and the module css files would coexist and work along normally, but for some reason, it wasn't like that, and the normal css was still compiled as a module, i.e. the compiled classes names would have some random suffix to make them unique, and therefore none of the overriden styles were applied.

At the end, I ended up changing the css modules to normal css, so no suffix was added during compilation, and then it all worked as expected.

Closing up 👋🏼

So, after struggling with those few things, I was able to use the component from the library without any other issues, and everything was working as expected, including react hooks like useContext and useReducer.

Also, create-react-library definitely allowed publishing the package by just running npm publish as I wanted it to be.

There are probably other approaches to build a react component(s) package, but this one worked for me and was easy to use, so I liked it and wanted to share my experience.

If you have further questions, I'll try to answer.
Find more about me @ jahir.dev

Special thanks to Corbin Crutchley, Alex Dueppen and Robert Mennell from the Unicorn Utterances discord server, who helped me solve the issues and get the library working.

Cover image is from unsplash.com

Direct download any Xcode

Jahir Fiquitiva — Mon, 29 Oct 2018 00:45:09 +0000

Downloading Xcode from the App Store, or even the .xip file while using a browser, regardless of which one it is, can be a pain when your connection is not as stable and fast as others' and when the download can be interrupted at any time and you're most likely going to have to restart the whole download.

This just happened to me and I'm writing this as a note-to-self but also to share this with others who might be facing a similar situation.

Here's what I did to download it…

1. Install Xcode Command Line Tools

It is a small package of ~183Mb which I think it's enough to be downloaded via your browser.

Go to Developer Downloads site
Sign in with your Apple ID if you need to
Search for the command line package you want to download (I'm going to use the latest stable Command Line tools for Xcode 10 and macOS Mojave).
Press the link on the right side and wait for download to complete
Once downloaded, install it as any other .dmg package.

2. Install Homebrew and wget

I used Homebrew to install wget. There might be another way, but this is how I did it. 😅

Open Terminal
Run

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Follow the prompted steps
Once done, run

brew install wget

3. Install and get cookies.txt from your browser

Download for Google Chrome (Don't have a link for other browsers, sorry)
Visit the Developer Downloads site again.
Click the cookies.txt icon
In the top part you will see a link that says 'click here'. Click it to download the cookies.txt file
Save it wherever you want

4. Get Xcode direct download link

Visit the Developer Downloads site once more.
Select the Xcode version you want to download (I'm going to download Xcode 10).
Right-click the link on the right side an select "Copy link address"
Alternatively, visit this StackOverflow answer for links to all Xcode versions.

5. Start download

Open Terminal and go to the location of your cookies.txt file.
Now run

wget --load-cookies=cookies.txt -c https://download.developer.apple.com/Developer_Tools/Xcode_10/Xcode_10.xip

Replace the link at the end with the one you want for the file you want to download which you got in last step.
Wait for the download to finish.

Notes:

Add -b to the download command to run it in the background, although it is easier to check progress and state without it.
The -c option in the command allows you to continue with the download even if you close your terminal, or cancel the process, or restart your laptop, etc.

6. Install Xcode

Open the downloaded file so it starts uncompressing.
Move the uncompressed file to the Applications folder and you're done!

Hope you find this useful and please don't forget to share it with others!
Get to know more about me @ jahir.xyz
Image credits: unsplash.com
Originally published on medium.com