Infinite loop but only in Firefox

[alecrobertson1]

I am getting an error in my app but it only occurs in Firefox.

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

It appears to be caused by a query I am running which is taking in an array as an input. I generate the array on each render based on state passed into the particular component:

  const queryVariables =
    myArray.length
      ? { input: myArray }
      : undefined;

  const [{ data }] =
    useMyQuery({
      variables: queryVariables,
      pause: !queryVariables,
    });

I am using Urql 2.2.3 so quite possible it's been fixed in a later version but I can't quite figure out why it only happens on Firefox? I don't have any issues on either Safari or Chrome.

If I update the code with a hardcoded array

  const queryVariables =
    myArray.length
      ? { input: myArray }
      : undefined;

  const [{ data }] =
    useMyQuery({
      variables: { input: [] },
      pause: !queryVariables,
    });

the issue disappears.

What am I doing wrong? The reason I have to structure the code this way is because I don't want the query to run unless the array has a length.

Thanks!

[JoviDeCroock]

Why don't you do something like

    useMyQuery({
      variables: { input: myArray },
      pause: !myArray.length,
    });

that being said, the only reason for this would be if JSON.stringify({ input: myArray }) resulted in inconsistent array ordering on FireFox which would be weird. Mind looking into that?