Dependent requests does not seem to be reactive
See original GitHub issueDescribe the bug In my NextJS application, I wanted to use the useFetch hook to fetch some data from the API. I needed to grab some URL parameter from the router. As this parameter was undefined during the first render cycle, I tried to set up some dependent request like it is shown in the documentation.
const DetailPage: NextPageWithLayout<DetailPageProps> = (props) => {
const router = useRouter();
const { postId } = router.query;
const { data, loading, error } = useFetch(getPost.setParams({ postId }), {
disabled: !postId
});
...
return <div>...</div>;
}
Unfortunately the command I passed to useFetch was never executed, once the postId was ready.
To Reproduce I have reproduced this behaviour in the following CodeSandbox: https://codesandbox.io/s/hyper-fetch-usefetch-disabled-not-reactive-c4zfi8?file=/src/App.js
There is some isFetchPostsDisabled
property that is set to false after 1 second, but the command does not get executed.
Maybe I am misunderstanding something?
I needed to work around this issue by creating some wrapper component, that I only include once the isFetchPostsDisabled
is set to false, but this is not a real dependent request anymore.
https://codesandbox.io/s/hyper-fetch-usefetch-disabled-not-reactive-fixed-using-a-middleware-component-7mq6bj?file=/src/App.js
Expected behavior
Once the “disabled” property turns to false
, I expect the command to be executed.
I was hoping you could help me a bit here. Maybe I am misunderstanding something?
Regards, Stefan
Issue Analytics
- State:
- Created a year ago
- Comments:5 (2 by maintainers)
Nice, works perfectly now! Thanks a lot!
🎉 This issue has been resolved in version 1.6.1 🎉
The release is available on:
npm package (@latest dist-tag)
Your semantic-release bot 📦🚀