Race condition while updating queries

[velialiev]

Description

In atomic-router you can update queries by setting value of the $query store. Probably under the hood atomic using navigate in response to changing this store but the problem is that in some cases it may get incorrect state of the currently active route leading to not only changing queries but navigating user to another route

Reproduction

Link

https://stackblitz.com/edit/effector-vite-react-template-z8thxs?file=src/application.tsx

Steps

1. Click on the "Go to second" link
2. You have been navigated to the second page
3. Click on the "Go to first" link
4. The route doesn't change. Actually it changed twice as you can see in logs provided on the page. First it navigates to the "First page" but then it immediately navigates backwards
5. Click on the "Go to first" link second time. Now route changes

Why is this happening? That is because of this sample:

sample({
  clock: routes.first.opened,
  fn: () => ({
    anotherQuery: '3123',
  }),
  target: router.$query,
});

You can read it as "whenever first route is opened change queries to some value that differs from current". This causes $query to navigate user to previous route with the new queries cause it have incorrect state of the currently active route and doesn't aware of the fact that the second route was already closed and the first was opened. The second click navigates user since queries had already been changed by the first click so changing $query to exactly the same value have no effect since it has update filter with object comparison under the hood

[velialiev]

The workaround is to not change $query right after opened has been called:

import { delay } from 'patronum'

sample({
  clock: delay(routes.first.opened, 0),
  fn: () => ({
    anotherQuery: '3123',
  }),
  target: router.$query,
});