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

absent-sapphire

9/25/2024

authenticated routes approach

Hello guys, this is the auth routes example in the docs. The other image is my auth setup. Do you have any other preference/example to have a look at? I'm not sure how to handle dozens of dozens of routes and I dont know if adding _auth. prefix to each route would be the best approach ? Maybe yes? Any suggestions?

other-emerald

9/25/2024

TanStack Start with SPA

I use Router w/Express for a production app (and it's great, thank you!), but for a new app I'd like to skip the Express part, but still use a react SPA with some basic API routes. Is this supported with Start? Even if it's requires a custom vinxi/app config. Thanks!

other-emerald

9/24/2024

Loader doesn't get router context

I'm trying to use a TanStack Query queryClient in my loader that I pass through context, but the loader is not detecting the context. I'm wondering if I'm doing anything wrong. ```typescript import React from 'react' import ReactDOM from 'react-dom/client' import { RouterProvider, createRouter } from '@tanstack/react-router'...

equal-aqua

9/24/2024

skip files during routetree generation

Is there any way i can skip files inside the route folder during routetree generation ?

harsh-harlequin

9/23/2024

Is there a way to have Rewrites or Proxy?

Posted this on Github discussions too, but not sure if that's still active. Sorry for the spam! This might be a dumb question, but I couldn't find any docs for it, so I might as well ask. My team is moving away from Nextjs (pages) and moving to TSR (tanstack router with start/vinxi)....

multiple-amethyst

9/22/2024

Client headers do not get passed to API routes called in loader/beforeLoad {TanStack Start}

I wanted to create an architecture where I have an API and frontend together using TanStack Start whilst having SSR so I tried to achieve this using the API routes provided by the framework. But when I want to fetch data from authenticated API routes in the loader the client's cookies/headers containing authentication info don't get passed to API. The only method I found to resolve this is to wrap the API call in a server function and use the getHeaders() function to pass the headers to the fetch call. ```ts...

wise-white

9/21/2024

Clerk Setup with authenticated routes

I'm experiencing some issues with setting up my authenticated routes with Clerk. I see the examples with Start and the createServerFn function but I am only using react router. In all of the examples the authentication method seems to be fully syncronous, but with Clerk and the useAuth() method, the data may not be immediately loaded. The workaround i found was to check if auth.isLoaded before proceeding with my RouterProvider. But this creates an annoying extra loading page. ```...

wise-white

9/20/2024

Automatic Code Splitting with separate component file.

I wasn't able to find a clear answer in the docs relating to automatic code splitting and having the component in a separate file. I know it says not to use the .lazy suffix with automatic code splitting, but how will code splitting be affected if the component is in a separate regular file that doesnt have the .lazy prefix and is then imported into the route? Thanks!

ratty-blush

9/20/2024

CSR is possible when using Flie Based routing in Tanstack Router

I wanted to use tanstack router for internal app but wondering it is possible or not

flat-fuchsia

9/19/2024

tanstack/react-router with react-router-dom

I have inherited an application that I would like to migrate to tanstack/react-router but it would not be possible to do it at once and both libraries would have to coexist simultaneously. Is this possible?

xenial-black

9/19/2024

Vercel throws 404 page when reloading the page

https://client-workout-tracker.vercel.app/ If you go to any other url other than the root it will be 404 ...

conscious-sapphire

9/19/2024

Is there a way to manually trigger tanstack pending component for a page

I have a page that uses useQuery when the query is pending I want to show the page pendingComponent and when it errors I wanna show the error component I could have just used useSuspenseQuery then but it is bugging out when using it with React aria Select component the whole page just crashes when I change too fast and some other issues but I confirmed it worked well when I used useQuery

ambitious-aqua

9/19/2024

Correct method for setting search parameters

Is using the useNavigate method the correct way to set search parameters dynamically for when we want to stay on the same page? `onChange={(ids) => { navigate({ to: '/',...

ambitious-aqua

9/19/2024

useSearch paths includes layout routes

I have set up Code based routing where I have a couple of layout routes (using id instead of path). When I try to use the hook useSearch the provided paths have the layout id prefixed. The useNavigateHook does not do this and works perfectly. for example i want to access my index route this is what I want to do: const filters = useSearch({ from: ''/weather" })...

xenophobic-harlequin

9/18/2024

Slow first paint when using a loader

When using a loader in any page the first paint gets delayed 500ms, this is really noticeable, look at this based on this examples home page: If i add console.log(performance.now()); to main.tsx and in the component in routes/index.tsx i get the following timings (image 1) But if we simply add this to the route:...

sensitive-blue

9/18/2024

Index.tsx or Route.tsx

I'm struggling to understand the difference between these two. From the docs on route.tsx:

When using directories to organize your routes, the route suffix can be used to create a route file at the directory's path. For example, blog.post.route.tsx or blog/post/route.tsx can be used at the route file for the /blog/post route....

ambitious-aqua

9/18/2024

Create a route just for adding layout using Code Based Routing

I want a way to add 2 different layouts depending on the routes using Code based routing. I've tried creating two layout routes and make the corresponding routes use the correct layout route as its parent but it adds the path of the layout route to the route. How do I add a layout route without adding its path to its children routes? This is my attempt at doing this. ...

xenophobic-harlequin

9/18/2024

Why is loader not fetch at the same time as the lazy load?

I've split my routes like this: src/routes/category/$.tsx -> has the loader and validateSearch src/routes/category/$.lazy.tsx -> only the component When I hover over a link to a category page, I see this in the network tab (check the image)....

xenophobic-harlequin

9/17/2024

Group lazy routes

Hello! I was wondering if its possible to split multiple routes into a single bundle, i for example want all routes that start with /test to be in a secondary bundle, instead of each one into its own as it works by default with lazy routes, is this possible?

foreign-sapphire

9/17/2024

Tanstack Start attempting to run the build fails

Hi everyone, I am working on an app using Tanstack Start. I followed the setup instructions here: https://tanstack.com/router/latest/docs/framework/react/start/getting-started I noticed that running the dev, and build commands (vinxi dev and vinxi build) run fine, however attempting to run vinxi start after a build causes the error reported on this issue: ...

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