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

user_3218618 0
Viewed 2074

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?

urql graphql react-hooks reactjs javascript
2 Answers

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 */)
  }, [])
}
user_89372620

This could be a urlq bug, but it also could be that your component is being unmounted and remounted every time the parent component rerenders.

To test this, add:

React.useEffect(() => {
  console.log("Component was mounted.");
}, []);

And see if the console.log statement gets printed more than once.

user_27360370
Related