TanStack

T

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

rising-crimson
rising-crimson8/19/2024

Unable to change the title dynamically per page

This is probably a stupid question, but I'm not sure how to dynamically change the <title> aspect of the main html file. Doing it like something below does work however it's a messy implementation. Any ideas? _root.tsx ```tsx import * as React from 'react'...
stormy-gold
stormy-gold8/19/2024

Preventing a specific query from triggering `onError`

I have the following client setup ```ts export const queryClient = new QueryClient({ defaultOptions: {...
conscious-sapphire
conscious-sapphire8/18/2024

Is is possible to use the same component for more than one route ?

I am migrating my project from React-Router to TanStack/Router. I have a component X that manages 2 routes /create and /:id/edit and based on the api calls I do inside, I handle the logic. Using TanStack/Router, I noticed that it's not possible to use the hook useLoaderData for each route in the same component. How to handle this problem? Is the only solution to split the logic ?
rare-sapphire
rare-sapphire8/17/2024

Debug response with line number?

Hey, this might be super stupid question. My IDE doesn't report any TS errors but when running i get e.g. ``` Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it....
foreign-sapphire
foreign-sapphire8/17/2024

Navigate to child pages from parent

I am build a React application with Tanstack Router. I have a problem navigating to child routes from a parent route. I have a setup of routes like this: - auth: -sign-in -sign-up...
exotic-emerald
exotic-emerald8/17/2024

Should .ts files be ignored by default with file based routing?

In my routes-folders I created a .ts-file (beneath the .tsx-files) . After creating the file, the generator plugin generates the typical createFileRoute in that file (and also includes the routes in routeTree.gen.ts). Obviously this does not work, as a .ts file does not support JSX syntax. When removing the generated code from the .ts-file the code is not generated again, but the "route" is not removed from routeTree.gen.ts (which is inconsistent imho). I didn't found something in the docs nor the source code, so my question is: should .tsfiles be ignored or is it correct that the generator treats them as route files? Personally I'd like to see them ignored, because then I could easily co-locate non-UI files (data loading code, hooks, etc.) with my route files....
generous-apricot
generous-apricot8/16/2024

Update URL hash without scrolling to the element?

Is there a way to change the url hash whenever the user clicks on an element without causing a page scroll? I only want the page to scroll when the user navigates to the url with hash for the first time or reloads the page.
xenial-black
xenial-black8/15/2024

Matches after route Param

Hello! I have a simple file based route layout with a parameter for a venue slug (TSR 1.48.1): `routes/ venues/ $venueId/ index.tsx...
genetic-orange
genetic-orange8/15/2024

Redirect in loader causes infinite loop

Hi, Basically I want to throw a redirect in the loader function based on some server result. The thing is, the loader is implemented on a dynamic route segment. Given the following path: ...
optimistic-gold
optimistic-gold8/15/2024

File based routing /post/new route matching

Hi, I'm making a simple CRUD app using file based routing and I have the following files posts.tsx posts.new.tsx ...
extended-salmon
extended-salmon8/14/2024

Style/Best Practices

I've got a question about styling/best practice for a layout like component. The code below is how I have the __root.tsx setup at the moment, I'm using session storage to hold tokens then checking if a user has permission to get past the login view. And if they do the root renders the navbar that will be rendered in all routes, kind of like a layout, (at least how I understand them). ```const RootComponent = () => {...
stormy-gold
stormy-gold8/14/2024

Route.useRouteContext return undefined

this returns undefined when i reload the page.
No description
conscious-sapphire
conscious-sapphire8/13/2024

Authenticated routes with tanstack Query requires window reload

I implemented a authenticated routes with Tanstack router. Information about user coming from Tanstack Query. Like this: ```tsx const Component = () => { const { user } = Route.useRouteContext(); ...
fascinating-indigo
fascinating-indigo8/13/2024

Race condition with beforeLoad and routerContext

I have a function that does the following in a mutation: ``` const mutation = useMutation({...
national-gold
national-gold8/12/2024

tRPC in context or constant?

I'm looking at the tRPC + React Query example, and I'm confused on whether to pass the tRPC variable to the context. I see that it is defined that way but when each component access the tRPC var it uses it from the global scope instead of the one in the context, is that by design? Or is it just because it's in the same file, and it should be accessed from the context?...
stormy-gold
stormy-gold8/12/2024

Error propagating to parent routes

Given this structure:
/posts
/posts/$id
/posts
/posts/$id
...
conscious-sapphire
conscious-sapphire8/12/2024

On refresh, always getting redirected to home page.

I sort of understand why this is happening but not sure how to fix it. In the first screenshot is my sign-in component. It basically says if there is a user and we are trying to access /sign-in, redirect to home page. And the 2nd screenshot is my __root.tsx component where as soon as my auth is done, I call router.invalidate(). This makes sure that beforeLoadruns again....
No description
optimistic-gold
optimistic-gold8/11/2024

Lazy loading progress

Is there a way to read out if something is currently lazy loading and the status on how far it is ?
sensitive-blue
sensitive-blue8/11/2024

Need to convert Rust code to run in GPU instead of CPU

Adapt a project in RUST to work with CUDA(convert project to run in GPU instead of CPU) We are seeking a talented RUST developer to adapt our crypto project code from CPU to GPU using CUDA. The project currently involves decrypting and qualifying solutions using CPU, but we want to optimize performance by utilizing GPU. Your responsibilities will include modifying the existing codebase, implementing CUDA technology, and ensuring seamless integration with the project. We are looking for someone with a strong understanding of cryptography, CUDA programming, and parallel computing. The ideal candidate should have experience in optimizing algorithms for GPU and working with complex cryptographic systems. If you are passionate about both cryptography and GPU programming, we would love to hear from you! https://github.com/reactmaster223/tig-monorepo-main...
vicious-gold
vicious-gold8/9/2024

Routing with async data

Consider the following setup where my context has user: User | null: ``` // app.tsx const {data: user} = useUser();...