184 questions
1
vote
2
answers
153
views
Cannot deploy Tanstack Start React app to Cloudflare using GitHub Actions
I have developed a React application with Tanstack Start framework. I have also successfully deployed the page to Cloudflare, using CLI commands:
npm run build
npx wrangler deploy
In order to ...
- 42.1k
0
votes
1
answer
95
views
Zod v4 parse path params always string?
I'm using @tanstack/zod-adapter for parsing path params:
export const Route = createFileRoute(
"/route/$one/$two/$three",
)({
params: zodValidator(
z.object({
one: z.number(),
...
- 19
-4
votes
1
answer
220
views
Avoiding delay when using search params as state
I noticed when deriving state using Route.useSearch(), and updating state using Route.useNavigate, there is a delay when updating state. Is there guidance on how to do this optimally? So far I'm ...
- 19
-1
votes
2
answers
92
views
How can I update field state directly, quickly from AI stream?
I'm working on a text editor with my editor input being a react-hook-form field. I also have an AI writing assistant that streams text from the back-end that I need to update the input as it streams. ...
- 19
1
vote
1
answer
91
views
ERR_MODULE_NOT_FOUND when trying to install tanstack
I'm trying to initialize tanstack project by using this command:
pnpm create tanstack@latest
But it shows error like this:
node:internal/modules/esm/resolve:283
throw new ERR_MODULE_NOT_FOUND(
...
Best practices
0
votes
3
replies
89
views
What is a basic skeleton for creating a website using HTML, CSS, TSX with Tanstack wireframe?
I need non-inline code in HTML, CSS, JS, Node.js, TSX, and a Tanstack wireframe.
I also need to know how to insert my logo so that it is responsive for many devices.
Please be kind, I'm starting over ...
1
vote
1
answer
138
views
How can I combine two TanStack Query results into a single object?
I have two separate queries using @tanstack/angular-query:
roles = injectQuery(() => ({
enabled: this.user.data(),
queryKey: ['roles'],
queryFn: () =>
lastValueFrom(getRoles({ roles: ...
- 518
2
votes
0
answers
276
views
How to create optional value with Tanstack form and Zod?
How to create optional value with Tanstack form and Zod?
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { z } from 'zod';
import { revalidateLogic, ...
- 29
0
votes
0
answers
292
views
create-tsrouter-app@latest not working ERROR
I want to create new project using
npx create-tsrouter-app@latest
I keep getting this issue. The error always error code ECOMPROMISED and error Lock compromised. I even tried using npm create, but ...
- 1,692
2
votes
1
answer
407
views
How to keep scroll position stable when loading messages on top?
I’m building a chat UI in Next.js (App Router) and struggling with maintaining the scroll position when fetching older messages at the top.
I’m using:
@tanstack/react-virtual for virtualization
...
- 327
-1
votes
1
answer
1k
views
Trying to dockerize TanStack Start application
I am following hosting docs for TanStack Start with Nitro hosting in order to dockerize the app.
So, in the docs there is instruction to get nitro-nightly package
npm i nitro-nightly
After that, code ...
- 42.1k
2
votes
1
answer
122
views
Can not use staticFunctionMiddleware to implement Static Server Functions
I am trying to follow docs on TanStack Start, as every other day :) Today I was studying Static Server Functions and there example is given:
import { createServerFn } from '@tanstack/react-start'
...
- 42.1k
1
vote
1
answer
1k
views
What is the use case for TanStack Start useServerFn hook
I am currently exploring TanStack Start (with React).
At What are Server Functions? page we have example of server function that can be used with useQuery (from TanStack Query, to fetch data from ...
- 42.1k
0
votes
0
answers
51
views
Tanstack Query: Multiple chained POST calls with rollback
I have an issue where I need to make 3 chained POST calls using Tanstack Query.
POST with query 1
If query 1 fails, stop
If query 1 succeeds, make POST query 2
If query 2 fails, rollback query 1
If ...
- 11
0
votes
2
answers
186
views
How can I have a delay until useQuery/refetch have returned the data
I am developping an iOs/Android App with React Native.
I am using useQuery (TanStack Query v5) to send the username and an hashed password to my database and it return the user ID if the email/...
- 3
2
votes
0
answers
83
views
TanStack query local storage full
We are using TanStack query (Vue) for storing a lot of states in the local storage.
But what happens if the local storage is full?
Will it just discard the oldest query if we store a new query?
0
votes
0
answers
142
views
Tantsack Virtualized Dynamic Height Rows
I have been trying to create a dynamic grid using tanstack virtualized rows (the number of columns being tied to window width)
The issue is that my rows expand in height due to window resize, but my ...
- 1,119
0
votes
1
answer
395
views
TanStack Table sticky header with maintain custom Search and sort state
Im using tanstack table to display my data in table in my react app (vite)
i have added custom header for columns and these headers have manual(Server side) search box and sort- Im getting an issue ...
- 17
0
votes
1
answer
219
views
TanStack Query useMutation is not return isSuccess true after success response
I have an authentication system. calling Api's using tanstack query.
When logging in, signing up, and verifying email using the link, everything works fine. However, when I check the mutation's ...
0
votes
2
answers
730
views
TanStack query - Invalidate queries not working with retry
I have a setup using the queryClient's defaultOptions.
The queries are set to always retry up to three times, and the mutations are set to retry on a specific error.
This works in most cases as ...
- 155
3
votes
1
answer
2k
views
React Tanstack Start/Router: Where do I put providers?
I created a new app using this starter code from Tanstack Start/Router, and I'm unsure how to put in React Providers. There is no ReactDOM.render call anywhere that the App component is rendered, and ...
- 4,086
0
votes
1
answer
2k
views
Tanstack form field level errors behaving very weirdly
So I have a simple register form with 5 fields
Email, Username, Password, Confirm Password and Accept T&C. I am doing validation at form level for the following
if (!value.username) return "...
0
votes
0
answers
726
views
Rendering bug when using Tanstack Virtual
I encountered such a problem when trying to use virtualization from Tanstack Virtual, my screen twitches when I scroll my feed. I assume that this happens because of the rendering of new components. I ...
- 1
-1
votes
1
answer
164
views
Why doesn't invalidateQueries accept the full query key from trpc.router.endpoint.queryKey()?
I'm using tRPC with React Query and trying to invalidate a specific query using the full query key generated by trpc.
Here's what I'm doing:
const likeFullKey = trpc.like.getLikesByUser.queryKey();
...
2
votes
0
answers
90
views
Why aren't my variables passed to my Tanstack mutation function
I'm trying to start using Tanstack and am having problems passing variables into mutation functions.
In the following, "newTodo" is returning undefined.
<script setup>
import axios ...
- 912
4
votes
2
answers
977
views
How do you change the port for a TanStack Start app?
I would like to update the port that my app is running on but the TanStack Start [defineConfig][1] method doesn't seem to expose that like a normal Vite config does. Here is my app.config.ts:
import { ...
3
votes
1
answer
285
views
How do I stop TanStack Start from creating app.config.timestamp files?
I am using TanStack Start with this app.config.ts:
import { defineConfig } from '@tanstack/react-start/config'
import tsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from "@...
1
vote
0
answers
307
views
How to Implement Virtualization with Sticky Header and Sidebar Using @tanstack/react-virtual?
I am using @tanstack/react-virtual (useVirtualizer) to optimize rendering for a large dataset. My data consists of reports for 200 employees over 365 days, displayed in a CSS Grid.
Requirements:
...
- 41
0
votes
1
answer
192
views
How to cancel previous API calls when updating query params in Angular with TanStack Query [closed]
I have multiple dropdowns on a page, and each selection updates the query parameters in the URL, triggering an API call via TanStack Query.
The issue arises when I change multiple dropdowns quickly:
...
- 117
1
vote
1
answer
109
views
Angular Query Tanstack Query cleanup logic
I'm using Angular 18 with TanStack Angular Query and have a question about handling observables in the queryFn.
In my queryFn, I'm using lastValueFrom() with an HTTP request like this:
queryFn: () =&...
- 117
2
votes
1
answer
2k
views
postcss-import: /node_modules/tailwindcss/lib/index.js:1:1: Unknown word "use strict"
I have created a project using Tanstack Start. I am using tailwind.css, shadcn-ui and some components from https://supercharged-shadcn-components.dykennethryan.com. Everything was going OK until I ...
- 8,088
0
votes
1
answer
189
views
zustand hook is called inside cell table tanstack
I am trying to call hooks I created with zustand to one of the cells of tanstack table, during building, eslint throws an error
Error: React Hook "useCartStore" is called in function "...
0
votes
1
answer
2k
views
Is there a way to construct a route path as string in Tanstack Router?
Question
I'm using Tanstack Router and Tanstack Start and I'm wondering if there's a way to do something like:
const path = buildPath({ to: "/$lang/posts/$id", params: { lang, id }});
so ...
- 76.6k
0
votes
1
answer
55
views
How to ensure scroll event is fired at a decent frequency?
I'm implementing a pivot table which has 3 parts, pivot body, row headers and column headers.
I've implemented scroll sync between them. That is, if I scroll pivot body, row headers and column ...
- 4,881
2
votes
1
answer
383
views
Large React Aria Components dropdown with virtualized rows
I need to implement a dropdown with react-aria-components but one of the use cases has a large amount of instances, provoking a very slow experience. For that reason, I want to use a row ...
- 1,647
1
vote
1
answer
2k
views
Dynamic nested routes using TanStack Router
How would I set up file-based routing with tanstack router so that I could have these three different routes:
/{year} routes to YearViewComponent
/{year}/{month} routes to MonthViewComponent
/{year}/{...
- 4,053
1
vote
1
answer
860
views
Issue Combining Virtualization with Expanding Sub-Rows in Material React Table
First of all, I’d like to express my admiration for this package—it’s incredibly flexible and thoughtfully designed
Recently, I implemented virtualization in one of my projects to handle a large ...
- 465
0
votes
1
answer
2k
views
Tanstack Router Link with search params where one key has multiple values
I'd like to provide a search property to my Link component where they query string key can have multiple values (an array)
<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>
...
- 1,040
0
votes
1
answer
268
views
How to work with Angular Query adapter from Tanstack tests
I am working with Angular Query with Angular v19 and signals. I was able to implement good solution to work with QueryOptions and injectQuery in the app. How ever it's quite challenging to work with ...
- 117
0
votes
0
answers
120
views
Angular Tanstack Cached Observables are refreshing data and not using the cache causing problems
I'll keep it short as possible ><
-I have a left hand menu with items that can be expanded/collapsed. This is dependent on "getAll()" and works as expected.
-When I incorporated "...
- 195
-1
votes
1
answer
982
views
Tanstack Query with Expo and React Native useQuery().error returning always null
i'm building an Expo/React Native app, with app folder structure (instead of App.tsx main file), but I'm trying to implement Tanstack Query in my project, but I'm getting the error object returned ...
1
vote
0
answers
530
views
TanStack Table - sticky column not working - Radix UI
I’m having issues getting the first column of my table to be sticky. I think I’m missing some CSS that sets the container of the scroll area to 100vw, but even after setting it, I still don't get my ...
- 79
0
votes
1
answer
138
views
Disable automatic API calls after navigating to a page in TanStack Vue
I have a service that calls an API, and when I first load the page, I want it not to be called. However, the API call function runs multiple times when I load the page for the first time. Please help ...
- 23
0
votes
1
answer
266
views
tanstack sorting arrow function call onClick not working but when calling directly on onClick , its works , why?
This doesn't work:
onClick={() => {
header.column.getToggleSortingHandler();
}}
However if I invoke it like this then it works - why?
onClick={
header.column.getToggleSortingHandler()
}
I was ...
- 21
1
vote
1
answer
501
views
How to update TanStack query parameters with Angular signals?
How can I use query parameters with TanStack Query and Angular signals to be able to have a request like https://my-api/foo?filter=1,2,3?
I've created a service:
@Injectable()
export class ...
- 9,149
1
vote
1
answer
314
views
How to disable row click for one column in material react table?
I have enabled row click functionality in a Material React Table to redirect users to a details page. I also want to implement a switch component to enable or disable the user. However, when I click ...
1
vote
0
answers
577
views
How to Merge Headers in tanstack/react-table
I'm working with @tanstack/react-table in a React app and trying to merge headers for a specific column like the example in the screenshot I posted. I want to merge the ones I circled green.
Here's a ...
0
votes
1
answer
2k
views
@tanstack/react-router (Typescript) - how to get the string of union types that's auto-generated for Link.to prop?
Just like the title! The typescript support with tanstack is a lifesaver, but I would like to know how to get the actual type for the generated route paths.
For example, there's typescript support for ...
- 992
1
vote
0
answers
579
views
React Native Expo iOS App Crashes on Production Build When Fetching with TanStack React Query
I'm using React Native with Expo and TanStack React Query to fetch data in my app. Everything works fine in development, but in the production build on iOS, the app crashes whenever I log in (which ...
- 51
0
votes
2
answers
2k
views
Making columns editable in React using Tanstack Table
I have a User Table which populates and displays data in a Tanstack Table. Some columns have the sorting feature. Now I am trying to make certain columns editable. Ex: The status column needs to be ...
- 3