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 call useQuery inside jsx with params
How can i achieve this? Thanks
```
export function MemberQueryList({ list }: Props) {
...
Show banner to user when the mutation paused start to sync
Hello, I'm trying to do a feature where I made a mutation offline... We are using persistQueryClient.
And when I go back online, the mutation start to sync... but still take some time to sync all mutations.
I'm trying to show the user a message saying, "App is syncing".
I try to use the
useIsMutating, that work very well, but this is true also when I make normal mutations when I'm online....use createQuery inside of top level `+layout.svelte`
I am using SvelteKit and attempting to plug in SvelteQuery
In my
+layout.svelte file I would like to fetch some data and populate a search index to make the search index globally available to the rest of the application
On of the problems I am having is I can't figure out how to use Svelte Query in the +layout.svelte file...Trying to invalidateQueries and then run window.print(), but keep getting outdated data
It turns out this is "kindda doing the trick but not correctly" as if i takes more than 1second... i will get outdated info in the printed sheet.
Is there a way to wait for queryClient to finish updating the component and when it finishes, it runs window.pint?
```
const handleImprimir = async () => {...
queryClient.refetchQueries() does not fire fetch if it's requested quickly after one
Hi, I have a query to REST API and I need to refetch this query after some websocket message(message tells that information updated and I need to refetch that info from REST API again).
I'm making first REST API call on page load. and there are cases, when I need to refetch information quickly after page loads(talking about less than 1sec after page loaded).
I have this console.log in. my fetch function for debugging
console.log("HTTP useMyAlertsQuery"); :
```typescript
export const useMyAlertsQuery = (...Is there a way to store a value on initial load only?
For example, I want to load a
booking using useQuery and then only one the first load for that query, I want to set a local variable (notes). So then the booking loads, I can store the notes and then because the save is debounced, I need to keep that notes variables separate.Http / Https
Hi all, react query is changing from HTTP to HTTPS
How can I change it? just because we're running the API on localhost and I don't want to setup certificate, (painful)
so, how can I change it ?
...
prefetching based on route params always return same result
In sveltekit project, I want to fetch dynamic data on route change.
in page.ts
```js
export const load = (async ({ params, parent }) => {...
Not updating data on route change
I'm using NextJS, and for some reason the fetched data not getting updated on route change. For example, if i navigate to
test/1 page, loads the data with id 1, but if i navigate from here to test/100 the data still the same. On codesandbox this code working without any issues, but if i try on VSCode its just broken.
The code looks like this:
```tsx
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
const id = ctx.query.id;...
useInfiniteQuery - How to discard page if it returns no results?
Hi, I'm trying to use useInfiniteQuery in a bidirectional situation with both next/prev cursors
https://tanstack.com/query/latest/docs/react/guides/infinite-queries#what-if-i-want-to-implement-a-bi-directional-infinite-list
My data is real time and time based so the next page may or may not have results. Currently I'm polling for the next page every x seconds to check if there is any more data to display (via fetchNextPage()). but doing this results in an additional page and pageParams index added for every attempt....
useInfiniteQuery returns stale data even though new data has been fetched
I use tanstack query in my RN application, inside a screen and use infinite query to fetch some messages. I've added logging inside the queryFN before returning the data, as well as logging of the data retrieved from query.data
When I open the screen I see that the queryFN returns the expected data, while query.data log returns old data (i.e. queyFN logs N items, while query.data logs N-1 items).
Since I'm using a FlatList with refreshControl, when I pull to refresh the data gets synced. ...
Implementation of bi-directional cursor-based pagination
I'm implementing a bi-directional infinite list using useInfiniteQuery, based on the docs (https://tanstack.com/query/v4/docs/react/guides/infinite-queries#what-if-i-want-to-implement-a-bi-directional-infinite-list). The only parameter that gets passed to the queryFn is an object containing the page parameter (one of the two cursors).
It's not quite clear to me, in this case, how I can make my backend aware of the direction of the query (i.e. whether I want to get the records after or before the given cursor value). What would be the recommended way to implement this?...
No refetch on query key change
Repro: https://codesandbox.io/s/vue-query-keys-8c95g0?file=/src/App.vue
I'm having issues where my query does not refetch even though its query key has changed. If the component is remounting the query runs with the updated archived state. Am I missing something? I am using
@tanstack/vue-query + @lukemorales/query-key-factory
```js...Query refetching using hydration for Next 13 experimental app
I'm trying to follow the docs on prefetching data using the new experimental next 13 app directory. However I find it hard to understand how prefetching actually works
Server component:
```javascript
export default async function HydratedPosts() {...
Keep track of mutations and allow undo to state
I am trying to implement a history feature of a state received by Tanstack query. The user should be able to undo all the changes done to the state before it is actually sent back to the server. Does Tanstack Query provide an API for this "timeline" history? If so, can somebody point me in the right direction maybe with a good example?
refetching on client side?!
hey, I use react query and graphql client in a next app to fetch data from contentful. I wonder if I need to have the token publicly available in order to use react query due to the fact the revalidating of the states is happening on the client side?! Or am I misunderstanding something here? I am just concerned about having the access and previewtoken written in the client bundle?! Any ideas?
How to use PersistQueryClientProvider to persist to IndexedDb
What needs to be changed in this code snippet, to work with IndexedDB?
const persister = createSyncStoragePersister({
storage: window.localStorage,
})...
How to update query data without resetting refetchInterval timer?
I have a query that should be re-fetched every X seconds. The solution is to use
refetchInterval. But I noticed that calling setQueryData resets the refetchInterval timer.
In my case, I have a websocket connection that updates part of a query data every 100 milliseconds (with setQueryData). If the refetchIntervalis larger than 100ms, the queryFn will never re-run. But I want the queryFn to re-run because the websocket only updates part of the query data and I want to keep the rest of it in sync with the server using refetchInterval. Our API socks and this is probably an edge case, but I have no choice but dealing with it. Is there a solution?...Confused between older and newer usage of useQuery
I'm looking over some older code I wrote and it seems totally different to everything in the docs now.
```ts
export const useNextLaunch = () => {
return useQuery<NextLaunch, Error>(queryKeys.nextLaunch, async ({ signal }) => {...
when queryClient.setQueryDefaults is called, the options passed are not saved
My intention is to call
setQueryData and then set the cacheTime and staleTime to Infinity :
```
queryClient.setQueryData(['myQueryKey'], {
myData: "someData",
});...