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
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....
Best approach’s to to ‘derived collection’?
Hello fellow!
I have some queries that works with web sockets, so I feed cache and fulfil the promise.
1. Those queries receive ‘entities/collections’, like db tables. ...
How can I get the returned type from select
hey folks, I have this parent component which call a useQuery
```tsx
const bucketsOption = ({ accountId }: { accountId: string }) => {
return queryOptions({
queryKey: trafficRepartitionKeys.buckets(),...
Best practice around using `useDeferredValue` on mutation status?
This could very well have a very straightforward answer but basically I have a component that conditionally renders its content based on a mutation's status. However, the design of the UX means that there can be a pretty jarring flash of content as the status goes from
idle to pending to error.
From what I can tell, using const deferredStatus = useDeferredValue(mutation.status) solves this flashing issue perfectly! Unfortunately, it means that I don't get the type narrowing of the original mutation when trying to use it within the conditional render. Is that just something I have to accept and work around?
I tried wrapping the whole mutation i.e. useDeferredValue(mutation), which seemed to work, but it felt wrong to do that given that it's not really a scalar primitive value as suggested by the React docs to use...How to optimistically update onSucess not onMutation?
I've been trying to optimistically update a list when a create / delete mutation is actually successful in order to not wait for the invalidation refetch or deal with rollbacks and weird jumps. I'd rather have a spinner for the mutation and then immediately show on success. I've tried this in multiple ways (trpc + RQ in new integration) and whatever order i put things in it seems that most of the time it does not work, only occasionally it does and that seems completely random. But most of the time it just does not update the list at all.
```typescript
// inside form component
const mutationOptions = trpc.services.create.mutationOptions({...
Recommended approach to type-narrowing `useMutationState`?
I'm trying to get the strictly-typed mutation state of a specific mutation that's performed on a previous page but not sure if there's an elegant way of doing this with
useMutationState. From what I can tell, query uses a wide type because it's pretty difficult to infer the actual mutation state type based on the options for useMutationState, which is understandable.
What's the recommended approach in this case? Do manual narrowing in the predicate or select options?...Error handling with `queryClient.fetchQuery`
Hi! I have a
useQuery that used to manage fetching events that occur between two dates. The previous implementation expected external state, so this was no problem before. However, we are migrating to a different library, and it has a very different structure.
It instead expects me to handle (start: Date, end: Date, onSuccess: (events: ...[]) => void.
Most of the query hook is easily transferable to queryClient.fetchQuery (select, success handling, endpoint etc.). However, One thing I lose out on is the query.isError functionality, which is kind of a shame, because I know that this query can fail due to reasons that the user should know about.
...Pass a generic infiniteQueryOptions object as parameter
I posted in the main thread but adding a question here... I feel like I'm very close to getting the types working but could just be something that isn't supported
I am struggling with type issues a bit - i am trying to create a generic hook that can take in a infiniteQueryOptions that will ensure a "standard" PaginatedResponse object from the queryFn. I dont have any errors in types on my useGeneric function but when i go to actually use it i run into a type errors with queryKeys being readonly. Is this something that just isn't possible? (https://github.com/TanStack/query/issues/7974) i found this issue but is bit different use case than mine...
API call extremely slow in production but works fine in development
I want to fetch a list of products from our hosted server and display it in the frontend.
In the development environment, the API call works as expected.
However, when I run the production build (either locally or in prod), the same API call takes more than 10 minutes for unknown reasons. ...