3

I sometimes get a race condition when trying to use onSubscription hook from @apollo/react-hooks package in the following way.

let { data, loading, error } = useSubscription(MY_SUBSCRIPTION)
if (loading) return 'Loading...';
if (error) return 'Error...';

...

When I load the page, most of the time data gets filled perfectly and eventually loading will turn false, but every ~5th try there's some kind of race condition where loading stays true forever and data is undefined.

GraphQL query:

export const EXERCISE_SUBSCRIPTION = gql`
    subscription {
      exercises {
        id
        title
        tasks {
          id
          title
          start_time
          end_time
        }
      }
    }
`;

Package version is the (currently) latest: @apollo/react-hooks": "^3.1.0-beta.0", but I have also tried with previous versions.

Has anyone experienced something similar and know how to solve it? If you run into this issue, I found a workaround hack. You can see that when I add the callback option onSubscriptionData, the data IS present in there, but somehow does not end up in the data object outside.

  // <HACK>
  // sometimes data object is empty, but onSubscriptionData is filled.
  // in that case use data from onSubscriptionData method.

  const [dataFromCb, setDataFromCb ] = useState(null)
  let { data, loading } = useSubscription(INJECT_SUBSCRIPTION, {
    onSubscriptionData: (res) => {
      setDataFromCb(res.subscriptionData.data)
    },
  });
  if (loading && !dataFromCb) return 'Loading...';
  data = (data === undefined) ? dataFromCb : data;

  // </HACK>

2 Answers 2

1

Ok, I do believe I found the answer to this one, but to verify, you may need to double check and/or post your query code. Apparently Apollo is trying to marry up the data as it arrives, and it uses the id fields to do that by default. I had a query that was missing those ids in some nested layers of my structure, and when I put them in, this error has disappeared. It wasn't until I ran into this error that I found the resources that pointed me in the right direction.

For reference: https://github.com/apollographql/react-apollo/issues/1003

3
  • 1
    I included my GraphQL query. As I have id's (primary keys in my Hasura schemas) for both return types, it's probably a different issue that the one you mentioned. Commented Sep 16, 2019 at 6:59
  • 1
    @MadisPukkonen Yeah, I'm starting to see the issue again too. It would appear this is still an open issue. Commented Sep 16, 2019 at 7:49
  • Anyone got the solution for this? Commented Nov 22, 2019 at 4:58
0

I had the same issue with useSubscription loading stuck. Afterwards noticed that I kept this hook in the child component, so moved it on the same level (parent component) with the useQuery which triggered subscriptions on the server. So in my case it was React rendering issue which affected such a behaviour.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.