Remote data

Sometimes data cannot be stored locally. What if you want to track the latest value of a currency published by another organization? Or query your company's database for the latest sales?

In that case, you need to fetch the data before plotting it. Let's find out how.

Members only
5 minutes read

🎣 What is data fetching

Until now, our datasets were sitting right next to our React code, in a data.ts file, like any other const.

Sometimes that's good enough for your project. But sometimes, you have to represent data that updates regularly. In this case you have to get the information from somewhere else on the internet. That's a process called data fetching.

Diagram illustrating the data fetching process between a React app and a remote server

Data fetching split in 4 main steps

The process starts with a request. We use a JavaScript function called fetch that expects at least one argument: a URL we call an endpoint.

This request then reaches the endpoint. In other words, it lands on a web server that exposes an API: a set of predefined endpoints, each returning a specific piece of data. That's step 2.

The web server generates a response: a JSON file that comes back to us, the client. We can now update the state of our application and display the result.

It's important to understand that this process is asynchronous. We first load the application with empty graphs. Then we fetch the data, which can take a while, but the app stays usable in the meantime. When the data arrives, we update the application.

⚠️ Some APIs are public (open to anyone). Others are private and expect proof that you're allowed to ask, through authentication.

Try it

The word API can sound intimidating, because it covers many different use cases and is often poorly explained.

So let's try something concrete. The URL below is a public endpoint of the CoinGecko API. Copy it, paste it into a new tab, and you'll see a JSON response with the current Bitcoin price. That's it: you just made an API request!

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd

Now we want to do the same thing, but from JavaScript.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! 🙏

← Previous

Messy data

Next →

Heavy data