fix: ensure hook subscription failures do not reset isLoading state

[smacpherson64]

This PR aims to resolve an issue where the isLoading state of a parent component was being reset by a child component if the child component was rendered conditionally.

Relates to: #1349 (reply in thread)

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e5a9962:

Sandbox	Source
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration
rtk-esm-cra	Configuration

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	e5a9962
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/6626df30ebe6450008100a63
😎 Deploy Preview	https://deploy-preview-4364--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[phryneas]

That won't prevent a refetch though, just display isFetching instead of isLoading. Is that really your problem here?

[smacpherson64]

@phryneas true! This will still fetch twice. I tried to scope this change to only avoid the infinite loop where isLoading reverts back to true for the parent when rendering descendants conditionally.

The refetchOnError idea from the discussion would be much nicer as it would only fetch once.

My specific problem is working with endpoints that can fail (often 401 or 404). The app has a rather deep tree and multiple parts of it need the same data. I assumed I could rely on the isLoading to only be true for the first request (including errors) but this assumption proved false. This caused the app to hit an infinite loop. I was able to avoid it by wrapping the hook with useQueryState to check for a previous error (to mimic the discussion), but it is not the ideal end state.

  return (args, {refetchOnError = true, ...options}) => {
    const {isError} = endpoint.useQueryState(args, options)

    return useHook(args, {
      ...options,
      skip: !!options.skip || (isError && !refetchOnError),
    })
  }

EDIT: adds more specific response and clarity to what is being aimed for.