Theo's Typesafe Cult•2y ago

Disable Refetch on Focus in TRPC

Hello! I believe trpc refetches data when the user focuses on the window due to using react/tanstack query under the hood, and I know you can disable refetching on window focus in react query. Where would I adjust that in the context of trpc in a create-t3-app?

8 Replies

Abuzeid•2y ago

You can adjust the refetch behavior through useQuery options

Abuzeid•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.

Abuzeid•2y ago

example

trpc.pokemonPair.useQuery(undefined, {
    refetchInterval: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
  });

trpc.pokemonPair.useQuery(undefined, {
    refetchInterval: false,
    refetchOnReconnect: false,
    refetchOnWindowFocus: false,
  });

cje•2y ago

you can also do it globally

Froxx•2y ago

This is most likely what you wanna do, and turn it on for specific ones again. Never understood that the refetchOn... options are turned on by default

whatplan•2y ago

I don’t think it’s that bad of a default. Queries should be very low cost operations, and most apps probably want to users to see the most up-to-date data. Most users are probably refocusing a site after not using it for a little bit, so a refetch makes sense imo.

cje•2y ago

Yea Http requests are cheap, outdated information is expensive Obviously depends on what youre building, that’s why it can be configured I don’t think ive ever shipped an app where I turned the refetch off

JessesBeetShoppe•2y ago

The tool I'm making is for internal use for a small amount of people and the information isn't updated that often, it was just a bit annoying seeing requests firing off so often for no reason. thank you @ccccjjjjeeee that's exactly what i was after

Gaming

Programming

Disable Refetch on Focus in TRPC