Currently, I'm facing an issue where a query within a useQuery Apollo Client hook is being re-run unnecessarily every time Next.js's router.push function is triggered. The problem code snippet looks like this:
const Parent = () => {
useQuery(QUERY_HERE, {
onCompleted: () => {
console.log("just completed apollo query");
}
});
return <Child />;
}
const Child = () => {
const router = useRouter();
const currentArg = router.query?.currentArg;
return (
<div>
<button
onClick={() => {
if (currentArg === "on") {
router.push("/?currentArg=off");
} else {
router.push("/?currentArg=on");
}
}}
>
Click me!
</button>
</div>
);
};
For a live demo, check out CodeSandbox here.
I expected that the Apollo query should not be re-executed whenever the button triggers router.push. However, it seems to run every time the button is clicked. This behavior is unexpected as I believed that an Apollo query would only re-run when its variables change.
Does anyone have any insights or solutions on how to prevent the unnecessary re-running of the Apollo query?