Adding `leptos_query_devtools` library as a dependency

Run this command in a terminal, in your project's directory:

cargo add leptos_query_devtools

To add it manually, edit your project's Cargo.toml file and add to the [dependencies] section:

leptos_query_devtools = "0.1.3"

The leptos_query_devtools library will be automatically available globally. Read the leptos_query_devtools library documentation.

Back to the crate overview.

Readme

Leptos Query Devtools

This crate provides a devtools component for leptos_query. The devtools help visualize all of the inner workings of Leptos Query and will likely save you hours of debugging if you find yourself in a pinch!

Features

csr Client side rendering: Needed to use browser apis, if this is not enabled your app (under a feature), you will not be able to use the devtools.
force: Always show the devtools, even in release mode.

Then in your app, render the devtools component. Make sure you also provide the query client.

Devtools will by default only show in development mode. It will not be shown, or included in binary when you build your app in release mode. If you want to override this behaviour, you can enable the force feature.

Quickstart

To use the devtools, you need to add the devtools crate:

cargo add leptos_query_devtools

Then in your cargo.toml enable the csr feature.

Hydrate Example

If your app is using SSR, then this should go under the "hydrate" feature.

[features]
hydrate = [
    "leptos_query_devtools/csr",
]

CSR Example

If your app is using CSR, then this should go under the "csr" feature.

[features]
csr = [
    "leptos_query_devtools/csr",
]

Then in your app, render the devtools component. Make sure you also provide the query client.


use leptos_query_devtools::LeptosQueryDevtools;
use leptos_query::provide_query_client;
use leptos::*;

#[component]
fn App() -> impl IntoView {
    provide_query_client();

    view!{
        <LeptosQueryDevtools />
        // Rest of App...
    }
}

Now you should be able to see the devtools mounted to the bottom right of your app!

Adding leptos_query_devtools library as a dependency

Adding `leptos_query_devtools` library as a dependency