mirror of
https://github.com/tuono-labs/tuono
synced 2026-07-25 21:02:45 -07:00
Add support for custom global state (#111)
* feat: add 'has_main_file' to App struct * feat: handle custom state from the main.rs file * feat: update tutorial template with new setup * fix: apply clippy hints * feat: add ApplicationState mention to documentation website * feat: update version to v0.13.0
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
import MetaTags from '../../components/meta-tags'
|
||||
|
||||
<MetaTags
|
||||
title="Tuono - Application state"
|
||||
canonical="https://tuono.dev/documentation/application-state"
|
||||
description="Learn how to add features to your Tuono application"
|
||||
/>
|
||||
|
||||
import Breadcrumbs, { Element } from '../../components/breadcrumbs'
|
||||
|
||||
<Breadcrumbs breadcrumbs={[{ label: 'Application state' }]} />
|
||||
|
||||
# Application state
|
||||
|
||||
The main reason Tuono is fast it's because it loads just the features that are needed for the project.
|
||||
|
||||
To defined them you need to fill the `ApplicationState` struct in the `./src/main.rs` file and they will be automatically available
|
||||
in all the handlers you will define across the application.
|
||||
|
||||
```rs
|
||||
// src/main.rs
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct ApplicationState {
|
||||
pub website_name: String,
|
||||
pub base_path: String
|
||||
}
|
||||
|
||||
pub fn main() -> ApplicationState {
|
||||
let website_name = "tuono".to_string();
|
||||
let base_path = "http://localhost:3000".to_string();
|
||||
|
||||
ApplicationState {
|
||||
website_name,
|
||||
base_path
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> For the sake of simplicity here we just enable a `String` but you can add Database connections or
|
||||
> HTTP clients (take a look [here](/documentation/tutorial/api-fetching) for an example with an HTTP client).
|
||||
|
||||
Now the `ApplicationState` is available on all the handlers as following:
|
||||
|
||||
```rs
|
||||
// src/routes/index.rs
|
||||
|
||||
#[tuono_lib::handler]
|
||||
// The first argument always is the Request
|
||||
// The ApplicationState arguments are optional. You can use just the ones you need
|
||||
// to use in the handler (with no specific order).
|
||||
async fn my_handler(req: Request, website_name: String) -> Response {
|
||||
...
|
||||
}
|
||||
```
|
||||
@@ -28,7 +28,7 @@ Clear the `index.rs` file and paste:
|
||||
```rust
|
||||
// src/routes/index.rs
|
||||
use serde::{Deserialize, Serialize};
|
||||
use tuono_lib::reqwest::Client;
|
||||
use reqwest::Client;
|
||||
use tuono_lib::{Props, Request, Response};
|
||||
|
||||
const ALL_POKEMON: &str = "https://pokeapi.co/api/v2/pokemon?limit=151";
|
||||
@@ -56,9 +56,73 @@ async fn get_all_pokemons(_req: Request, fetch: Client) -> Response {
|
||||
}
|
||||
```
|
||||
|
||||
> The first argument is always the request `req: Request` which contains the request data like the query parameters and the headers.
|
||||
> The rest of the arguments are optional and they don't need to be specified
|
||||
> if they are not used. Enabled out of the box a [Reqwest](https://docs.rs/reqwest/latest/reqwest/) HTTP client.
|
||||
> 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 terminal will complain now 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.
|
||||
|
||||
Let's fix these 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.
|
||||
|
||||
You can load them in the `ApplicationState` of your app inside the `./src/main.rs` file. This is the file that will be 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.
|
||||
|
||||
To install it just run in your terminal:
|
||||
|
||||
```bash
|
||||
$ cargo add reqwest
|
||||
```
|
||||
|
||||
A new entry has just been added to your `Cargo.toml` file.
|
||||
|
||||
```diff
|
||||
[package]
|
||||
name = "tuono"
|
||||
version = "0.0.1"
|
||||
edition = "2021"
|
||||
|
||||
[[bin]]
|
||||
name = "tuono"
|
||||
path = ".tuono/main.rs"
|
||||
|
||||
[dependencies]
|
||||
tuono_lib = "0.14.0" # the version might be different
|
||||
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 handling the Rust's dependencies (similarly as the `package.json` for Javascript).
|
||||
|
||||
Now let's define the `ApplicationState` in the `./src/main.rs` file.
|
||||
|
||||
```rs
|
||||
// Import here the just added reqwest library
|
||||
use reqwest::Client;
|
||||
|
||||
#[derive(Clone)]
|
||||
// Extend this struct with the feature you will need for your application
|
||||
pub struct ApplicationState {
|
||||
// This will be available to all your route handlers
|
||||
pub fetch: Client,
|
||||
}
|
||||
|
||||
pub fn main() -> ApplicationState {
|
||||
let fetch = Client::new();
|
||||
return ApplicationState { fetch };
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user