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

jolly-crimson

11/20/2024

Get window width on server

Hi all! Please forgive me if this is a silly question. I am relatively new to SSR (via react at least) so I am struggling to do this properly. I have a component that needs to measure the window size to determine what border radius to use. Obviously there is no window on the server so I have to wait until the component renders on the client. But, I am getting a flash of incorrect style on the client before I measure the window and set the correct value. Is there a way to get window width (or at least browser type, etc) on the server. I started of with a useEffect solution and have now moved to a useState solution. ```js const [sm, setSm] = useState(false); ...

adverse-sapphire

11/20/2024

Use « useSearch » in the root page

Hello ! Why it is not possible to use the hook useSearch in the root page when the matched page is not “/“ ...

stormy-gold

11/20/2024

How to check for auth with Clerk and Tanstack Start?

Hello, I followed the guide from Clerk: https://clerk.com/docs/references/tanstack-start/get-auth The way they are creating createServerFn, seems to be outdated now, and I'm not quite sure how to get the request:...

genetic-orange

11/20/2024

Edit and update loader data / Update useState after router.invalidate()

Hi, i want to build a page with a router loader where the user can edit an <input> and the backend is supposed to simply append the string "foo". When the user hits save, a POST request saves the data and nothing but 200 OK is returned. To update the view, i want to call router.invalidate() to update using a GET request. This works up until the useState for the <input> because useState ignores when it's parameter changes value. How do i solve this issue? Is there a best practise for being able to edit and update data from a loader?...

rival-black

11/20/2024

Get the `from` location when user navigates

I am using Tanstack for the first time and could not find the answer to my current issue. I want to get the from location inside a component. That is , from which path did the user take to come to the current component . Inside from my component , I want to later navigate back to the from address. How could I do this. Thanks...

other-emerald

11/20/2024

How would multiple apps with Vite and router looks like?

I have currently a mono repo and want to migrate it into one package with just multiple starting points via ENV variable. How would that work in terms of the typescript types? Its all together 4 apps with different routes but all share the same UI kit, backend and thats why it would make sense to just run them in one package. The mono repo gives me headache and I would love to get rid of this complication.

wise-white

11/20/2024

Accessing Cloudflare Pages Environment Variables

Hello, can someone please explain how I may access the environment variables within my Tanstack Start application, deployed to Cloudflare Pages? Where do I set up the Cloudflare context?...

wise-white

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...

optimistic-gold

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?...

ambitious-aqua

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...

helpful-purple

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 ?

foreign-sapphire

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

other-emerald

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.

foreign-sapphire

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?

optimistic-gold

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...

stormy-gold

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....

vicious-gold

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....

conventional-tan

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 ...

initial-rose

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' ...

wise-white

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({...

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