useLazyQuery causing too many re-renders [Apollo/ apollo/react hooks]

Question

I\'m building a discord/slack clone. I have Channels, Messages and users. As soon as my Chat component loads, channels get fetched with useQuery hook from Apollo.<

Answer 1

You could use the called variable return by useLazyQuery.

!called && fetchMessages({ variables: { channelid: channelidData.channelid } });

Answer 2

You call fetchMessages on every render. Try to put fetchMessages in a useEffect :

useEffect(() => {
    if (!channelidLoading && channelidData) {
        fetchMessages();
    }

}, [channelidLoading, channelidData]);

Like that the fetchMessages function only calls when channelidLoading or channelidData is changing.

Answer 3

You could also look at doing the following:

   import debounce from 'lodash.debounce';
   ...

   const [fetchMessages, { data, called, loading, error }] = useLazyQuery(
    FETCH_MESSAGES
  );
  const findMessageButChill = debounce(fetchMessages, 350);
  ...
  } else if (!channelidLoading && channelidData) {
    findMessageButChill({
       variables: { channelid: channelidData.channelid },
    });
  }