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
Passing initialData / placeholderData from the server
In the docs, the suggested way to use React-Query on Nextjs App router is by dehydrating and hydrating the query.
For me, that's a bit too much (I am a newbie ✌🏻 - still working of my mental model of...well everything) and I tried a different approach and it seems to work fine.
I just need to know if my approach is ok too, even if it's not the best. This is how I am doing it:...
sourcemap types.js.map 404
In my nextjs app, I keep running into /_next/static/chunks/pages/types.js.map 404 error locally where it tries to read types.js.map but it doesn't exist. When I did a look up in the browser, it is pointing me to //# sourceMappingURL=types.js.map from RQ. am I looking at the right thing and has anyone ran into this before?
Mocking useMutation returned value
We are testing our App component and we required to mock a hook:
```ts
const useTodos = () => {
const queryClient = useQueryClient();
...
How to Fetch, Update, and Share Data Across Components with useQuery?
Hi everyone,
I’m working on a project where I need to fetch data using useQuery and then update this data with some complex operations while using it across multiple components. I’m a bit unsure about the best practices for handling this situation.
Here’s a summary of what I’m trying to achieve:...
Prefetch/hydrate using session token from nextjsAuth
Hi,
I'm trying to understand a concept about the prefetch and hydration of the data when I need to use a session token to add it to the Authorization header. I'm using nextjsAuth to handle my sessionToken and I have two possible cases to get it in my nextjs app (First case I'm in a serverComponent and call getServerSession to retrieve the token. Second case I'm in a clientComponent and I need to call useSession to get the current session).
export const getUserInfo = (clientSession?: CustomSession) => { return queryOptions({...
Can I use useQuery in next.js server component to populate generateMetadata and hydrate client?
I have a Server component that follows the documentation to prefetch a query and hydrates it in my page.tsx:
```
export default async function ListingDetailPage({
params,...
Data stream like SWR
The SWR by vercel lib get stream of data updates constantly and automatically. Can it be implemented using react query?
Make onsuccess in queryClient specific to some queries only
Help
I want this
onSuccess to only run for queries with id userData, how do I ensure that? I read the entire blog, it doesn't address this
```ts
export const queryClient = new QueryClient({...Running a query function without useQuery
I have the following query function. How can I run this outside of a React component (e.g. loader function of a route from TanStack Router), so that it still gets cached as if evoked through
useQuery hook?
```ts
const query = async (): Promise<CurrentUserResponse> => {
return await GET('/current_user');...mutateAsyc and onSuccess
Hi. I was under the impression that onSuccess callback is not called for mutateAsync. My use case is that I only want to invalidate after a handful of simultaneous mutateAsyncs are settled. Am I wrong in my assumption? Because onSuccess callback seems to be triggering on mitateasync
No QueryClient set, use QueryClientProvider to set one
I followed the example with-trpc-react-query and the authenticated-routes, combined then but I got this error
But I can call trpc query without any issue
router.tsx
```typescript...
Manually set pageParam in v5 for useInfiniteQuery
Hello,
I was wondering what is the equivalent function to specify a pageParam when ussing
fetchNextPage in v5. Previously as pero documentation, FetchNextPageOptions took in the following option:
options.pageParam: unknown allows you to manually specify a page param instead of using getNextPageParam.
...eslint rule to prevent passing object returned by `useMutation` into hook dependency array?
I hit the issue that the object returned by
useMutation is not stable a few times (see also https://github.com/TanStack/query/issues/1858)
What do you think about adding an eslint rule that detects the following
```tsx
const mutate = useMutation(...);..."null" as queryKey
Hi all,
We are using createQueryKeys(...) from the query-key-factory so I believe technically, having
queryKey: null works. Is it still best practice to explicitly list a queryKey? What would be the argument to use something other than null if everything is being passed through the factory?...getQueryData returning undefined
Using the query keys factory with the query options API that @TkDodo 🔮 wrote about in his blog, I'm trying to update the product list cache when editing a product.
Query Keys:
```
export const productQueries = {...
Hey all. My queryFn is written in typescript, so it can have runtime errors. When a runtime error ha
Hey all. My queryFn is written in typescript, so it can have runtime errors. When a runtime error happens, react query acts like the http request failed. It didn't fail. There is another runtime error. How can I disable this behavior so that my queryFn's runtime errors can be caught. For example, I want to see runtime errors in my developer console. I want to log production runtime errors to Sentry.
Typing response based on request params
Hi!
I'm trying to figure out if there's a way to type the response based on request param in a way that will make it easy later for TS to figure out the correct response type.
What I have so far is:...
remove cache subscriber not notified
Hello, Im working on a react native applicate which renders some views conditionally based on the data i fetch via react query. This is basically a getMe call to check if you're authenticated.
When i login this data is fetched and the routes will render correctly. However when i logout i try to reset/remove the queries but the useQuery subscriber is not getting this update.
```ts
export const authQueries = {
getMe: () =>...
multiple toast messages
Hello, anyone can review this code, and tell me why the toast.success is being rendered 4-5 times?
As you can see I am using query
```javascript
const Success: React.FC = () => {...
Global error handler for mutations and meta
Hello !
I would like to know what is the best way of passing down data to a global handler ?
I checked meta and it seems almost too simple, it is better to use it or instead leverage the onMutate to provide context ?
With onMutate, if you want to use the context in the onError handler, it is harder to use it with typescript than meta because of the unknown type...