Apollo Client useQuery making un-necessary refetches upon Next.js router.push

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?

Answer

Next.js re-renders pages when navigation occurs and in your example you recreate Apollo Client every time it happens. Then your useQuery component renders again, checks if cache contains data for given query (it doesn’t as new client is empty) and sends query again.

To fix this, create your ApolloClient in global scope. This way it’ll stay stable and can be reused between multiple queries and renders.