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
Recommendation on storing list data as is and by id with one server side response
After reading through the deprecation post on onSuccess for useQuery, I'm having a hard time wrapping my head around how to massage a single response from my API into multiple query keys.
I have a number of JSON APIs that return back a list of Widgets that the user has in their account. We fetch them all in one go and each JSON object of a widget returns a unique id for that widget. There are routes that require all widgets and some that focus on a single Widget by ID in that list.
Ex.
[ { "widgetId": "1", ... }, { "widgetId": "2", ... }] etc ...Only throw error if there is no data in the cache
Hi everyone, I'm configuring react-query with
throwOnError option set to true but I only want the error to be throw when there's no data in the cache. Is there any way to achieve that with react-query ?Is a query not supposed to be generated upon page refresh?
I've observed this behavior where navigation from Page 1 to Page 2 adds the desired queries to the query cache, such that mutations that invalidate the target queries results in the desired refetches.
However, if I refresh Page 2, which calls custom hooks that in turn call useQuery, and then call the mutation method, the queries never appear in the cache to be invalidated, and therefore no refetch happens.
Is this expected behavior? Is there a way to resolve the difference in behavior between navigation and page refresh? Thank you in advance.
...
Access Mutation Data
Hello Guys,
What is the best way to access data returned by a mutation?
```js
const mutation = useMutation({ mutationFn: useCreateInvitation });...
infinite scroll network 200 but undefined
I'm trying to implement infinite scrolling of chat content.
The data result is 200. If you check the preview, you will see the following.
However, when outputting to console.log, undefined is displayed. What's the problem?
"react-query": "^3.39.3",...
onSuccess migration: what to do for this use case?
Hey friends, I read TkDodos blog about killing the onSuccess APIs and that seems great, I'd love to hop on board. Everything he writes about makes a good amount of sense and I totally see the overarching reason -- onSuccess for useQuery creates a lot of anti-patterns.
There is one use case I still can't wrap my head around -- creating arbitrary values for client side rendering in server side data.
I have this state for ingredients, which, from the client, accepts a "selection". The database does not need to know, and should not know this information. The client messes with it and we do something with that client side state later....
angular-use-query: track refetches
Hello,
I'm using angular v17. I would like to monitor the query changes from tanstack query, and publish the results to a local store of mine. Basically, each time it refetches, i would like to be notified somehow, so i can retrieve the latest data,errors,isFetching,etc and publish them.
I could imagine an API like this:...
Filtering data in a Tanstack (Mantine) React Table
I want to filter the data on two fields which are not in one of the columns, the fields are called isActive and isArchived. When the isActive button is pressed in the table header I want the data to only show the active employees otherwise all employees should be shown, if the isArchived button is pressed I want the data to only show the archived employees otherwise I only want to show the unarchived employees. Is it best to use the select option inside the useQuery or are there better solutions...
Disable horizontal scrolling by keyboard keys
Hi, does anyone know if its possible to disable that the keyboard keys scroll (left and right) horizontally through the table? I have not found an option to do so
Batching single queries for better caching?
Hi all, let's say I have a situation where I'm fetching a paginated list of a users todos and then as a dependent query I want to fetch extra details about those todos. The issue I'm running into is that a page of todos can change based on sort/filter etc so I can end up fetching details of the same todo multiple times if the set of IDs on the page changes as those IDs are in my query key for the details.
For example:
1. I have todos with IDs 1, 2, and 3 on page 1, my dependent query fetches with key ['todos', 'details', [1, 2, 3]]
2. User sorts by name...
Use `select` or return from inside query function?
We have an API that returns
{ metadata: Record<string, CustomType> }. Often times we only want one of the returned CustomType. The Record is of IDs to CustomType so when we pass in one ID, we only want one returned.
Should we be using the select function to return that one object or can we return it right inside the query function?
Using select:...I'm stuck with latest changes to use query and mutation
Docs didn't provide much on use query and mutation after 'removing the callback', use query and mutation, and no examples provided!! I need examples on how to use both, Thanks in advance
Query Invalidation with NextJS App Router + RSC
Hi there, running into a bit of a tricky situation with React-Query, Next.JS (App router), and server components. I have a feeling I'm using RSC + react-query incorrectly, so if this is just a dumb use case, feel free to let me know.
I'm following a similar setup to the getQueryClient() example here: https://tanstack.com/query/latest/docs/react/guides/advanced-ssr
```
import { AscOrDesc } from "@/gql/graphql";...
do i need to check cache before query?
do i actually need it? as i understand RQ will do this under the hood for me ?
I could not understand why I can not add onSuccess on useQuery
here is the code.
```
} = useQuery({...
Fetching infinite query data without any UI action to invoke fetchNextPage
Hi, I have a use case where I need to call a paginated API but I need to show all the data at once on UI instead of asking the user to load the next page. Since I can't invoke the api to return all data at once, is there a way to achieve this by fetching all pages in the background without any use interaction?
In what situations the `data` content gets reset?
I'm trying to use Query to handle an analytics dashboard. The query key is made of the url plus query params, the latter contains a start and end property. Every 30 seconds the time filter gets updated to use the latest timestamp.
What happens is that React Query re-triggers the
isPending because, after some debugging, I found out that at every call the content of data goes undefined even though there was some stuff before. I've tried to check for some unwanted rerender but everything looks fine.
In your experience, when does the data content gets reset?...isPending is true by default without query.
I want to show a loading message while isPending is true but its true by default, so what could i do?
...
if(isPending) return <p>Loading...</p>
if(isPending) return <p>Loading...</p>
Bypass loading state between two queries
Let's say you are iterating over a paginated list where each page data is fetched with useQuery
How to avoid the spinner during the time where the data is getting fetched?
In most cases, and assuming that the queries are optimized enough, you'd rather want to show the page1 data for some amount of time until we receive page2 data, and avoid the spinner phase.
...