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 access queryClient to invalidate cache?
In my Next app, I am initializing
queryClient from _app.tsx. I have some instances where I want to invalidate cache (for example when I mutate data). From the docs (v5) it seems that the only way to do this is through queryClient.
What do you think of something like this, is it okay? It bugs me that I am importing something from _app.tsx, at the same time I am not sure how to do otherwise.
```tsx
export const queryClient = new QueryClient();...share data from component
hello everyone
I have an isssue with react-query v5 , how to I can store data from API response and using to other Page , example I have Form Page , I want to save data from API response using useMutation and then I can get this data then using Home Page . I spent one day and no solution . Thannks to erveryone...
useQuery fire on each mount
Hi, i'm trying to create a fetch of cities, but everytime i interract with an ellement the fetch is fired again.
Am i forced to put my query in a useeffect ? and so create a useState for Error and isLoading ?
Thank you
...
react-query doesn't use the client cache from the useInfiniteQuery when routing to the same link
I'm using the latest next.js (14.1.0) app router for the project. I used queryclient.prefetchInfiniteQuery on the server to get the data (12 posts) I wanted on route /blogs/page.tsx and hydrated the client component inside this server component with <Hydrationboundary>. Then I used useInfiniteQuery to fetch the data (6 posts) on client as client interacts. Now this works perfetctly for most part, I get prefetched data from server to be loaded on first render and subsequent data fetch on client side with client interaction and I even get the scroll restoration working perfectly fine. BUT I encountered a problem
I clicked on <Link> (from next.js) from the blogs page to go back to home and then click on <Link> towards the blogs page, now the entire cache is gone, the data that got rendered was the data I prefetched from server components just like the first time. I tried to find what was wrong, the code works perfectly fine with cache persisting when I removed prefetching on server and only fetched from client side. Adding prefetch on server created all the problem but now I'm left confused, what really went wrong? I really want to use the prefetch on server....
invalidate without using hook
Hello this is related to the question at https://discord.com/channels/719702312431386674/1208254624327278712
I am having issue invalidating my queries from tanstack table columndefs. I am wondering if there is a way to invalidate queries without using hooks?...
"a vast majority of users do not actually need a normalized cache" ... "check with us first"
hello community, saw this warning in the docs and figured i'd ask if i'm in the rare minority on needing a normalized cache.
we have an SPA and a REST backend that returns JSON responses. the data is relational, and we have the option of having it nested, or making multiple requests for related entities. we have a websocket connection which gives updates in real time to individual entities. we show a large collection of entities and their related resources on the page (slightly expensive to fetch), and the realtime updates happen frequently and so, invalidating the cache upon receiving a websocket message would be wasteful compared to updating the cache in memory.
does anyone have any recommendations? my best idea has been to normalize the cache by spraying additional cache keys of each individual entity's primary key so that they can be updated easily, and then having to call getQueriesData in all of the components that need to read from the cache. i also saw someone made this library: https://github.com/klis87/normy/tree/master/packages/normy-react-query but i know that y'all have thought of nearly everything and still decided to put that warning in the docs...
Clarity about keys and refetching
```const { data: filterResponse, isLoading: isFiltersFetching } = useQuery<
ResponseFromApi<any>
>({
queryKey: [
"/traces/filter",...
empty data on refetch error
I have a simple useQuery that on success shows the correct data, but on error is returning empty.
```js
const {data, error, isLoading} = useQuery({
queryKey: ['time-entries'],...
useQuery with different queryKey
so basically guys im trying to fetch an api using react query and i find my self doing some reptitive code durning the fetch so i decide to make this :
```
const fetchData = async ({ queryKey }) => {
try {
const res = await axios.get(...
React Query fetches data even if staleTime is set to Infinity
Hello, hope everyone is doing great.
First time I am using React Query, so excuse the noobiness. I am trying to understand React Query through this simple example (local server) where I check the Network tab to see if requests are made when data is fresh. Whenever I refresh the page, an HTTP request is fired, even if data is not stale (I am using React Query Devtools to check this)
```jsx...
How to implement a callback/action when the query is successful?
Hi there previously I did something like this
```tsx
// On success, omgevingscheck data is saved in cache and in ctx.
export function useOmgevingscheck({ wkt, verzoekAard }: IBodyProps) {...
useQueries isPending is always true
When using
useQueries, I see that even if I set placeholderData isPending is always true when refetching with different params.
What I'm trying to have is a Skeleton on first load, then a "loading indicator" when the user triggers another request because of a filter or something.
If isPending and isLoading are always true, how can I check that the request is not happening for the first time with useQueries?...Initial data is applied when the query key is changed
This all works well until I change the query key and then it goes back to the initial data until I fetch the new data.
```js
export const usePostInfiniteQuery = (
postIds: number[],
initialData?: NewPublicPosts[],...
How do you provide a default select function and keep TypeScript happy?
I'm using v4 and trying to follow this example tweet
https://twitter.com/TkDodo/status/1657026702512467970/photo/1
I'd like to provide a default select function, but also give the user the ability to override it.
...
What's a good style for organizing useMutation and fetch function types?
I'm curious how folks tend to organize the types for their mutation queries. In my experience, the mutating fetch function and the useMutation hook kind of share the same type, but expressed in different ways. For example, the fetch function might accept the entire type, and the useMutation hook might Pick pieces from the type to use in the initial call to the hook, and in the mutate function itself.
Here's an example to demonstrate how I've done things in the past. It works, but it feels a bit clunky to me. I'm curious if folks have a nicer approach that they prefer?
```ts...
Suspense and Mutations
Hi! I think this is probably me misunderstanding things, but I just refactored our app to use Tanstack v5 because I wanted to start utilizing React's
<Suspense>, and I'm trying to understand how it can (and if it should) be used with mutations. For example, we have a file upload that is being handled with a mutation. When the mutation is in progress/file is uploading, we want to show a loading indicator. Can <Suspense/> be used here somehow? Or, since this is a mutation, it needs to use cond...How to install old version of tanstack react query using yarn
I was following a tutorial on youtube where there was an error because tanstack/react query isnt compatible with trpc so I had to try installing an older version, when i tried using 'yarn add @tanstack/react-query 4.36.1' i got the following error 'Error: https://registry.yarnpkg.com/4.36.1: Not found'
Migrated from v4 to v5, don't know how to use it without onSucess
I have tried removing the onSuccess as I should, and then including it in the an independent useEffect, but the content renders for a split second and disappears.
```
export default function Facturados() {
const [desde, setDesde] = useState(router.query.desde || '')...
Hide API key to frontend
Hi, short question can https://tanstack.com/query/latest/docs/framework/react/guides/suspense help me on making queryFn invokation in a rsc; because i dont want my api key to be leaked in frontend ? thank you
Migrating v4 to v5 give me couple of errors on some of the queries
Hi there i'm trying to migrated to v5 using the
codemod in the docs. After running it, I get some queries where I have to manually migrate te query. But I'm having problems understanding the error and how to migrate them. For example
```ts
// v4...