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

rare-sapphire

3/28/2024

Recommend way to navigate when destroying with TanStack Query

I am using TanStack Query and TanStack Router in my app. I have a list of items, click on one to go to view its details and from that route I can delete the item. After I delete the item I want to go back to the list. Easy peasy. Should I navigate back to the main list in the route component or should I navigate back to the main list in the useMutation?...

sensitive-blue

3/28/2024

Resetting InfiniteQuery on navigate replace

Hi! I have a form where one of the select fields uses useInfiniteQuery to populate the select items. On form submit, the page refreshes via useNavigate with replace: true and the form values as the search parameters. But if I check the field again after navigation, the items in the select field are the values of the next page of the useInfiniteQuery before I submitted the form. I was hoping to ask what I can try to maybe reset the query to the first page again when it navigates to the same page. Thank you! (I'm actually not sure if I should post this here or on Query)...

like-gold

3/27/2024

Why Route.id is undefined?

Hey 👋🏽 , I'm sure following has worked with a version released last week. With the current version it does not work ```js import {...

rival-black

3/26/2024

useParams behavior change?

did something change recently to prevent calling useParams on routes that aren't in the current route? const { slug} = useParams({ from: "/path/$slug" }); Invariant failed: Could not find an active match from "/path/$slug"...

conscious-sapphire

3/26/2024

createLazyFileRoute missing types ?

I want to use createLazyFileRoute with beforeLoad, but that prop doesn't exist on this function. Is this a bug? Or there is another way to do it ?

optimistic-gold

3/26/2024

Can you use zod to validate params (not search params but actually params)?

I'm trying to use zod to validate my query parameters. example URL: /app/project/$projectId I'm trying to use zod to say that projectId is a number with the following zod schema: const projectRouteParams = z.object({...

continuing-cyan

3/26/2024

Why don't my routes' error and loading components respond predictably to react-query devtools

I'm really not sure if this post belongs here or in the query section so apologies if the coin flipped to the wrong side. I would like to be able to trigger the rendering of the errorComponents and pendingComponents by clicking on the corresponding triggers in the react-query dev tools but I'm getting mixed results. Here's my simplified Codesanbox:...

conscious-sapphire

3/25/2024

Correct usage of `createLink`?

I'm attempting to use createLink to combine the Link component from react-router with the Link component from chakra-ui. However, the resulting component results in only having the key & ref props; no props from either of the Link components. I also get an error locally:

``
console.js:213 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of

ForwardRef(Link2)`....

continuing-cyan

3/24/2024

How to use additive context?

I have an app that moves linearly from screen to screen. I want to accumulate a little bit of data on each screen and submit a payload at the end comprised of the merged bits I fetched on each of the previous screens. This is my simplified route structure. ``` |-- routes | |-- load-todo...

wise-white

3/22/2024

Type of children's route params in parents

I've got the following routes: - _layout.tsx - _layout.$orgId.tsx The params in _layout.tsx's loader seem to include the orgId param, but it's not reflected in the type. Am I missing something?...

ambitious-aqua

3/22/2024

Optimum way to use route context in a component?

Hi everyone, This may be quite a basic question (!) I am wondering the best way to use context that is provided at top level RouterProvider, in a component that is outside a page/component located in the routes folder? e.g. index.tsx inside routes imports component.tsx from src/mycomponents - how should component.tsx access context?...

typical-coral

3/22/2024

Why used axios instead of react query in example?

https://tanstack.com/router/v1/docs/framework/react/examples/basic-react-query-file-based in the given example post.tsx uses axios instead of react query why?(count me as newbie on tanstack family)

metropolitan-bronze

3/21/2024

Is it just me or does HMR sometimes put the router into very strange states?

During development I will frequently come across Links that all of the sudden (after HMR) point to the exact URL I am on instead of their usual path. Which links are broken seems to depend on which portion of the DOM tree was hot-reloaded. For instance, attached is a screenshot of what the side-nav in my app looks like after tweaking some CSS around that component. Each of the nav Links show their "active" styling and point to the page I was on before the component was hot-reloaded (in this case they all point to /document/edit/$id as shown in the preview bar). I have also noticed an issue (after HMR) where context-consuming components will sometimes cause the app to blow up as if they are being used outside of their corresponding context provider, even though they are not. Again, this seems to depend on which part of the DOM tree was hot-reloaded....

like-gold

3/21/2024

Go Back button with reference to location before entering sub-route

Lets say we have these routes: /$workspaceId /$workspaceId/$fileId /$workspaceId/$fileId/studio /$workspaceId/settings...

like-gold

3/21/2024

memoized route components

Every route navigation triggers a top-level re-render of all routes, including the root route. If I navigate from /products/ to /products/5, I get re-renders for the components in: - __root.tsx - /products/route.tsx - /products/$id.tsx ...

inland-turquoise

3/21/2024

How to initiate search params from initial api response without triggering re-fetch?

1. I fetch initial data via /data endpoint. 2. /data returns parameters that come with some initial parameters (let's say { page: 1 }) 3. I add these parameters from the response to the url address as search params so I can use them via useSearch in the UI (e.g. to show we're on Page: 1) 4. Search params changed which are part of the respective /data query keys and re-trigger the query basically returning the exact same thing as without any search params. ...

like-gold

3/20/2024

How to redirect from an intermediate route to a specific route?

Hey, I have following routes: /vouchers/creation/create /vouchers/creation/output...

like-gold

3/20/2024

Is it a good idea to pass the route to a Component?

Hey 👋🏽 , I want to have access to the route.fullPath or the route.id and the numerous hooks at a child component. Here's my code:...

flat-fuchsia

3/20/2024

What should be the type of prop that needs to be passed to "to" option of redirect function

Similar question: https://discord.com/channels/719702312431386674/1210385988732325888 I have a component that accepts a redirectTo props. I use this redirectTo prop to pass to redirect function. ex: ```tsx...

like-gold

3/19/2024

search params prev type not inferred

I tried to use the functional updater of the search prop as described here: https://tanstack.com/router/v1/docs/framework/react/guide/navigation#search-param-links I implemented a simple counter (reproduction here: https://stackblitz.com/edit/tanstack-router-scf3nc?file=src%2Froutes%2Fabout.tsx,src%2Froutes%2Findex.tsx) and I noticed two things: 1) prev is inferred as:...

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