americanexpress / americanexpress/fetchye

isLoading flag is false for a pending request that follows cancelled request

Open
#106 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
46
Forks
27
PR merge metrics
No merged PRs in 30d

Description

# 🐞 Bug Report

## Describe the bug

IsLoading flag in pending state is false.

## To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. use a useFetchye hook and defer it for later use
2. In the useEffect run the returned fn from useFetchye to call the API - here loading flag is true
3. Cancel the request using controller.abort
4. re-run(call) the api again, this time isLoading flag is false when it should be true.

Additional info:

Create a simple component and use useFetchye with defer in that and try to use below code

```
const getData = (url, controller ) => async (fetchClient, requestPayload, options) => {
let payload;
let error;
try {
const res = await fetchClient(url, {
...options,
method: 'POST',
signal: controller.signal,
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestPayload),
});
const {
data,
} = await res.json();
payload = {
data,
};
} catch (e) {
error = e;
}
return {
payload,
error,
};
};
```

```
useEffect(() => {
if (searchPayload) {
runAPI().then((response) => {
if (response?.error?.name === 'AbortError') {
return;
}
if (response.error || !blockResponse?.data?.data) {
// show error message
} else {
// logic here
}
});
}
return () => {
controller.abort();
};
}, [searchPayload]);
```

/// Dummy component code

```
const onSearch = () => {

setSearchPayload([{bid: 1212, isAvailable: true}])
}

const [searchPayload, setSearchPayload] = useState(null);

```

## Expected behavior

isLoadingFlag should be true everytime request is in pending state

A clear and concise description of what you expected to happen.

## Screenshots

If applicable, add screenshots to help explain your problem.

## System information

- OS: [e.g. macOS, Windows]
- Browser (if applies) [e.g. chrome, safari]
- Version of fetchye: [e.g. 5.0.0]
- Node version:[e.g 10.15.1]

## Additional context

Add any other context about the problem here.

Contributor guide

Open the contributing guide

Research direction

The issue names the useFetchye hook but no source file or test. Start by tracing deferred request and loading-state behavior through an abort followed by a second call, reproducing the sequence in a React component. Done means isLoading is true while the second request is pending, with regression coverage for that sequence.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.