Prevent trpc refetching

Does anyone have an idea how I prevent trpc refetching, current I have following queries in a page:
const Game = () => {
const { data: movies } = trpc.movie.getAll.useQuery();
const { data: possibleAnswers } = trpc.movie.getThree.useQuery();
const Game = () => {
const { data: movies } = trpc.movie.getAll.useQuery();
const { data: possibleAnswers } = trpc.movie.getThree.useQuery();
Which keeps refetching if I focus on the application. I went through the docs https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching And tried:
const { data: movies } = trpc.movie.getAll.useQuery({
refetechOnWindowFocus: false,
});
const { data: movies } = trpc.movie.getAll.useQuery({
refetechOnWindowFocus: false,
});
But I get this:
(property) refetechOnWindowFocus: boolean
Argument of type '{ refetechOnWindowFocus: boolean; }' is not assignable to parameter of type 'void'.ts(2345)
(property) refetechOnWindowFocus: boolean
Argument of type '{ refetechOnWindowFocus: boolean; }' is not assignable to parameter of type 'void'.ts(2345)
Window Focus Refetching | TanStack Query Docs
If a user leaves your application and returns to stale data, React Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option: Disabling Globally
15 Replies
needmorewood
needmorewood2y ago
you may need to put that as the second parameter and not the first
needmorewood
needmorewood2y ago
useQuery() | tRPC
The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.
utdev
utdev2y ago
@needmorewood hmm how would that look like? 🤔
needmorewood
needmorewood2y ago
idk for sure but you can try
const { data: movies } = trpc.movie.getAll.useQuery({},{
refetechOnWindowFocus: false,
});
const { data: movies } = trpc.movie.getAll.useQuery({},{
refetechOnWindowFocus: false,
});
i cant remember if js has a placeholder like _ in other langs
utdev
utdev2y ago
Unfortunatly i behaves the same
needmorewood
needmorewood2y ago
but it doesnt error ts wise yea?
needmorewood
needmorewood2y ago
i would read through this specifically https://tanstack.com/query/v4/docs/react/guides/important-defaults there are more than just refetchonwindowfocus that might also be triggering that u may not want
Important Defaults | TanStack Query Docs
Out of the box, React Query is configured with aggressive but sane defaults. Sometimes these defaults can catch new users off guard or make learning/debugging difficult if they are unknown by the user. Keep them in mind as you continue to learn and use React Query: Query instances via useQuery or useInfiniteQuery by default consider cached dat...
utdev
utdev2y ago
Thanks I am going to have a look I think I got it I am doing this now in my _app.tsx which is fine for now,
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { trpc } from "../utils/trpc";

import "../styles/globals.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
});

const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<QueryClientProvider client={queryClient}>
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
</QueryClientProvider>
);
};

export default trpc.withTRPC(MyApp);
import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";

import { trpc } from "../utils/trpc";

import "../styles/globals.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
},
},
});

const MyApp: AppType<{ session: Session | null }> = ({
Component,
pageProps: { session, ...pageProps },
}) => {
return (
<QueryClientProvider client={queryClient}>
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
</QueryClientProvider>
);
};

export default trpc.withTRPC(MyApp);
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
utdev
utdev2y ago
@lee thanks that is even better 👍 @lee do you know a way to disable this per query?
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
utdev
utdev2y ago
Thanks!
Shoodey
Shoodey2y ago
You can also change these options on a broader level:
export const trpc = createTRPCNext<AppRouter>({
config() {
return {
transformer,
queryClientConfig: {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
},
},
},
links: ...
};
},
});
export const trpc = createTRPCNext<AppRouter>({
config() {
return {
transformer,
queryClientConfig: {
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
refetchOnMount: false,
refetchOnReconnect: false,
},
},
},
links: ...
};
},
});
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Shoodey
Shoodey2y ago
If set to true, the query will refetch on reconnect if the data is stale. If set to false, the query will not refetch on reconnect. If set to 'always', the query will always refetch on reconnect. If set to a function, the function will be executed with the latest data and query to compute the value. Defaults to the value of networkOnline (true) triggered whenever connection is lost then restored
Want results from more Discord servers?
Add your server