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
Loader called twice on the server, cause = "enter" and "stay"
Is it intended that the loader is called twice for a very minimal setup? Queries are deduplicated using tanstack query in my setup, but for instance I have a server function outside tanstack query that is being called twice.
The loader is called twice on the server with cause = "enter" first and then "stay"?...
Doc example improvement
Hey, I was looking at some tanstack router examples and was wondering if
const [filterDraft, setFilterDraft] = React.useState(filterBy ?? '') was a bad practice, why do we duplicate the url state into a useState in this case ?
https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based?path=examples%2Freact%2Fkitchen-sink-file-based%2Fsrc%2Froutes%2Fdashboard.users.route.tsx
Can't we do something like this instead:...Property 'isNewUser' does not exist on type '{}'** Route.useSearch
I'm using TanStack Router and have defined a search schema with
isNewUser as an optional string parameter:
```typescript
const dashboardSearchSchema = z.object({
isNewUser: z.string().optional().default(""),...When to use tanstack query for loader functions
Hey all,
Following the example here: https://tanstack.com/router/v1/docs/framework/react/guide/external-data-loading
I am using ensureQueryData in my loader to fetch data....
What is https://www.npmjs.com/package/@tanstack/react-router-with-query
I saw jherr user it in one of his videos but can’t find any docs for this package…
Also are there any docs for create ts router app?
create ts router app always includes tanstack/start, is there a way to just create SPA with tanstack router?...
SSR Docs incomplete? What todo with `main.tsx`
I used this guide to migrate: https://tanstack.com/router/latest/docs/framework/react/migrate-from-react-router
Worked great! However, now I want SSR to have param specific open graph and twitter images. The guide for SSR lets me create a
entry-client.tsx and a entry-server.tsx however in my vite world i just have main.tsx and unsure where to continue. This is a missing part in the docs I think.
https://tanstack.com/router/latest/docs/framework/react/guide/ssr...How to achieve a slot pattern in a Tanstack router?
#react-router, #dynamic-navbar
Requirement:
- I have a top navbar which renders profile dropdown which is the same across the app.
- Another section of this navabar is the dynamic section.
...
Vinxi breaks pendingComponent
Pending Component (loading or even the suspense) does not work with vinxi.
https://www.loom.com/share/20544987d887491a88ce5ddc244f8afe
```js...
Apply Middlewares globally
Is there a way to apply middlewares globally to every page?
I'm using this middleware: middlewares: [retainSearchParams(['rootValue'])]
It does exactly what I need, it retains certain query parameters across route changes. However, it only works when added to each page’s createFileRoute.
...
How can I test navigation with Cypress Component Tests?
I am struggling to find a reliable way to test transitions from one page to another using CY component tests. I created a custom mount that is wrapped using the following provider:
```
interface TestProvidersProps {
children: ReactNode;
initialEntries?: string[];...
Multiple Tanstack Start projects behaving as one in a monorepo?
Hi, I'm multiple NextJS projects that want to migrate to Tanstack. Currently, I have a NextJS app for authentication, dashboard, etc. managed by different teams, but the router isn't used in each project but in the main NextJS app. The structure is like:
(main app)
-- app
-- auth...
Navigating to child view
if I have
/data/$parentId and data/$parentId/$childId
Can I do something like <Link to="./$childId" params={{childId: '123"}}>Go</Link> in the parent view? Or do I have to spell out the whole path and pass both ids for params?...How to use TanStack Router when the app is not running in the root directory of a web server?
Hi everyone,
I have a "regular" React + Vite + TanStack Router app. To generate relative paths, my Vite app has the configuration base: './'. The TanStack Router itself has no specific configuration.
When I run the app in the root directory of a web server, everything works fine. However, when I deploy it to a subdirectory like /company/tool on an Apache server, the app loads, but the TanStack Router shows a 404 error, saying the page cannot be found....
How to mask ?showLogin=true to /login on every possible route?
I want to use
createRouteMask to show a login modal and mask the URL to /login. The showLogin search parameter can be used on any page (added in route.tsx) and the dialog will be displayed.
One workaround I can think of is to create a custom LoginLink component that does the masking inline, but that feels wrong. I can't find a combination of from', to and search that makes it work 😄
Maybe some more examples in the docs would be helpful: https://tanstack.com/router/v1/docs/framework/react/guide/route-masking The example text Navigate to a route with the search param ?showLogin=true, but masking the URL to not contain the search param` sounds good, but there is no code attached....useNavigation is not working when inside useMutation?
@Manuel Schiller Good day! I just want to ask if I am doing it right?. After the success of the login. It should programmatically navigate to the routes given. But It doesnt nagivate though. The onCLose() works but the navigate doesnt work
Cannot access 'routeTree' before initialization
Hi all.
Not sure if anybody else has a problem with this or if it's mean to be like this but I keep on getting this error on any change in the codebase.
The question is did I do something un-correctly?...
Escaping characters in file router
Hi everyone. Does anyone know a way to escape characters using the file router so they are used in the route as is.
For example I want my API route to be
/api/modules.account.proto.AccountController/Login. Currently this becomes /api/modules/account/proto/AccountController/Login. It has to be this format due to backend RPC code generation....Vite warning node:fs when using StartClient component
Vite gives me warnings like:
...
[plugin vite:resolve] Module "node:fs" has been externalized for browser compatibility, imported by "/Users/jasonkuhrt/CascadeProjects/vite-webapp/node_modules/.pnpm/@tanstack+start-client-core@1.114.25/node_modules/@tanstack/start-client-core/dist/esm/createServerFn.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin vite:resolve] Module "node:fs" has been externalized for browser compatibility, imported by "/Users/jasonkuhrt/CascadeProjects/vite-webapp/node_modules/.pnpm/@tanstack+start-client-core@1.114.25/node_modules/@tanstack/start-client-core/dist/esm/createServerFn.js". See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
Tanstack Router Context
Hi all.
I’m trying to use the router context but I keep on missing.
I’ve got it either set up incorrectly or something is going on....
Getting access to parent route data in child route loader
using file-based router, how would you get access in a child route loader, to the parent route data (loader) i.e
```typescript
const parentRoute = createFileRoute('/dashboard')({
loader: async () => {
const data = await fetch('....')...