Skip to content

Commit

Permalink
Improve text of api-fetching.mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
nicolasgasco committed Feb 27, 2025
1 parent 902dbaa commit 75f344e
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions src/routes/documentation/tutorial/api-fetching.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ import Breadcrumbs from '@/components/Breadcrumbs'

# API fetching

The goal is to use the [PokeAPI](https://pokeapi.co/docs/v2) to list all the Pokémon of the first generation (the best one, btw) and then reserve a dynamic page for each one separately.
In this tutorial, we will fetch a list of all first generation Pokémons (the best ones, btw) from the [PokeAPI](https://pokeapi.co/docs/v2) and create a dynamic page for each of them.

## Fetch all the Pokémon

To start, let’s fetch all of them from the root page. Since we want to render them on the server side, we are going to need to implement the logic in the `index.rs` file.
Let's start by fetching the data on the root page. Since we want to render the Pokémons on the server, we need to implement the logic in the `index.rs` file.

Clear the `index.rs` file and paste:

Expand Down Expand Up @@ -56,31 +56,31 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
}
```

> The first argument is always the request `req: Request` which contains all the request's data like the query parameters and the HTTP headers.
> The rest of the arguments represents the [ApplicationState](/documentation/application-state) and are optional.
> The first argument is always `req: Request`, which contains all the request data like the query parameters and the HTTP headers.
> The other arguments represent the [ApplicationState](/documentation/application-state) and are optional.
The terminal will complain now for two reasons:
After doing this, the terminal will complain for two reasons:

1. We don't have imported any `reqwest` crate
2. The second argument `fetch: Client` has not been defined yet as global state.
1. We haven't imported the `reqwest` crate
2. The second argument `fetch: Client` hasn't been defined as global state yet.

Let's fix these in the next section.
Let's fix them in the next section.

## Application state

Compared to the common Javascript runtimes, Tuono is fast because only the features you need for your project will be loaded.
Compared to JavaScript runtimes, Tuono is lightning fast because it only loads the features that you need for your project.

You can load them in the `ApplicationState` of your app inside the `./src/app.rs` file. This is the file that will be executed just once at the very beginning of your application.
You can load them in the `ApplicationState` inside the `./src/app.rs` file. This file is executed just once at the very beginning of your application.

> For the tutorial we will use [Reqwest](https://docs.rs/reqwest/latest/reqwest/) which is one of the most famous HTTP library.
> For the tutorial we will use [Reqwest](https://docs.rs/reqwest/latest/reqwest/), which is one of the most popular HTTP libraries.
To install it just run in your terminal:
To install it, run in your terminal:

```sh
cargo add reqwest
```

A new entry has just been added to your `Cargo.toml` file.
A new entry was added to your `Cargo.toml` file.

```diff
[package]
Expand All @@ -98,13 +98,13 @@ serde = { version = "1.0.202", features = ["derive"] }
++ reqwest = "0.12.9" # the version might be different
```

> The `Cargo.toml` is the manifest file of your application, in which you handle Rust's dependencies
> (similarly as the package.json for Javascript).
> The `Cargo.toml` file is the manifest of your application and it contains Rust's dependencies
> (similar to the `package.json` file for JavaScript).
Now let's define the `ApplicationState` in the `./src/app.rs` file.

```rs
// Import here the just added reqwest library
// Import the reqwest library
use reqwest::Client;

#[derive(Clone)]
Expand All @@ -120,12 +120,12 @@ pub fn main() -> ApplicationState {
}
```

Now the `fetch: Client` argument is available in the above defined handler, and the terminal should not complain anymore.
Let's see in the next section how to show the fetched data on the browser.
Now that the `fetch: Client` argument is available in the handler, the errors in the terminal should have disappeared.
In the next section, we'll render the fetched data in the browser.

## Handling the page UI

Now the Pokémon are correctly fetched and hydrated on the client side, so we can actually use them. Clear the `index.tsx` file and paste:
With the Pokémons correctly fetched and hydrated on the client, we can finally render them. Clear the `index.tsx` file and paste:

```tsx
// src/routes/index.tsx
Expand Down Expand Up @@ -178,7 +178,7 @@ export default function IndexPage({
}
```

Refresh the browser now! A bit ugly, but all the Pokémon are finally printed on screen!
Time to refresh the browser! Still a bit ugly, but all the Pokémon are finally on the screen!

import NavigationButtons from '../../../components/NavigationButtons'

Expand Down

0 comments on commit 75f344e

Please sign in to comment.