TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

rare-sapphire

11/20/2024

Is using tanstack query inside the route's loader function deferred by default?

Hello I'm new to both tanstack router and tanstack query, but very interested in them. This is an example code from the docs when using tanstack query inside the loader function:

``ts
export const Route = createFileRoute('/posts')({
  // Use the

loader` option to ensure that the data is loaded...

notable-jade

11/19/2024

Usage of useParams in parent route segment for child param when child is not available

Lets say I have books.$bookSlug.pages.$pageId.tsx and books.$bookSlug.tsx. I try to use const params = useParams({from: '/books/$bookSlug/pages/$pageId'}) in books.$booksSlug.tsx to get the pageId and to show it in the layout when visiting /books/$bookSlug/pages/$pagesId. The route /books/$bookSlug also should be available. But because of the attempt of read pageId with useParams I get the error Invariant failed: Could not find an active match from "/books/$bookSlug/pages/$pageId" when visiting /books/$bookSlug. I tried using useMatch on /books/$bookSlug/pages/$pageId and only then fetch the pageId paramter, but this seems to violate the "React Hooks must be called in the exact same order in every component render" rule. How to approach this use-case?...

optimistic-gold

11/19/2024

Context not updating

I'm trying to use Route.useRouteContext hook to get fetched data (user, todos, etc.) but the data is not updated. If is a refreshed page (like F5, target _blank, etc.) the data is the default value (fallback). If you change the current page (using navigate or Link component) the value is loaded normally. Reproduction: https://stackblitz.com/edit/vitejs-vite-qzfl5f?file=src%2Froutes%2Findex.lazy.tsx...

conscious-sapphire

11/19/2024

router devtools visible in production

Why the router devtools is visible in prod env and tanstack query devtools is visible in dev env only ? is there any reason why we have to load dynamically the router's devtool on our side https://tanstack.com/router/latest/docs/framework/react/devtools when it is done automatically for us with tanstack query devtools ?

ratty-blush

11/19/2024

Retain search params: Cannot use 'in' operator to search for 'rf' in undefined

I get the following error when trying to navigate to a page by using retainSearchParams. Is this a bug or am I doing something wrong? I have the desired parameter defined in a zod schema and in the retainSearchParams array

xenial-black

11/19/2024

Updating tanstack router version ^1.75.0 to ^1.82.1

I updated tanstack router and now useSearch returns an 'any' type.

harsh-harlequin

11/19/2024

Pending state after mutation

Is there any way to add a pending state to an element after a mutation with only router or is this a solution that needs react query?

adverse-sapphire

11/19/2024

Responsive master detail routes

How can we implement responsive master detail (https://v5.reactrouter.com/web/guides/philosophy/responsive-routes/) routes with file based routing. Currently, I have following files. posts -> index.tsx posts -> $id.tsx...

eastern-cyan

11/18/2024

Tanstack Start and CommonJS modules

Hello, I have converted my project to Tanstack Start from Next.js, and it was a fantastic experience until I ran into this error in the terminal upon build and dev commands. I'm using yarn. [8:19:53 PM] ERROR require() of ES Module /Users/mathias/GitHub/flowthings/node_modules/string-width/index.js from /Users/mathias/GitHub/flowthings/node_modules/wide-align/align.js not supported....

eastern-cyan

11/18/2024

routeTree.gen.ts file and white screen without error in web nor terminal

I have a question about the router. I run into a couple problems where i just have a white screen with no error message neither in the browser nor in the terminal. Second question is, how do you handle the routeTree.gen.ts file with vscode as it's super annoying that it auto generates but doesn't autosave and always somehow changes the formatting where the path of a route changes....

extended-salmon

11/18/2024

rerender test

Hey there, currently the tanstack router does not seem to support testing rerender of hooks from: import { renderHook } from '@testing-library/react' I made a PR/fix https://github.com/TanStack/router/pull/2796 ...

correct-apricot

11/17/2024

npx tsr doesn't generate `index.ts` route

I've followed the TanStack Start guide, and I'm about to create the second route in addition to __root.tsx, namely the index.ts route. When Vinxi is running, when I create the index.ts file, it is automatically populated with the following: ```ts import * as React from 'react' import { createFileRoute } from '@tanstack/react-router' ...

rare-sapphire

11/16/2024

validate search params using Valibot Error

Hello, I have followed the documentation here (https://tanstack.com/router/latest/docs/framework/react/guide/search-params#valibot) for validating search params using valibot. However I got some error saying that the type doesn't match. Does anyone know how to solve this? Thanks in advance! Here's my code: ```ts const AuthErrorSearchSchema = object({...

wee-brown

11/15/2024

defaultPendingMs and defaultPendingMinMs weird behavior.

Hi everyone, I’m encountering an issue that seems like a bug. I’ll try to break down the issue into two mutually exclusive scenarios. Scenario 1:...

conscious-sapphire

11/15/2024

Best Practice for Directory Structure For File-based?

I'm new to using Routing libraries of any kind, and I'd like to come up with a folder structure in my project that makes the most sense. I'm using file-based routing. My pages will have multiple components in them, of course, and I'd like to keep those components close to the actual page component I'm developing. Putting the Page component and its child components under the routes directory won't work well since Tanstack Router will create a route structure. This is what I'm working with now: ```bash...

foreign-sapphire

11/15/2024

how to make notFoundComponent render outside the outlets.

I've defined a defaultNotFoundComponent as the createRouter config. The router is then passed to the router props of the RouterProvider component which is rendered in the react root. I hope that the defaultNotFoundComponent to render when a url is not matched and I think it should be rendered full-size rather than just in the outlet. I have a series of nav links in the __root.tsx and an Outlet component. The ideal behavior I expect is that when "https://www.domain.com/exits" is visited, the navs and the outlet is rendered correctly, and when "https://www.domain.com/does-not-exists" is visited, the navs and the outlet (as well as anything else in the __root.tsx ) are not rendered but to show only the defaultNotFoundComponent I defined. Was there anything I did wrong? Or it's just I can't achieve that?...

sunny-green

11/15/2024

Tanstack start docker deployment

Is it possible to build my tanstack start application as a docker application?

genetic-orange

11/14/2024

Link with search param having multiple values for same key

I'd like to provide a search property to my Link component where they query string key can have multiple values (an array)

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

This does work, but the query string in the browser is shown like this:...

rising-crimson

11/13/2024

Optimize complex searchParams update handling Task

Initial Investigation I started investigating the setTimeout with pendingMs = 0 usage, thinking it could be removed. - The complexity comes from the searchParams update handling logic itself, not from the timeout ...

correct-apricot

11/13/2024

How to correctly account for space character in search params

Hello, When I use this code to navigate to a page with given search params, it puts "foo+bar" in to the url. Then, when I click back it navigates to "foo%20bar" with the correct encoding for the space character. Am I using navigate incorrectly? How can I make it correctly encode the space? Thanks ...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs