Trying to juggle skipToken and enabled

[patik]

This might be related to #5916 but I think the question is slightly different.

I'd like to use skipToken in my project for type-safety. It's a large project with dozens of useQuery and useInfiniteQuery hooks. We have light wrappers around useQuery to ensure consistency with query keys and URLs, but otherwise the wrapper accepts a UseQueryOptions object:

export const useMember = (
    id?: number,
    options?: UseQueryOptions
) => {
    return useQuery({
        ...options,
        queryKey,
        queryFn: id ? () => fetchMember(id)) : skipToken,
    })
}

If someone passes in { enabled: true } without defining the id, we get a "Missing queryFn" error. According to @TkDodo in #7057, enabled and skipToken don't go together, so this error is expected.

However, I thought that this would work:

    useQuery({
        ...options,
        queryKey,
        queryFn: id ? () => fetchMember(id)) : skipToken,

        // This line is new:
        enabled: id && options?.enabled !== false, 
    })

In theory, enabled should never be true unless the id is also defined, no matter what options are passed in from the outside. But I was still able to get useQuery to perform a fetch with a bad id:

CleanShot.2024-03-22.at.10.21.16.mp4

This is the basic order of events in the video:

1. With id: 1 and enabled: true, useQuery calls queryFn which fetches the member 👍
2. Then I set enabled to false so it stops fetching 👍
3. Then I change the id to 0 which means that queryFn should now have the value skipToken
4. Lastly, I pass in enabled: true

As far as I understand things, this should not result in a fetch because id is still falsy—useQuery should receive enabled: false and queryFn: skipToken based on the code. However, as you can see in the video, a request is made using id: 0 which fails with a 404.

How is it fetching when id = 0? Is it caching a previous value of queryFn?

Code sandbox

Is there a way to use skipToken that still allows for a component to pass in the enabled option?

[patik]

My mistake, I had an error in my demo code. I was passing the ID as a string, so 0 became "0" which is truthy. 🤦‍♂️