Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UI v2] feat: simplfies invalidating all variable queries #16140

Merged
merged 1 commit into from
Nov 27, 2024

Conversation

devinvillarosa
Copy link
Contributor

@devinvillarosa devinvillarosa commented Nov 27, 2024

What does this PR do and why?

Simplifies invalidating all queries for ['variables'].

Screenshot 2024-11-27 at 2 02 12 PM

Looking at the code, it looks like we want to invalidate all queries starting with 'variables' as the key.
The simplest way of doing it is just passing queryKey: variableKeys.all, or queryKey: ['variables']. You don't need to iterate through all queries and evaluate each one for this case

React Query's query key matching is simple. It will match query keys on how specific the key sequence is being passed.
eg:
Passing['variables'], will invalidate all query keys starting with 'variables'.
Passing ['variables', 'filtered-count], will only invalidate all queries that matches up to this sequence, such as ['variables', 'filter-count', 'foo'] ['variables', 'filter-count', 'foo', 'bar'] ['variables', 'filter-count', 'baz', {id: 1}]

🗒️ Sidenote and future enhancement: this is why query factories is a useful model. You can structure which queries you want to invalidate, and invalidate certain sequences. This is why all() is mapped with ['variables']. If you want to invalidate all queries relating to a 'variables', just pass queryKey: ['variables']
(📖 https://tkdodo.eu/blog/the-query-options-api#query-factories)

Docs:
https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation#query-matching-with-invalidatequeries
Screenshot 2024-11-27 at 2 05 32 PM
Screenshot 2024-11-27 at 2 21 16 PM

Future
We should centralize the query keys so that they're accessible in the mutations called in variables/data-table/cells. Additionally, these mutations should probably be re-usable as hooks
https://github.com/PrefectHQ/prefect/blob/main/ui-v2/src/components/variables/data-table/cells.tsx#L40-L47

Checklist

  • This pull request references any related issue by including "closes <link to issue>"
    • If no issue exists and your change is not a small fix, please create an issue first.
  • If this pull request adds new functionality, it includes unit tests that cover the changes
  • If this pull request removes docs files, it includes redirect settings in mint.json.
  • If this pull request adds functions or classes, it includes helpful docstrings.

Related to #15512

@devinvillarosa devinvillarosa added development Tech debt, refactors, CI, tests, and other related work. ui Related to the Prefect web interface labels Nov 27, 2024
@devinvillarosa devinvillarosa marked this pull request as ready for review November 27, 2024 22:22
Copy link
Member

@desertaxle desertaxle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! I agree that the delete variable mutation should be moved into ui-v2/src/hooks/variables.ts. I must've missed that when I was reorganizing things. I can submit a PR to move it!

@devinvillarosa devinvillarosa merged commit cfd8256 into main Nov 27, 2024
29 checks passed
@devinvillarosa devinvillarosa deleted the simplify-query-invalidations branch November 27, 2024 22:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
development Tech debt, refactors, CI, tests, and other related work. ui Related to the Prefect web interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants