First render after key changes has isLoading == false

[smackfu]

🐞 Bug Report

Describe the bug

On the initial render of a component using fetchye, the returned values are:

{data: undefined, error: undefined, isLoading: true}

Then when the data finishes loading, it changes to:

{data: {…}, error: undefined, isLoading: false}

When the fetchye key (for instance the body of the request) changes, you would expect the state to change back to loading. But instead the first render is this:

{data: undefined, error: undefined, isLoading: false}

This makes it difficult to write any code that is dependent on isLoading to render a loading indicator.

To Reproduce

Example code:

  const [id, setId] = useState(1);
  useEffect(() => {
    setTimeout(() => setId(2), 1000);
  });

  const { data, error, isLoading } = useFetchye(id);
  console.log({ data, error, isLoading });
  return <div>test</div>;

Prints this to console:

{data: undefined, error: undefined, isLoading: true}
{data: undefined, error: undefined, isLoading: true}
{data: {…}, error: undefined, isLoading: false}
{data: undefined, error: undefined, isLoading: false} <====
{data: undefined, error: undefined, isLoading: true}
{data: undefined, error: undefined, isLoading: true}
{data: {…}, error: undefined, isLoading: false}
{data: {…}, error: undefined, isLoading: false}

Expected behavior

isLoading should be true after the key changes.

[smackfu]

The root cause seems to be due to this line:
https://github.com/americanexpress/fetchye/blob/main/packages/fetchye/src/queryHelpers.js#L21

This has special handling for render count == 1. But the render count is not reset when the key changes, so this logic is not used later, even though it's the same case as the first render.

[oneamexbot]

This issue is stale because it has been open 30 days with no activity.