I'm dealing with an issue in which a query inside a useQuery Apollo Client hook is getting un-necessarily re-run whenever Next.js's router.push (docs here) is called.

The abbreviated code is:

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>
  );
};

You can see a reproduction on CodeSandbox here.

My expectation is that whenever the button is clicked (and thus router.push is called), the query shouldn't be re-run. However, it's re-run any time the button is clicked. This is surprising because my understanding is that an Apollo query should only be re-run when one of its variables change.

Does anyone know of a way to ensure that the Apollo query is not re-run?