usePaginationFragment's refetch triggers twice when using useTransition

[Sicria]

I'm using the following experimental versions when running encountering this issue.

"react": "0.0.0-experimental-f42431abe"
"react-dom": "0.0.0-experimental-f42431abe"
"react-relay": "0.0.0-experimental-8cc94ddc"

I've been following the reference and seem to be hitting a strange bug. https://relay.dev/docs/en/experimental/api-reference#usepaginationfragment

I'm loading a component which is supplied with preloaded data, I'm then displaying that data in a list and allowing a user to change the orderStatus as a filter for that data.

I'm using the usePaginationFragment hook and the refetch method from that. All of that seems to work as intended but does suspend the component which is expected.

Applying a useTransition hook around the refetch causes some strange behaviour.

It seems the first change works as intended, but subsequent changes causes the refetch to trigger again and call the onComplete method.

I've tried commenting out the startTransition and it works fine but suspends, enabling it again causes refetch to trigger twice.

const queryData = usePreloadedQuery(QUERY, ordersQuery);
const {
  data: { orders },
  refetch,
  loadNext,
  hasNext,
  isLoadingNext,
} = usePaginationFragment(REFETCHABLE, queryData);
const [startTransition, isPending] = useTransition({ timeoutMs: 10 * 1000 });
const [orderStatus, setOrderStatus] = useState('all');
const handleOrderStatusChange = (key) => {
  console.log(`TRANSITION:${key}`);
  startTransition(() => {
    setOrderStatus(key);
    console.log(`REFETCH:${key}`);
    refetch({
      count: ordersQuery?.variables?.count,
      cursor: null,
      orderStatus: key,
      startDate,
    }, {
      fetchPolicy: 'network-only',
      onComplete: () => console.log(`COMPLETE:${key}`),
    });
  });
};

console.log('RENDER', { orders: orders?.edges?.length, orderStatus, startDate });

In the code above, following these steps it reproduces the issue.

• Changing filter from all to open
  • TRANSITION:open, REFETCH:open, <REQUEST SENT:open>, COMPLETE:open
• Changing the filter from open to complete
  • TRANSITION:complete, REFETCH:complete, <REQUEST SENT:open>, COMPLETE:open, <REQUEST SENT:complete>, COMPLETE:complete
• Changing the filter from complete to all
  • TRANSITION:all, REFETCH:all, <REQUEST SENT:complete>, COMPLETE:complete, <REQUEST SENT:all>, COMPLETE:all

The initial load appears to work just fine, but any changes after that cause duplicate requests to be sent. The strange part is it's not like the function in startTransition is calling twice else you'd see REFETCH called twice as well, so it's just the refetch function itself calling some how, which then calls the onComplete callback function.

Any help with this would be greatly appreciated, let me know if you require any further details.

[sibelius]

I'm not sure if usePaginationFragment will suspend

but we got the same issue when using useRefetchableFragment

here https://github.com/sibelius/relay-workshop/blob/master/solutions/07-useRefetchableFragment/src/comment/PostComments.tsx#L71

[Sicria]

Did you managed to fix it or come up with a workaround?

At the moment I've just commented out the transitions and let the component suspend, it's a horrible user experience but having the wrong data display is worse. Holding back on going live with it until I can figure out a solution to this.

[sibelius]

one way to fix this is to move the suspend part to another component, and have another error boundary

[josephsavona]

Thanks for the detailed issue, this definitely sounds like a bug. Just to confirm, were you using the absolute latest version of each package you mentioned?

[Sicria]

At the time I believe these were the latest, although I see newer versions have been released since.

At this time I'm avoiding changing package versions as I've QA'd all of the functionality added with the experimental packages and upgrading to a newer experimental package would require a bit of work. So I'm holding off for a release version or enough changes on an experimental branch to justify the time to QA it all again.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Zizico2]

Related? #4526