useTransactionQuery cache & query issue with variables

[bkniffler]

Using a very simple query, useTransactionQuery seems to lag behind with the results if variables change in some cases. In this example, we have a variable that filters a list. It can be either a or b.

Initially, the button will say Toggle b, because letter is a. The query result is correct, a list filtered by a. Clicking the button will change letter to b. Results change as expected, everything starting with b is shown. Clicking again will switch letter back to a, but now the results will remain to the b list. Clicking further, the results will always be the ones from the previous variables.

Hope this makes sense

Bildschirmaufnahme.2022-10-07.um.14.27.06.mov

 const [letter, setLetter] = useState('a');
 const x = useTransactionQuery(
    (x, { letter }) =>
      x
        .app({ where: { name: { _ilike: `${a}%` } } })
        .map((x) => ({ id: x.id, name: x.name })),
    {
      variables: {
        letter,
      },
    }
  );

  return (
    <ul>
      <button onClick={() => setLetter(letter === 'a' ? 'b' : 'a')}>
        Toggle {letter === 'a' ? 'b' : 'a'}
      </button>
      {x.data?.map((app) => (
        <li key={app.id}>{app.name}</li>
      ))}
    </ul>
  );

[bkniffler]

Adding this seems to solve the issue

      fetchPolicy: 'cache-and-network',

[bkniffler]

Still seeing issues. Extending this to more letters (a, b, e, g), I'm seeing issues on the first fetches for each letter. Subsequent fetches work good as seen on the video.

Bildschirmaufnahme.2022-10-07.um.15.05.14.mov

[bkniffler]

This is with the PR fix applied:
https://user-images.githubusercontent.com/4349324/194565613-cfe07735-f1ef-466b-be11-95499ae81f25.mov

[vasyas]

With the PR applied, still get the error with fetchPolicy: 'cache-first'.
With fetchPolicy: 'cache-and-network' it works.

[vicary]

I will eventually get here but my list is long right now.

@bkniffler Would you like to work on this?