diff --git a/src/routes/documentation/tutorial/api-fetching.mdx b/src/routes/documentation/tutorial/api-fetching.mdx index 808b914..8b41107 100644 --- a/src/routes/documentation/tutorial/api-fetching.mdx +++ b/src/routes/documentation/tutorial/api-fetching.mdx @@ -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: @@ -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] @@ -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)] @@ -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 @@ -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'