global react query config for trpc

Hi everyone, I keep having to add

{ refetchOnWindowFocus: false }

{ refetchOnWindowFocus: false }

to all my client queries... I can't seem to find a way to disable it globally in tRPC... Can someone please point me in the right direction of where the global queryClient config options are? Thanks.

3 Replies

ryanagillie•2y ago

https://trpc.io/docs/nextjs#config-callback

Usage with Next.js | tRPC

If you're using tRPC in a new project, consider using one of the example projects as a starting point or for reference: tRPC Example Projects

ryanagillie•2y ago

queryClientConfig is the property you'd do

config() {
  return {
    /* other stuff */
    queryClientConfig: {
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false,
        },
      },
    },
  }
}

config() {
  return {
    /* other stuff */
    queryClientConfig: {
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false,
        },
      },
    },
  }
}

I think that's the utils/trpc file if you're using create-t3-app ~~this is a completely PERSONAL opinion, but my global config looks like~~

config() {
  return {
    /* other stuff */
    queryClientConfig: {
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false,
          // @ts-ignore tRPC convention for infinite queries
          getNextPageParam: (lastPage) => lastPage.nextCursor,
          // @ts-ignore tRPC convention for infinite queries
          getPreviousPageParam: (firstPage) => firstPage.prevCursor,
        },
      },
    },
  }
}

config() {
  return {
    /* other stuff */
    queryClientConfig: {
      defaultOptions: {
        queries: {
          refetchOnWindowFocus: false,
          // @ts-ignore tRPC convention for infinite queries
          getNextPageParam: (lastPage) => lastPage.nextCursor,
          // @ts-ignore tRPC convention for infinite queries
          getPreviousPageParam: (firstPage) => firstPage.prevCursor,
        },
      },
    },
  }
}

The stuff about infinite queries can be found at https://trpc.io/docs/useInfiniteQuery

Chizi VictorOP•2y ago

Ah perfect…!! Thanks a bunch @ryanagillie 🙏🙏

Gaming

Programming

global react query config for trpc