useSubscription "loading" and "data" out of sync when used with other hooks

I am using version 3.2.4 of @apollo/client and there is no way of using a useEffect to check when loading moves from true to false with new data when you have other hooks changing state. You simply get loading back to false and the old data as soon as you are using other hooks that changes the state of your component.

[mzbyszynski]

We are running into this same bug. As far as I can tell this problem is caused because the useSubscription hook stores the most recent data returned by the subscription in state, but it doesn’t store or update that state when the variables change. In that case a render is triggered and the hook returns { loading: true, data: undefined }, but still has the previous data in state. If another render is triggered after that by anything other than data being returned from the subscription, then the old data useSubscription still has in state will be returned.

I think the right way to fix this would be for useSubscription to also store the loading: true state change in state, or at least update the data stored in state to undefined when loading starts, so that after a variable change the hook would return data: undefined until some new data actually came through the subscription.

I tried making this change to useSubscription.ts but it broke a lot of unit tests so I’m not super confident about it. In any event it would be a bigger than 20 line change so I think even if it is the correct fix, it would qualify as a Big PR.

Would love to get some feedback from someone more familiar with the useSubscription and the SubscriptionData class. Maybe @hwillson?

[christophediprima]

We finally found a work around for this issue.

We don’t use the returned values of the useSubscription hook anymore but manually maintain a state containing loading and data. We have a usEffect hook, that sets the loading state to true when subscription variable changes and we set it back to false with the new data in the onSubscriptionData that way we can be sure that when loading moves from true to false we have the new data with it.

const [subscriptionState, setSubscriptionState] = React.useState({
    data: undefined,
    loading: true,
});
  
const prevSubscriptionVariables = usePrevious(subscriptionVariables);

useEffect(() => {
   if (!equals(subscriptionVariables, prevSubscriptionVariables)) {
      setSubscriptionState({
         data: undefined,
         loading: true,
      });
   }
},
[subscriptionVariable, prevSubscriptionVariable]);

 useSubscription(CAPTURE_AGGREGATE_SUBSCRIPTION, {
    onSubscriptionData: ({subscriptionData}) => {
      setSubscriptionState({
        data: subscriptionData.data,
        loading: false,
      });
    },
    variables: subscriptionVariables,
  });

const previousSubscriptionState = usePrevious(subscriptionState)
useEffect(() => {
   if(previousSubscriptionState.loading && !subscriptionState.loading){
      console.log("Here is your new data after changing variable", subscriptionState.data)
   }
}, [subscriptionState, previousSubscriptionState]);

Hope this will help someone and that this will be fixed soon in the useSubscription hook. I had a look the hook trying to figure out why it was happening but couldn’t find a solution.