Wouldn’t separating query definition and usage be more desirable?

[mettjus]

Hi, I just started using react-query and I find it quite useful, also because I much prefer the invalidateQueries (and then eventually refetch them when needed) approach to the refetchQueries one that Apollo uses.
That being said, for how it works now I could easily do

useQuery(’users', fetchUsers1)
// then later somewhere else in my code
useQuery(’users', fetchUsers2)

I tried it here https://codesandbox.io/s/react-query-conflicting-fetchfn-definitions-for-same-key-6rqpd and to me it looks like it defeats the purpose of having a cache key (and it’s a scenario I found myself in while developing a real world app). What am I missing?

Wouldn’t it be preferable to split query definition and usage into 2 separate steps, like:

defineQuery(‘users', fetchUsersFn) // or createQuery
// then later somewhere in the code
useQuery(‘users')
// somewhere else
useQuery(‘users’)
queryCache.invalidateQueries(‘users’)

[tannerlinsley]

Sure, that would be possible in theory, but it just didn't start out that way because of the simplicity of the API. That said, whenever you find yourself using a useQuery(key, fn) more than once, it's suggested to simply create a custom hook for it. This way, there is (just like you described) a single declaration of functionality that can be shared across the whole app. If we made users define queries before usage, it would work, but would essentially be an unnecessary layer at this point with custom hooks.

[boschni]

While custom hooks are preferable, this should be possible in V3:

client.setQueryDefaults('users', fetchUsers)

function Component {
  const { data } = useQuery<string>('users')
}

[TkDodo]

@boschni this looks cool. Would it be possible to get type inference from the fetchUsers function? Like if fetchUsers returns an Array<string>, then useQuery('users') would automatically give you that...?

I tinkered with that idea and came up with a limited proof of concept of a factory function, and you can see it in action here: https://codesandbox.io/s/kind-water-l5663

basically, you define a schema like so:

{
    posts: fetchPosts,
    post: fetchPost,
}

and the factory function gives you back a queryCache and a bunch of hooks to use, where you only need to call useTypedQuery(['posts']) or useTypedQuery(['post', 1]), which will be type safe (inferred from the fetch function, so ['post', 'one'] will not compile) and will execute the fetch function defined in the schema. Also, all calls to getQueryData and setQueryData have typed parameters / return values and only allow existing keys.

I'm aware that this doesn't work with some of the dynamic concepts of react-query, but I still like the typesafety you get from that :)

[mnpenner]

I was just thinking about this too. I came up with this:

type SimpleQueryOptions<TData> = Omit<QueryOptions<TData>,'queryKey'|'queryFn'|'_defaulted'>
type SimpleObserverOptions<TData> = Omit<QueryObserverOptions<TData>,keyof QueryOptions>

function createQuery<TResData,TReqData=Json>(queryFn: (req:TReqData) => Promise<TResData>, queryOptions?: SimpleQueryOptions<TResData>) {
    const key = id();
    return (data: TReqData, observerOptions?: SimpleObserverOptions<TResData>) => useQuery([key,data], () => queryFn(data), {
        ...queryOptions,
        ...observerOptions,
    })
}

Usage:

const useUserQuery= createQuery(id => fetchUser(id))

function MyComponent(props) {
   const query = useUserQuery(props.userId)
}

Something like that anyway. I haven't tested it out yet.

I don't think it makes the API any harder to use, it just splits the query in two which should force some better design patterns. Now it's obvious what you need to do if you want to use that same query elsewhere -- you just slap an export in front of const useUserQuery and off you go. No more worrying about keys at all.

Should also be less surprising. Now it's clear that initialData only works in createQuery and will affect anything else that uses useUserQuery.

---

And then users can extend it fairly easily too:

export function createGetQuery<TResData,TReqData=Record<string,string|number>>(route: string, queryOptions?: SimpleQueryOptions<TResData>) {
    return createQuery<TResData,TReqData>(data => {
        const url = resolveRoute([route,data])
        return getJson<TResData>(url).then(res => res.data)
    }, queryOptions)
}

const usePhoneQuery = createGetQuery<PhoneNumbersResData,PhoneNumbersReqData>('twilio.getPhoneNumbers')