176 questions
0
votes
0
answers
7
views
"Error: No QueryClient set" when using TanStack Query in a component package across repositories in Next.js
I have a Next.js application (main-app) that imports and uses UI components (widgets) and API hooks from a separate repository (abc-widgets).
These widgets internally use API hooks that rely on ...
1
vote
1
answer
45
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 ...
- 7,978
0
votes
1
answer
25
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
0
answers
23
views
Tanstack-start module federation import error
Try to use @originjs/vite-plugin-federation in tanstack-start application, but it throw an error while importing remote component like "Error in renderToPipeableStream: Error [...
-1
votes
1
answer
69
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.3k
0
votes
0
answers
20
views
How to avoid duplicate API requests from both Server and Client sides using the @tanstack/vue-query package in Vue?
I recently took over a project where the frontend uses the @tanstack/vue-query package to send API requests to the backend. How can I avoid duplicate API requests from both the Server and Client sides?...
- 1
0
votes
0
answers
14
views
Handling an Editable Table with react-virtual for 5000+ Rows
I'm working with a large dataset (5000+ rows) in a React application and want to use react-virtual to optimize performance. However, the table also needs to be editable without causing lag while ...
0
votes
1
answer
35
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,809
1
vote
0
answers
130
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,607
0
votes
0
answers
200
views
How to implement a virtualized tree structure using tanstack/virtual
I'm implementing a pivot table. I want to use react-virtual to implement the virtualization of the pivot row/column headers. May I know how to achieve that? I wonder if I should use nested ...
- 4,809
1
vote
1
answer
596
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}/{...
- 3,973
1
vote
1
answer
262
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 ...
- 445
0
votes
1
answer
579
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,011
0
votes
1
answer
88
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 ...
0
votes
0
answers
47
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
0
votes
1
answer
424
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 ...
0
votes
0
answers
203
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 ...
- 69
0
votes
0
answers
57
views
Symbol Already Declared Error in Tanstack-Router using File based routing
I'm getting the following error
dev-ui-x-1 | �? [ERROR] The symbol "IntelIocTypeSummaryRoute" has already been declared
dev-ui-x-1 |
dev-ui-x-1 | src/routeTree.gen.ts:50:6:
dev-ui-x-...
- 672
0
votes
1
answer
79
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 ...
0
votes
1
answer
90
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
304
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 ...
- 8,619
1
vote
1
answer
139
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
333
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
1k
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 ...
- 982
0
votes
0
answers
141
views
@tanstack/react-router - aria-current="page" on parent <Link> still set on child routes?
I'm using @tanstack/react-router file-based routing. I have links in my __root.tsx element. Let's say some of these links point to /route1, /route2, /route3.
In my global scss file, I have a line like ...
1
vote
0
answers
333
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
1
answer
802
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
0
votes
0
answers
98
views
vitest test specific module mock
I have a module inside my component.tsx that renders a tanstack table.
I have a file storing mu columns and what they render, and one of the columns, control if I can show an expanded row or not in my ...
- 1
1
vote
1
answer
37
views
Problem with TanStack and 'useIniniteQuery', 'isFetching' property always on true
I'm trying to learn how to use TanStack with TS, but I have various problems, I'm trying to execute this line of code, to obtain the data out of an API.
const { isLoading, isError, data, isFetching, ...
0
votes
0
answers
62
views
Preserving Subrows Visibility When Filtering Parent Rows in Material React Table
I’m currently working on a project using Material React Table v1, and I’ve encountered an issue with filtering. According to the TanStack documentation here and MRT documentation here, enabling the ...
- 1
2
votes
1
answer
426
views
Have an error: "Column with id 'id' does not exist." by @tanstack/vue-table (vue3)
I have a red error in a Browser console when creating a table by @tanstack/vue-table. It is error is not critical. If I change 'name' -> 'id' - do not have an error, but I do not need to show 'id' ...
0
votes
1
answer
85
views
How to change accessorKey value based on row value
{
accessorKey: "userId",
header: ({ column }) => (
<DataTableColumnHeader column={column} title="User Id" />
),
cell: ({ row }) => (
<...
- 9
0
votes
1
answer
942
views
Custom sorting function for TanStack Table not working as expected
I'm using TanStack Table with React and I'm trying to implement a custom sorting function for the "status" column. I want to sort the status in a specific order like so: 'none' -> 'single'...
- 1
-1
votes
1
answer
1k
views
Can any one explain how i can manage context with tanstack router?
AuthcontextProvider.tsx
import {ReactNode, useEffect, useState} from 'react';
import {AuthContext} from './AuthContext';
import {Token, User} from '@/types';
import {QUERY_KEYS} from '@/lib/react-...
0
votes
0
answers
387
views
Columns setup giving strange behaviour with react-table (Tanstack Table v8)
Some column attributes when changed slightly in the given data, will completely break the table and I have no idea why.
For context, I have a habit tracker table, where each cell contains a checkbox ...
- 55
0
votes
0
answers
697
views
how to add default checked rows in shadcn data table?
https://ui.shadcn.com/docs/components/data-table I use data table from shadcn on top of tanstack table. I have set logic where you can create or edit set of products. I'm getting all products and ...
0
votes
0
answers
363
views
Using Jotai with Tanstack Query and KindeAuth JWT in atomWithQuery
I am trying to use the TanStack Query extension to Jotai. The direct integration to the state management is sweet, but the limitations with not being a top level function for react hooks seems ...
- 949
1
vote
2
answers
1k
views
Shadcn ComboBox form + Virtualized TanSack list in NextJs14 application
I have a client component in nextjs that implements a form which contains a dropdown coupled with search properties, it uses the fammous shadcn library + some tanstack virtualizer because the list of ...
- 2,419
4
votes
2
answers
149
views
How to search for multiple strings with AND using JS filter in reactable?
My question is the following. I am trying to create a reactable with R, and I basically want the search bar to be able to global search for multiple strings separated by a whitespace; so for example, ...
- 411
2
votes
1
answer
544
views
Querying data with React Query and React Table causes page crash
I'm developing an app with React Query and React Table but table seems to break when I change the query key, thus causing the website to crash.
I opened an issue on their GH but I still have no ...
- 2,035
0
votes
1
answer
2k
views
Tanstack Router does not render redirected route after query error
I am using @tanstack/react-router and @tanstack/react-query in my React application. I have set up a QueryClient to handle errors and redirect to a login page if a 401 Unauthorized error occurs. ...
- 604
0
votes
1
answer
206
views
Wrong version of Tanstack Query DevTools is showing
I've installed the latest version (v5) of the devtools by using the following command
$ npm i @tanstack/react-query-devtools
While I expected a palm tree icon for opening the tools, my browser is ...
- 41
0
votes
0
answers
438
views
Is there a way to group rows by a nested data using TanStack table v8?
It appears that Tanstack Table cannot group rows based on nested data.
this is my document structure
type Team = {
id:number;
name:string;
number_players : number;
}
type Person = {
id:number;
age:...
4
votes
1
answer
4k
views
How to implement server-side pagination with TanStack Table and trigger data fetch on page change?
I am trying to implement server-side pagination using TanStack Table in my Next.js project. I have followed the instructions provided in the TanStack Table documentation. The table is displaying ...
- 1,265
0
votes
0
answers
34
views
React Typewriter-effect doesn't work properly on mutation
in this code the new answer comes from a mutation function from tanstack query. I want an effect like chatgpt to run the code only if the answer is new but this simple typewriter won't run even ...
-1
votes
1
answer
736
views
React Query useQuery can't trigger repeat call on click
I have a table of info where each row has a button to trigger a useQuery that will eventually open a new tab where more info about that row can be seen.
I can trigger the call to work as expected the ...
- 6,358
1
vote
0
answers
72
views
i use tanstack react query and in this i use useInfiniteQuery now i want to do invalidatequery for particuler page how to do this?
enter image description here
When you invalidate queries, you essentially tell your caching mechanism to refresh the data it has stored. However, if you invalidate all queries upon update, it triggers ...
- 11
1
vote
1
answer
2k
views
How to improve scroll performance of react tanstack table with virtualization?
We're having a big problem in our app where the each row rendering in our table adds a high overhead and blocks the JS main thread with long tasks, making the app feel over slow and sluggish. We're ...
1
vote
0
answers
196
views
TypeError in Tanstack Query React
I am new to react tanstack query and I am building a todo list app to reinforce the concepts that I am learning. The todos are coming from DummyJson API -https://dummyjson.com/docs/todos. The response ...
- 137
1
vote
2
answers
2k
views
Tanstack table v8 not resizing columns
Having this react component:
import rawd from '../../data.json';
import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"
import { useState } from "react";...
- 1,975