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
Better-Auth Integration
I have successfully refactored the better-auth nextjs demo to tanstack start
https://github.com/better-auth/better-auth/tree/canary/demo/nextjs
But I have a question:
...
invalidateQueries not invalidating
I'm using tanstack router with useSuspenseQuery (
wrapInSuspense: true). I have two APIs: one is a list of users and the other is the user details. You can favorite a user on the list page. You can click on their username to take them to the details page. You can view and favorite the user on the details page.
On the list page I can see user1 is favorited. I click on user1 and it takes them to view user1 details. I see that they are favorited here too. I go back to the list page and unfavorite. I see they are unfavorited there. I go back to the user page and see they haven't been unfavorited. I call invalidateQueries on both inside the mutator.
Toggling the favorite on either page will invalidate the currently rendered view correctly, but it's as if the other view isn't being marked as stale....useSuspenseQuery + TansTack Start with better-auth
I have successfully refactored the better-auth nextjs demo to tanstack start
https://github.com/better-auth/better-auth/tree/canary/demo/nextjs
But I have a question:
...
New to Tanstack Query, Help me understand ,
new to tansatck query
i have a inventory management /payment / transaction settlement application on react + spring boot
as in this there are lots of tables , using tanstack table for them
and fetching data , all api calls done with axios
JWT token , have been intructed not to use cookies , currently stored in localstorage , havent used any state management libs too like redux zustand ,...
Disabling `useSuspenseQuery` on the server with TanStack Start
Hey!
I'm using TanStack Start + Query together, using suspense everywhere, and have a long-running query that I don't want running in SSR. I'd rather it just run on the client.
I originally thought I could just disable the query, but found
enabled is not a supported property with useSuspenseQuery. ...Preserving search results with useInfiniteQuery
I have an infinite endpoint which is hooked up to a form, the user can search for and select user “Steve” who is not on page 1 (without search).
The onSearch clears in my select component, and this makes the react query trigger with an empty search value, it refetches page 1, and then removes the “Steve” option.
How can I preserve that option? It works fine for normal scrolling, but not with search. ...
Looking for work as a Frontend developer
As an Angular/Vue.js developer with 6 years' experience, I craft fast web apps using RxJS/NgRx and Composition API/Pinia for state management.
Modern TypeScript/JavaScript drives these implementations, paired with MUI/Tailwind CSS for polished interfaces.
Seamless REST/GraphQL API connections bridge to backends, occasionally enhanced with Node.js/.NET support and SQL/MongoDB databases.
Recent projects incorporate AI tools like OpenAI/ChatGPT for smart features in Angular/Vue environments....
invalidateQueries not triggering refetch consistently across projects
Hello,
I’m running into an issue with invalidateQueries. I’m using the same setup in two different projects, and in one project it works as expected, while in the other it doesn’t trigger a refetch after invalidation.
Here’s my setup:...
Server side query caching with TanStack Start and Query
Is it possible to cache an api call on the server side using TanStack Query and Start?
Example: my API provide an endpoint that returns a list of states given a country code. This list will not change during the application lifecycle, and don't have any problem if shared by all users....
how can I infer type from queryFn for colDef
I have a generic component to accept a queryFn and colDefs as props, but somehow it cannot infer the type from the queryFn return type properly when there is param in the function
but if you comment out the "columns" and use the "render" instead, it will type correctly, but I need the columns way...
can I have some help for this, thanks
https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4AoUSWOAb3LjhgE8wk4BhCAGwFcQAdgBEkmcgF842XAQACMFAIDOCtAGsA9EXQwAtAoBG3JGUrho8WnF5KkARV5IozOJOl588xSvSbtGXQBHR2dTciQAD2p4NAhleABlXCQucwEkAXgAXjgAHgAVIRQFABo4fIA1FD4kAD4ACjAcMCUALjoGOFi+QTbOHn5hUQKi0vKqmtqAbQBdCkZgp2YAMQF2+uABMF4YdqsBFBAkdpUoTYBzVwBKOCzauAAFHBBgW1yrABNilHbC79nXLV5nANBo4EQBB8nBsYEgQL9Rigru1kDoAHSojAAOQgUNIILBwEwcGYEF4XVwR0ycDJ8BgAAt2N1Bko4IoPtZbEx6a84JsVKgPmUGewWGALnAAO7AbjcOAGJnQIgYMoGHZ84nShkUnrKPkCbnsJSHUWgJBlYDwaWyuAqGVyyU4ATnCQ3O4dRixeJwKYHI5lWwwLEmma3RDEGBomxIBIKWH1fD4K4UTpelR0OBfBSuMPRhxLer0RgLELMADSSGY7Sm+EtcKU+DK+xNAeSDIuAFFuLZ2gBGABMAGZXDMSp0S0tVus3fcmhAWmjFs5VoW4H72OIrmPGJuU4wiDBeFADfVx3lamfGLlNtt4HEOPTFOckFlaPUkDPbUggyb32iFFAz6RgAbtUjhXJIoE1K+66SBoF7FsWtBZigAD8aIoehIAoGA9QwnCFqQpEn6nohiG5JikbLFAKDnFS8BqJWr6bFCETiLUtB1ngKCsrwAhqAIECSgaPG2jAZzOuIuQaJRaLUbR9EIWRVwQWe0lKcmEgppE0QUt6ACyzAAKq2FAqSQOk1I5PUn5Fnp6aYN+aD0iZTisjkPHMAIaBwPUtgoFAzknOJFwkXZjAodWl4ZsAHx9mU67tPgACC3DAGgJiuNuZFWLF7T9glJpJQAQhABj4FlZ4zGimAyrCUB4dGUCfgAhP5gX0nAAA+XWck4aLrrcWQ5O1zlbp0u7kJ0B5HiealKeRSRHOZcQZDA0WegMvSvlMVgZbK6ybJgECfkdEBojgkpotAwDnJs1QDS2cCMigUJQElwZHBV4gzJIG1wEuKwCK+Nm3PcjkwM5rlQEoCZKMka4mkm4j-aC4IZG9INcZ+uQfMAwEcVxj1HFJGh4wTKNkSCC3FrkS0pLgFlrf9zLbbQu1dEgB2+Wdp0CMdF1CddZx3Qc3DE+az2Ck4H1IyOcFgpKjIGiKRB8qyTSHKJc7AbFSAcpshoA6WqzylzQllDdovVFK9pm7ERxwAARHxAlCQITv-YDqwg82jubmDUhOS5pmw+uqlU4waMQpjb7Y4HuP44TsIgBLpPk7UlNkfBak54wmniKQQA...
Preventing waterfalls for (mostly) static data?
Hey everyone, i'm currently making a duolingo clone as a practice project and have some issues with designing the initial fetch for the "paths" part and how to store data afterwards.
The app is structured in a way that a course has multiple sections, a section has multiple units, and a unit has multiple lessons.
The situation is, where when a user loads a section, it should ideally fetch all units and lessons for the section that was loaded. The units and lessons dont change often, but i am not 100% sure,...
Looking for work as a Frontend developer
As an Angular/Vue.js developer with 6 years' experience, I craft fast web apps using RxJS/NgRx and Composition API/Pinia for state management.
Modern TypeScript/JavaScript drives these implementations, paired with MUI/Tailwind CSS for polished interfaces.
Seamless REST/GraphQL API connections bridge to backends, occasionally enhanced with Node.js/.NET support and SQL/MongoDB databases.
Recent projects incorporate AI tools like OpenAI/ChatGPT for smart features in Angular/Vue environments....
Project structure with a global loading gate (data is required to be available after a point)
I'm working on a NextJS (app router) project and what I want is that, if the user accesses certain pages within the app (those pages would be grouped using a next layout group), certain pieces of data/queries are always available. I apologize in advance for complicating things with nextjs.
By that I mean that I can use those queries without checking the "isPending"/"isLoading" properties on the query, I just need to be certain that they are available and for typescript not to complain.
What would be the right way to structure my code for this? There is a prefetching example on the docs (https://tanstack.com/query/v5/docs/framework/react/examples/nextjs-app-prefetching) but I guess I will still need to check loading states with this right (typescript won't be happy at least). Should I use
useSuspenseQuery and Suspense for my use case?..."Nesting" mutations?
I've got a core
useUpdate which does a mutation and invalidates some queries in the onSuccess.
I've got another useArchive which is really just an update, and should do the same invalidations as useUpdate, but then also a few more things (like some other invalidations) in its own onSuccess.
But then I've got a third Sidebar component, which uses useArchive in an event handler, and then has its own onSuccess logic (e.g., close the sidebar)....TanStack Start blocking custom local subdomain
Hi everyone! đź‘‹
I'm having an issue with TanStack Start when trying to use a custom local subdomain for development.
What I'm trying to do:
Set up cross-domain cookies between localhost (dev) and .smart-garant.fr ...
queryOptions dependancies
I have the following code (screenshot).
In my tanstack start loader for a route I am doing:
```...
Question about using React Query as a global store
Hi team,
We’re currently using React Query as a sort of client-side store or global state in our application. Here’s a simplified example:
```ts...
prefetchQuery vs ensureQueryData in SSR
Can someone explain the difference to me of these four?
```
loader: ({ context }) => {
// 1. prefetch without await...
Tanstack DB - Live Queries return zero results sometimes
I have a nested datastructure - a trip can contain segments or days, segments contain days, and days contain activities.
I am trying to render these via live electric sql collections.
When first load my page everything works fine, but when I edit the list of days my activities seemingly disappear...
isPending always true in react-native
I have a simple use case that it baffling me. In the latest expo 53, on iOS or Android simulators, a successfule query (returning data as shown with logging) is never updating the isPending status, never adds data to the query and never changes isSuccess or isError. The state of the query object never changes. I've checked that the query client is coming from an external module (so isn't being reset on re-render) and that the provider is wrapped around the app properly.
The app uses expo-router, if that's relevant. Any help would be appreciated....