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
Next.js using RQ hooks in pages dir with app dir root layout
Hi, we are trying to gradually migrate to the app directory but having a query client provider in the root layout breaks all RQ hooks in the pages dir.
Repro: https://codesandbox.io/p/sandbox/zen-cherry-4mknmy?file=%2Fpages%2Fpages.tsx%3A4%2C1
Anyone know if this can be fixed, or where I can find more info on this issue?...
SSR in Next.js with `getInitialProps` behaving strangely...
Caveat I’m currently stuck with
getInitialProps , it may be a red herring though.
I’m doing the standard hydration method with Next.js, albeit with the previously mentioned getInitialProps.
SSR works great locally when running in development and build....Is using `initialData` and `queryClient.setQueryData` in SSR an antipattern?
My use case is to avoid undefined data on first render and make the data available in child components without providing
initialData again.SEO Friendliness
So I've been using react-query lately and I realized that the prefetched data is stored in JavaScript. Hence, when I disabled JavaScript in browser to test the page's SEO-friendliness, the prefetched data are not rendered. Is this behavior intended or did I miss something? How should I do SEO using react-query?
Refetch only part of infinite query pages
Hello!
In the documentation for React Query: (https://tanstack.com/query/v4/docs/react/guides/infinite-queries#refetchpage) it is mentioned that there is a way to refetch only part of pages for an infinite query.
I was wondering if there's a way to specific a refetchInterval or staleTime in combination with specifying specific pages that should be refetched / become stale....
useMemo and queryFn
So I have a fairly simple query function, shown below. I was wondering if
const body = await response.json() and zResponse.parse(body); would run on every render? Would it make sense to wrap them in a useMemo with response as the dependency? This queryFn is in a custom hook.
```js
const queryFunction = async ({ numDocumento, numPoliza, first }: TRequest): Promise<TResponse> => {
const response = await fetch('http://someUrl.com/endpoint1/', {
method: 'POST',...Updated user goes in the end of the table
I have a table, in wich i am fetching the data, also i have a modal that updates the client The problem is that everytime the client gets updates. It goes to the end of the table, basically i need just the update and remain where it was with is my useUpdateClient hook
export const useUpdateClient = () => {
return useMutation((client: UpdateClientObject) => updateClient(client), {
onSuccess: () => {...
React Native useRefreshOnFocus constantly triggering
Does anyone know what would cause
useRefreshOnFocus to constantly trigger over and over again when viewing a screen on my app?
https://tanstack.com/query/latest/docs/react/react-native#refresh-on-screen-focus...Using React Query for state management with React Flow
Hello,
I've built a nextjs application using React Flow (flowchart package) and Zustand for client-side state management of the RF Nodes (flowchart boxes). I'm using React Query for server state management and synchronization for everything else in the application.
I'm trying to decide if I should rip out Zustand and replace it with RQ for Node state management or If I need to build some kind of bridge....
Triggering refetch without changing query keys
Not sure if title is relevant, but here is my case based on simplified example:
I'm creating mobile music player app. User can browse and search different songs within the app. Those songs are fetched from external service (using react query ofc).
User can also like a song - if he does it, song id is added to "favorites" array stored and saved on the device. That way we can check if particular song id exists in this array and highlight if song is liked on the UI.
But user can also go to dedicated screen, where he can list all his liked songs. As we only have songs ids, we need to do a fetch to external service, which returns us full songs data based on provided ids....
Completely disable cache for a single query?
How do I completely disable caching for one query? I have set cacheTime: 0 but this code seems to always cache its result:
```js
const { data, status } = useQuery('me', () => ky.get('api/me').json<User>(), {
enabled: shouldReauth,...
onError and onSuccess callback deprecation
It's disappointing the onError and onSuccess calbacks are being deprecated from the useQuery hook. We used those quite heavily. What is the best standard to go by going forward for this?
Is there a way to unsubscribe from a query (prefetching advice)?
I have a composable that looks like this - I need everything in
table when using this composable but it is making prefetch quite difficult. Is there a way I can do something like calling useParticipantsTable in a parent component (which would prefetch) but then unsubscribe from the query?
```ts
export const useParticipantsTable = () => {
const table = useServerTable({...Can react-query replace next-auth?
Hello, a while back, I posted an issue with that happened only when using suspense from react-query and next-auth together. I am wondering if something like what next-auth does is possible? what I mean by that is next-auth keeps the
cookie across tabs and when you log out in one of the tabs also logs you out in all the others ones. My current flow is this, I have a backend that I call gives me a response, and next-auth saves the cookie and some information in the session, so now since this is...How can i access server error response
Server returns
...
return res.status(400).send({ error: "Invalid email or password." });
return res.status(400).send({ error: "Invalid email or password." });
controlled inputs
Hi, I'm fairly new to RQ but adopting it quickly. All seems to be going well but I'm a bit stuck in what's the best practice with controlled inputs. Before RQ I've used local state for an input, initializing it from server data and then using onChange events to post to server and then update the local state. Anyone have any articles, blogs, etc that points the the approaches for React controlled inputs when using RQ? Thanks!
Removing callbacks from useQuery
Is this the right patch to remove the callbacks from
useQuery's options?
```bash
diff --git a/src/types.ts b/src/types.ts
index 9426089293bb7b217e4aa156a6ec21c79a8e4c19..1d2ef5e8628069f8f8928e392ea8f32c6d7d1339 100644...IsLoading not updating when using axios with interceptor
Hey guys,
I'm using axios with interceptor, to rerun the request after getting access token.
Here is my code:
```ts
import axios from "axios";...
Default query key/function on a key store?
So, I am running into an odd case of having to define a key for something in a way is already defined, and I have repeating names:
```ts
import { useQuery } from "@tanstack/react-query";
import { queryKeyStore } from "state";...
Missing queryFn when invalidating
Hey Guys I am getting the missing queryFn warning when I invalidate the query with the refetchType: 'all' param.
1. How I invalidate:
`await queryClient.invalidateQueries({
queryKey: [CONSTANTS.API_ROUTES.GET_APTLET_INSTANCE_BY_ID],...