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

feat(plugins): add auto-refetch plugin #97

Merged
merged 14 commits into from
Jan 31, 2025

Conversation

ymansurozer
Copy link
Contributor

Closes #49.

This PR adds a new plugin that enables automatic query refetching when data becomes stale. This provides a simple way to keep data fresh without manual intervention.

Features

  • Automatically refreshes queries when their staleTime is reached
  • Can be enabled/disabled globally via plugin options
  • Can be controlled per-query via autoRefetch option
  • Cleans up properly when queries are unmounted
  • Only runs on the client side

Issues and Questions

  • I am having an issue with one of the tests. To be honest, I am not good with writing tests (this is one of the rare cases where I've written one). So some help would be great!
  • The refetch timeout is currently set in refresh hook. I also tried fetch but the issue was fetch is not triggered on initial page load but refresh does. So even if the user does nothing regarding the query from initial load, it will be auto-fetched in the background.
  • To trigger a refresh, I've used queryCache.refresh(entry). I noticed there are also options like fetch, invalidate, and invalidateQueries. I used refresh because I understand it has an internal check on the data to see if it is fresh. I did not want to force it with fetch.
  • The refetch timeouts are only set on the client. I think this should be the expected behavior, as otherwise the refetch keeps happening on the server, too.

I would love your feedback on this. I am happy to work on this further.

Copy link

netlify bot commented Nov 7, 2024

Deploy Preview for funny-banoffee-0afb46 ready!

Name Link
🔨 Latest commit 752591d
🔍 Latest deploy log https://app.netlify.com/sites/funny-banoffee-0afb46/deploys/679cf2741429c3000823e324
😎 Deploy Preview https://deploy-preview-97--funny-banoffee-0afb46.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Owner

@posva posva left a comment

Choose a reason for hiding this comment

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

Nice! I will come back for tests later

plugins/auto-refetch/package.json Outdated Show resolved Hide resolved
plugins/auto-refetch/src/index.ts Outdated Show resolved Hide resolved
plugins/auto-refetch/src/index.ts Outdated Show resolved Hide resolved
plugins/auto-refetch/src/index.ts Outdated Show resolved Hide resolved
@ymansurozer
Copy link
Contributor Author

Thanks for the feedback @posva! Sent some commits to refactor based on your comments.

Copy link
Owner

@posva posva left a comment

Choose a reason for hiding this comment

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

There should also be another test that ensures the timer is reset if a new request is fired before the data becomes stale

plugins/auto-refetch/src/auto-refetch.spec.ts Outdated Show resolved Hide resolved
plugins/auto-refetch/src/auto-refetch.spec.ts Outdated Show resolved Hide resolved
plugins/auto-refetch/src/auto-refetch.spec.ts Outdated Show resolved Hide resolved
plugins/auto-refetch/src/index.ts Outdated Show resolved Hide resolved
@ymansurozer
Copy link
Contributor Author

There should also be another test that ensures the timer is reset if a new request is fired before the data becomes stale

Thank you @posva! I've added a new test for this and also accepted & implemented your suggestions. However, two tests are failing:

  • it automatically refetches when stale time is reached
  • it resets the stale timer when a new request occurs

In both cases, it seems the query was called one less time than expected. I tried to set stale time to 1ms or advancing time by 10000ms but the number of queries remain the same, so I think something in my tests are wrong but I cannot figure out what exactly. Tried using fetch instead of refresh in the plugin but that also did not work. Would you have any ideas?

plugins/auto-refetch/README.md Outdated Show resolved Hide resolved
plugins/auto-refetch/README.md Outdated Show resolved Hide resolved
plugins/auto-refetch/src/index.ts Outdated Show resolved Hide resolved
@ymansurozer
Copy link
Contributor Author

All done! The only issue left is the it resets the stale timer when a new request occurs test, which I am not able to pass despite clearing timeouts before scheduling the refetch and at the time of the refetch.

ymansurozer and others added 13 commits January 31, 2025 16:26
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>
@posva posva force-pushed the plugin-auto-refetch branch from 8224f86 to 320d9ad Compare January 31, 2025 15:38
Copy link
Owner

@posva posva left a comment

Choose a reason for hiding this comment

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

Thanks a ton for the great contribution! It turns out your test was good! Calling the query mock directly wasn't triggering things, but calling the refetch method made it work with no code changes!
I also removed the need for a map by storing the timeout in the entry itself, simplifying things and also fixing possible bugs with the serialization of the key (BTW I exposed now a toCacheKey function that could be used)

@posva posva merged commit dcf8c57 into posva:main Jan 31, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Add autoRefetch Option to useQuery for automatic stale entry refetching
2 participants