Science & Technology

TanStack Router: Query Parameters & Validation

by Dev Leonardo

📚 Temas principales

Validar los parámetros de búsquedaEl video muestra cómo definir los parámetros de búsqueda válidos para una ruta y cómo TanStack Router usa esa definición para inferir sus tipos. 1:03
Usar Valibot para validarEn lugar de escribir un validador personalizado, se puede usar una biblioteca como Valibot para analizar los parámetros y comprobar que cumplen el esquema. 4:39
Sincronizar la interfaz con la URLAl navegar a la misma ruta con valores de búsqueda actualizados, los cambios en campos de texto, casillas y selectores quedan reflejados en la URL. 6:14

✨ Conclusiones clave

Los enlaces deben incluir los parámetros requeridosSi una ruta define parámetros de búsqueda, los enlaces a ella deben proporcionar esos valores; el tipado ayuda a detectar omisiones. 3:07
La URL puede conservar el estadoMantener los filtros en los parámetros de búsqueda permite compartir un enlace que restaura la configuración, sin guardar ese estado en React. 8:23

🧠 Lecciones aprendidas

Leer los parámetros tipadosEl hook de búsqueda de la ruta permite acceder a los valores que se definieron y validaron. 2:36
Los valores opcionales evitan valores predeterminados obligatoriosCon un esquema que permite parámetros opcionales, se pueden quitar los valores predeterminados y aceptar una búsqueda vacía. 5:41

🏁 Conclusión y próximos pasos

Próximo tema: rutas autenticadasEl siguiente episodio tratará sobre proteger rutas para que solo puedan acceder usuarios que hayan iniciado sesión o tengan los permisos necesarios. 8:54

development 2022 tips tricks tutorial howto opensource open source web javascript typescript vscode Visual Studio Code github git dev 2023 oss open source software tanstack tanstack router tanstack query router routing react router react-router reactjs react typesafe rotuer query search query params params query parameters search parameters paramters parameters

Transcript excerpt

0:00 query parameters can now entirely replace your state manager with tack router welcome to the third episode of this series on TanStack Router today we're going to see how this Library will help us defining and validating query parameters and how they can basically act as a state manager in short by sending the URL of your application you can immediately send a snapshot of your state with basically everyone enough up talking let's start coding we can create immedately a search. 6 page and as usual

0:32 if you run npm run Dev our Vite plugin will basically generate the file for us so now that we have this root we can create a link in our root let's create a link here so that we can access to our page there it is if we open the browser we can find okay here if I click search Hello search and this is our page now let's configure our query parameters the first thing you might want to do is well

1:03 we're defining what is considered as valid so why not just creating a type in this case this type has a couple primitive values and another subtype with a union of literals now how can we tell T router that we only want query parameters that are exactly matching this type as usual in the create fire root there are quite a lot of method you can add here and if you search for validate search well this is exactly the

🔒 The full, searchable transcript is available with Pro.

Suggestions