urql useQuery's pause option doesn't freezes the request temporarily

Question

I'm trying with the following code to execute urql useQuery only at once. But for some reason it is getting called on every re-render.

As per the docs https://formidable.com/open-source/urql/docs/basics/queries/#pausing-usequery this query should be paused initially on the render and it should only get executed when called from React.useEffect on mount.

const [{ fetching, data, error }, reExecute] = useQuery({
  query: INITIAL_CONFIG_QUERY,
  pause: true
});

React.useEffect(() => {
  reExecute();
}, []);

What could be the best way to execute query only at once using urql?

Answer 1

Urql maintainer here, I'd assume if the component keeps remounting that something extra is happening. This hook should never make the wrapping component remount.

That being said you can always utilize the useClient hook to get the urql-client and then use client.query().toPromise() in that hook and use the returned result.

In your case this could be:

const MyComponent = () => {
  const client = useClient();
  useEffect(() => {
     client.query(
       INITIAL_CONFIG_QUERY
     ).toPromise().then(result => /* do something */)
  }, [])
}