Fetching seems incorrect

[cdedreuille]

Hi,

I'm curious about fetching. It first starts as false, then true, and then false again. It's not a big issue but should it always be true until the data is loaded?

This is what I get with this code:

const [{ data: profiles, fetching }] = useSelect('profiles');
console.log(fetching);
console.log(profiles);

[tmm]

The fetching field indicates whether the hook is loading data. When the hook is initialized, the initial state of fetching is false, then a network request is fired and fetching flips to true.

This seems like what we want, especially if useSelect gets extended to include a pause option or other functionality in the future.

One way to know the hook hasn't attempted to fetch data yet is: !fetching && !error && data === undefined. Maybe it's worth adding a called property to the result, but not sure what that would look like right now. I'm trying to keep the API as close to urql's state as possible since it is set up well.

[cdedreuille]

Ok, I understand a bit more. This makes sense. In my case, coming from Firebase I usually used this Hook to query Firestore and they have a loading state that will come true only when the data becomes available.

In your documentation, you have if (fetching) return <div>Loading todos</div> to show a loading state but because fetching starts with false, it triggers an error because the data is still undefined.

Would a loading state be useful on top of fetching?
loading feels easier to use than !fetching && !error && data === undefined

[tmm]

Let me think about this some more. I think having both loading and fetching properties could be confusing since they can mean the same thing.

[cdedreuille]

Do you have an example where you would need to know when the data is fetching instead of fetched @tmm? Perhaps this could help choose which one is the most appropriate or if we could keep both.

In my case I never had the need for fetching but I always (100% of the time) need to wait for the data to be loaded.