ilyalesik / react-fetch-hook Goto Github PK
View Code? Open in Web Editor NEWReact hook for conveniently use Fetch API
License: MIT License
React hook for conveniently use Fetch API
License: MIT License
When the isValidMail
variable is false the data is correctly set to undefined
but the isLoading
changes to true
.
const isValidMail = !validator_email(orgEmail).error
const {isLoading, data} = useFetch(`https://satec.cynation.com/api/v1/accounts/search/org?api-key=8a0b7868-57c8-430e-95a9-de915ff2b7d8&email=${orgEmail}`,{
depends: [isValidMail]
})
DevTool log (isValidMail=false):
isLoading: false index.js:91
data: undefined index.js:92
isLoading: true index.js:91
data: undefined index.js:92
isLoading: false index.js:91
data: undefined
DevTool log (isValidMail=true):
isLoading: false index.js:91
data: undefined index.js:92
isLoading: true index.js:91
data: undefined index.js:92
isLoading: false index.js:91
data:
Object { orgId: "2c5168a8-1b5b-474e-96f8-f62e9dd51231", orgName: "Example" }
Is there a way to make it so I can use multiple useFetch hooks in the same file? Right now I get undefined for either variable that is different than 'isLoading' and 'data'. Is that on purpose?
The pagination example uses fetch directly rather than useFetch. Was it meant to use useFetch?
Hi
I have a question about the error message. Currently I receive a string
but it would be nice to show different message based on the response status - like 401 or 500.
Is there a way to do this?
Thanks!
Hi there,
Is there any implementation of react-fetch-hook for GraphQL ?
For example, the typical GraphQL query:
const MY_QUERY_QUERY = gql`
query MyQuery {
auth_user {
email
first_name
id
is_active
last_name
last_login
username
}
}
`;
How to implement this query ?
Thanks!
const {authToken} = useContext(authTokenContext);
const [someState, setSomeState] = useState(false);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
depends: [!!authToken, someState] //don't call request, if haven't authToken and someState: false
});
The above should read: don't call request, if haven't authToken OR someState: false
. Unless I've misunderstood.
This may be related to #24. Whenever I change the dependencies, I get three rerenders where I only expect to see two.
Expected:
isLoading === true, data === null
isLoading === false, data === <new-result>
Actual:
isLoading === false, data === <previous-result>
isLoading === true, data === <previous-result>
isLoading === false, data === <new-result>
I don't care so much about data
containing the previous result, and changing just that to null
with no additional changes would be bad. But why am I getting that first rerender which is a copy of the previous call result? I would expect calling the hook with changed dependencies to immediately return with isLoading === true
.
To be clear, everything works okay. The downside is the additional no-op render due to the first result being identical to the previous result. I assume the fetch call has been made by that point, and yet the hook tells me it's not loading. Is there any way to avoid that (step 2 above)?
This isn't an issue, just trying to understand the code (and JS for that matter).
Why is this line called with [1]
instead of 1
?
react-fetch-hook/usePromise.js
Line 8 in 67223d7
Is it handling some edge case? Didn't have luck Googling it. Thanks
Hello,
I just tried out your lib. In use with useFetch
, would it not be better to set isLoading
initially to true
? Otherwise the component initially would render as its not loading and a wrong component/logic could run.
Just an idea while testing this hook
Cheers
data
is loaded fine (1. log), but once I call useState
or useEffect
, the code after (2. log) is no longer executed.
Not sure what's going on. No exception thrown. Works fine with plain fetch
.
Did I miss something?
import useFetch from 'react-fetch-hook'; // 1.9.5
const UserTable = () => {
const [users, setUsers] = useState([]);
const { isLoading, data, error } = useFetch('/admin/users');
console.log('data', isLoading, data, error);
if (isLoading || !data) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
// setUsers([]); // if called, the following code is dead
// useEffect(() => { console.log('data changed') }, [data]); // same with this
console.log('data2', data);
};
Example:
const Component = () => {
const url = new URL("...");
url.search = new URLSearchParams(params).toString();
const result = useFetch(url);
...
}
after change params
new request don't affected
It seems like useFetch
never fetches data if the depends
is something like ['']
, but sets isLoading
to false immediately, i.e. pretending like it finished loading, but just producing the value undefined
. This means that if the value in the depends array is a string that might sometimes be empty, data might just happen to be undefined so any code that expects data to exist if isLoading
is false fails.
Full component example:
import useFetch from "react-fetch-hook";
function App() {
const { isLoading, data } = useFetch("https://api.github.com/", {depends:['']});
console.log(data);
return (
<p>
{JSON.stringify(data)}
</p>
);
}
export default App;
I'm not sure if this is intended or not, but given that there are situations where depends might include a sometimes empty string, I assume not.
It's only mentioned in https://github.com/ilyalesik/react-fetch-hook#usefetch
and it's duplicating regular options
If rapid requests are issued, like in an autocomplete scenario, isLoading will be false even when hanging requests are still open.
In other words:
Hi! First of all, many thanks for a good tool, I use it in my project and it helps me a lot to keep the code clean.
Recently I needed to fetch some data and only then fetch other data that would be based on the result of the first fetch.
I try something like this. But as I understand it's doesn't working because hooks limitations.
const { isLoading, data: repoData } = useFetch(`${endpoint.github}repos/${repo}`, {
headers: new Headers({
Authorization: `token ${process.env.GITHUB_TOKEN}`,
})
});
if (!isLoading) {
const userAPIUrl = repoData.owner.url; // Get this staff from another hook
const { data: userData } = useFetch(`${endpoint.github}users/${userAPIUrl}`, {
headers: new Headers({
Authorization: `token ${process.env.GITHUB_TOKEN}`,
})
});
}
Any ideas how I can implement it in a different way? I am not currently a React guru and I would be very grateful for any help in this case.
Hi thank you for this great react fetch hook,
Is there a way to make the fetch abortable and abort it when component is unmount ?
Thank you
URL object can be not defined at some of platforms.
So, instanceOf URL
can throw exception.
=16.8.0 <18.0.0
Can you update package.json to accept new react version?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.