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
Nested folder routes
The folder structure is in the image. When navigating to /projects/{projectId} I am seeing the page that's rendered on /projects. What am I missing?
Why is the parent route of projectId in routeTree.gen.ts project and not root:
```ts
const ProjectsRouteRoute = ProjectsRouteImport.update({...
Is there a way to pass data when navigating?
Use case: on a page (parent) I have two tabs with inside a button each that navigate to a specific child page.
From the child I want to navigate back but I also want to land in the right parent tab.
How can I pass this info during the navigate? I attemped a hack with query params + route masking but I wish there was an easier way....
How can I check for authentication errors on every loader call without copy and paste boilerplate?
I have a gist written here: https://gist.github.com/jeffreytgilbert/c65f14dd107e840ee893af2ed6ebeeae
It both handles the async await and checks for the auth error code(see: useGetApi), but it wont import correctly for use in loaders. When trying, I receive the error: "SyntaxError: Importing binding name 'useGetApi' is not found." The Route/Loader code is as simple as this:
const eventArtistsSearchRoute = createRoute({
/* irrelevant component and param parsing code here */...
Code split sub-routes together
Wondering if it's possible to control how lazy file-based routes are split out instead of having each route be in its own chunk. Potential desired behavior would be that everything below a certain path (e.g. /users would include /users, /users/1, /users/new, etc) would all be included in the same chunk so that once you "entered" that section of the site once you'd already have the rest of the code loaded.
Equivalent for query v4
Hi all in the doc of router to use tanstack query with router we got this example :
```
const postsQueryOptions = queryOptions({
queryKey: ['posts'],
queryFn: () => fetchPosts(),...
mutateAsync vs mutate with options. What's the difference?
The docs on this page: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#promises say "Use mutateAsync instead of mutate to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects." with the following code as an example:
```ts
const mutation = useMutation({ mutationFn: addTodo })
try {
const todo = await mutation.mutateAsync(todo)...
beforeLoad() property on createLazyFileRoute?
I’m trying to modify context (for breadcrumbs) and noticed that createLazyFileRoute doesn’t expose a beforeLoad property like createFileRoute does. Is there a way to modify context in a lazy loaded route?
How to implement Route-Based Modals
Hello,
I'm currently working on a project where I need to create a route-based modal that can be displayed on every page. In Next.js, this is referred to as Parallel Routes. I've noticed that TanStack also has a concept of Parallel Routes, but I haven't been able to find any documentation on it yet. The goal is to use this modal for user login, and I'm using file-based routes.
So far, I've tried two different approaches:...
Confused by lazy route in SSR mode
To get SSR to work with a "lazy" route, I need to have both
createLazyFileRoute and createFileRoute setup with a component to get both page reload and client side routing to work.
The docs says the following:
post.tsx (no component specified) ->...How does one use the abort signal in combination with tanstack-query
Say I have the following route:
```tsx
export const orderQueryOptions = (orderId: string) =>
queryOptions({...
understanding layout routes
I'm having a hard time understanding layout routes. Maybe my use-case is a bit non-standard, but what I would like to achieve is the following scenario. We have a lot of routes per "workspace" that live under ...
/workspaces/$id, for example:
/workspaces/$id/help
/workspaces/$id/dashboard
/workspaces/$id/help
/workspaces/$id/dashboard
In latest release 1.28.4 useRouteContext()-hook returns undefined on first start
Hey 👋🏽
in latest release 1.28.4 the behavior of
useRouteContext or beforeLoad has changed.
I return the user from beforeLoad, but the useRouteContext-hook return undefined in the component.
...Determine if a navigation would go to the previous page.
Hey!
I am trying to wrap the
Link component such that if the link would cause a navigation to what was the previous page, instead it will run history.back(). My idea is to store the last location locally, figure out what the next location will be and then either return the router Link or do a history back. I've got as far as this:
```ts...Loader hits all API when loderDeps are updated.
I have two APIs for my route, one gets the table data and the other one gets filter data. Every time I change the page number in the loaderDeps I only want the table data API to hit since my filter data API is a huge list which is slowing down my app. And I need it only once, so it doesn't make sense to hit it every time
```typescript
export const Route = createFileRoute("/_layout/cages")({
loaderDeps: ({ search: { page } }) => ({ page )},...
Router Search Error Handling
Hello, have another relatively simple question
```const registrationSearchSchema = z.object({
username: z.string().email().catch(''), // Ensures the username is a valid email
code: z.string().catch(''),...
Same url navigation behavior
Router method
navigate checks parsed location's href with a previous and if they match navigation does not perform.
Let's consider the example:
```javascript
router.navigate({...Streaming SSR React Query Data
I've got a slow ensureQueryData call that I would like to defer/stream to the client upon completion. The data is used in a Suspense-wrapped component on my page via. useSuspenseQuery. The data however gets redundantly fetched again on the client side (even w/ a query client stale time set to 60 seconds) b/c the query data streamed to the client does not get hydrated - only the HTML of the Suspense-wrapped component gets streamed to the client.
Are there any kinda efforts to implement something like react-query-next-experimental for TanStack Router? Such that not only HTML within suspense boundaries get hydrated, but query data as well?...
Show pending component during beforeLoad-ing
Hi, does tanstack router have an easy way to display a component while beforeLoad is running? I know pendingComponent is for loaders, but in my beforeLoad i fetch an access token and do some async work and would like to display the pending component instead of just a white screen?