Select with a transform may break when refetchInterval is set to a function

[Nick-Lucas]

Describe the bug

Writing code like this will produce a compiler error:

      useQuery({
        queryKey: ['my-query'],
        queryFn(ctx) {
          return { foo: 1 }
        },
        refetchInterval(data) {
          return 10000
        },
        select(data) {
          return data.foo
        },
      })

Removing data from refetchInterval makes it go away. This seems to be a conflict between the type change in select and the usage of data in callbacks.

Your minimal, reproducible example

#5309

Steps to reproduce

#5309

Expected behavior

This should work

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Everywhere

Tanstack Query adapter

react-query

TanStack Query version

4.29.4

TypeScript version

4.8.3-5.x

Additional context

No response

[Nick-Lucas]

This was initially picked up in trpc/trpc#4234 but is actually a react-query issue as demonstrated by #5309

[Nick-Lucas]

Looks like order in the object matters, this fixes the compile error:

      useQuery({
        queryKey: ['my-query'],
        queryFn(ctx) {
          return { foo: 1 }
        },
        select(data) {
          return data.foo
        },
        
        // move this below
        refetchInterval(data) {
          return 10000
        },
      })

Is most likely related to microsoft/TypeScript#53018

[TkDodo]

if you want, please contribute a section to the docs on the typescript page that explains this limitation