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
How to do the Optmistic Update?
I'm trying to do the optmistic update . In my queryKey I'm using a page state, should I use it in getQueryData as well? Another thing, in my response I get an object with the pagination and an array with the data, how can I do the optimistic update under these conditions?
How would I manage a streamed response from the server?
I am effectively making a chatbot. If you were to imagine it in "plain JS", it might look like this:
```typescript
async function createStream(reader: ReadableStreamDefaultReader<string>): AsyncGenerator<string, undefined, undefined> {
const { value, done } = await reader.read();
if (done) return;...
Debounced Autosave
Hi everyone,
I have an app where Iām trying to implement an autosave. Each time a user enters input into one of many input fields, I want to update the data across the application. However, I want to debounce the actual mutation and proceeding cache invalidation so it only happens five seconds after the data has stopped changing. What is the best way to go about this?...
How to use `useSuspenseQuery` to ensure data is always there?
Hey all. I'm working on an app where basically each screen is bound to be accessed if the user is in an account. I want to develop a hook that will provide the account data and avoid doing undefined checks. Right now, I grad the account id from the url, pass it to a query where and use
enabled to decide if the query should be called. It is called each time but the undefined checks are annoying. Another approach is to retun null early if (!accountId), which is also annoying.
Here is what I have so far:
```tsx
import { useSearchParams } from 'react-router-dom';...I hava a question for maintainer.
Hi, I have a question for a really pure question for maintainer. Why did you use the term 'query' in your library name? @TkDodo š® @Tanner Linsley
StrictNullCheck and dependant queries
Hi, me again !
I am working with typescript strict mode, and I am not sure what would be an elegant solution to handle dependant queries.
I have typesafe abstracted queries that require data to be set:
- useGetDetails...
cancelQueries does not seem to cancel trpc fetches
```
try {
queryClient.cancelQueries({ exact: false, stale: false, fetchStatus: 'fetching'});
} catch (error) {
console.log("Cancelled the queries");...
React native - mutations are paused, but are not in the queryClient paused mutations so don't resume
In summary, I have a use case where I manually allow the user to trigger online/offline status. When I go back online though, the mutations do not seem to resume at all. Not sure what I am doing wrong:
...
setQueryData changes in v5?
I'm upgrading my project from v4 to v5 of react query today and have just a couple typescript errors with some calls to setQueryData:
...
Argument of type 'Decimal' is not assignable to parameter of type 'Updater<void | undefined, void | undefined>'
Argument of type 'Decimal' is not assignable to parameter of type 'Updater<void | undefined, void | undefined>'
How to use react query data in another component without moving state up?
I am using nextjs app router + typescript + react-query. Currently my app has an input that asks a user for a url, which is then used to fetch a list of github issues. Here are the simplified versions of the files:
url-form.tsx:
```typescript
"use client";...
How to setQueryState to error
I'm using WebSockets to push new data to the client and calling
QueryClient.setQueryState with the new data to update useQuery hooks for that query all over my app.
But what about when the state I want to update with is an error? How do I inform the QueryClient of an error?...How to organize react query project
I have question about organizing react query, currently I have folder
services with folders like users, posts, and there is file for server data fetching functions called api.ts, and another file for queries and mutations (queriesAndMutations.ts)
would it be better solution to rename api.ts for example for posts, to postService, make it file that exports postService = new class postService, and there store all api calls as methods...page re-renders 100s of times when using with Wagmi (and SWR)
Just asking here, in hopes someone has came across this.
We are using a stack, which is roughly composed of
*
next.js (pages)...How to access mutationState in v4? What is the pattern to work on project with many mutations?
I have a project where my entities have many states. State is changed by post requests. I have many post requests, that return current state or error of entity.
I would like to have access to the data of post request in another component. So now i just setQueryData in onSuccess and onError. Is this right?...
useInfiniteQuery cache for useQuery
Best explained by example
website.com/todos/
Show all todos with
useInfiniteQuery , results are stored in cache
```ts...onSuccess not avaivle in useSuspenseQuery
const { data } = useSuspenseQuery({
queryKey: ["messages", id],
queryFn: async () => {
const res = await fetchConversations(id);
return res;...
Question about useQuery definition
Hello,
Can someone explain to me what "The last successfully resolved data for the query" means? I read it on the docs about
useQuery data property: https://tanstack.com/query/v4/docs/framework/react/reference/useQuery#:~:text=The%20last%20successfully%20resolved%20data%20for%20the%20query....Track data changes
Hi All,
What is the bast way to subscribe to updates of my cache in such a way that I only get notified if the data has changed? Doing this from a different place in my app than where I use the useQuery hook.
Also, how can I validate structuralSharing is working properly? Is there any quick debug I can use to check this?...