Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dependent requests does not seem to be reactive

See original GitHub issue

Describe 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