Leveraging GraphQL API Over Web Scraping: A Backend Approach
Tags: api, graphql, backend, datascience
Published: 2023-03-17 04:41:45

## {% details Outlines %}
- [Introduction 🌟](#introduction)
- [Where I Went Wrong 🤦‍♂️](#where-i-went-wrong)
- [Why API (Backend) is Better than Web Scraping (Frontend) 🆚💻](#why-api-backend-is-better-than-web-scraping-frontend)
- [Code Walkthrough 💻🚶‍♂️](#code-walkthrough)
- [Conclusion 🤝✅](#conclusion)
{% enddetails %}

## Introduction 🌟

In this post, we will analyze two different approaches to extracting information from a website. The first approach is web scraping from the frontend, which didn't work effectively for our specific use case. The second approach is using GraphQL API to fetch data directly from the backend. We will dive into why the API-based approach is more advantageous than web scraping in our case.

Our task was to filter and retrieve Ethereum addresses for the Blockchain category and set the Lock Creation Date to the previous day on a [particular website](https://www.team.finance/view-all-coins).

## Where I Went Wrong 🤦‍♂️

Initially, we attempted to scrape data from the website using frontend scripting, but it wasn't efficient nor accurate. Here's the baseline when a user does it manually:

{% embed https://youtu.be/geTEK7i-WRs %}

Let's focus on the `lower` and `upper` attributes of the request. The image below shows a manual request:

![manual request time range](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vghdmedab9lhh28zhbs.png)

This video shows an automated request using a script:

{% embed https://youtu.be/QopXyBp4dXQ %}

{% embed https://gist.github.com/ranggakd/38ace0f50b33ac2db671abf0b589212d %}

My script simulated writing instead of clicking on the datepicker. I chose this approach because it was easier to code the writing simulation than to click on the datepicker. However, these two approaches produced different values that I didn't expect. Now, take a look at the `lower` and `upper` attributes of the automated request.

![automated request time range](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86nz2eatbjy57uqyrpoh.png)

The boundaries above are incorrect because they do not always point at 0 o'clock in the morning for the previous day. After discussing with a friend, we decided to try a backend approach using the GraphQL API.

## Why API (Backend) is Better than Web Scraping (Frontend) 🆚💻

By inspecting the website using the Developer Tools, we discovered that the client sends GraphQL requests to the server. GraphQL is a query language and runtime for APIs, enabling clients to request exactly the data they need. This allows for more efficient and flexible data retrieval than traditional REST APIs.

In our case, the GraphQL API offers several advantages over web scraping:

1. __Accuracy__: The data we need is fetched directly from the backend, ensuring accuracy and consistency with the website's actual data.
1. __Efficiency__: Using the API reduces the need to parse and extract information from the HTML code, making the process more efficient.
1. __Reliability__: APIs are designed to be consumed programmatically, making them more reliable than scraping the ever-changing structure of a web page.
1. __Flexibility__: GraphQL allows us to request only the data we need, reducing the amount of data transfer and processing required.

## Code Walkthrough 💻🚶‍♂️

In the [successful Jupyter Notebook](https://github.com/ranggakd/DAIly/blob/main/projects/ethereum%20address/Extract_Smart_Contract_Address_Using_GraphQL_API.ipynb), we used the gql library to interact with the GraphQL API. Here's a high-level overview of the process:

1. Install and import the required libraries.
{% embed https://gist.github.com/ranggakd/338f3b58c5d04dd9413fd2a8ce4f943f %}
1. Define the GraphQL endpoint URL and set the time range for the previous 24 hours.
{% embed https://gist.github.com/ranggakd/80d660672fc69626ce5a45afd33151c7 %}
1. Create a GraphQL client using the AIOHTTPTransport and the endpoint URL.
{% embed https://gist.github.com/ranggakd/ec7a90452f0d2d0061f884826747d638 %}
1. Define the GraphQL query with placeholders for the time range and pagination limit.
{% embed https://gist.github.com/ranggakd/96deb4f67bf35c18c298a83fc5f7050f %}
1. Execute the query asynchronously, increasing the pagination limit until all data is retrieved.
{% embed https://gist.github.com/ranggakd/c5977ada3b7a1bca6470152ca00eb4b5 %}
1. Extract the token addresses from the query result and store the complete response in a JSON file.
{% embed https://gist.github.com/ranggakd/d35ce2ca23e098ba507353ea82b37993 %}

This approach allowed us to fetch the Ethereum addresses directly from the backend, providing a more efficient and reliable solution compared to web scraping. The complete code is available [here](https://github.com/ranggakd/DAIly/blob/main/projects/ethereum%20address/Extract_Smart_Contract_Address_Using_GraphQL_API.ipynb) for exploration.

## Conclusion 🤝✅

In this post, we compared two approaches to extracting information from a website: web scraping from the frontend and using the GraphQL API from the backend. For our specific use case, leveraging the GraphQL API proved to be a more advantageous solution due to its accuracy, efficiency, reliability, and flexibility.

It's important to note that the best approach may vary depending on the specific website and data requirements. In some cases, web scraping might be the only option if no API is available. However, when possible, using an API is generally a more efficient and reliable way to fetch data programmatically.

We hope this post provided valuable insights into the benefits of using APIs, particularly GraphQL, over web scraping when extracting data from websites. I will be busy filling in my current project on this repo, but there is more to come! Check out my portfolio repository here: {% embed https://github.com/ranggakd/DAIly %}

Follow me anywhere {% embed https://beacons.ai/ranggakd %}