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•2y ago

you may need to put that as the second parameter and not the first

needmorewood•2y ago

https://trpc.io/docs/useQuery

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.

utdevOP•2y ago

@needmorewood hmm how would that look like? 🤔

needmorewood•2y 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

utdevOP•2y ago

Unfortunatly i behaves the same

needmorewood•2y ago

but it doesnt error ts wise yea?

needmorewood•2y 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...

utdevOP•2y 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•2y ago

Message Not Public

utdevOP•2y ago

@lee thanks that is even better 👍 @lee do you know a way to disable this per query?

Unknown User•2y ago

Message Not Public

utdevOP•2y ago

Thanks!

Shoodey•2y 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•2y ago

Message Not Public

Shoodey•2y 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

Gaming

Programming

Prevent trpc refetching