perf(vue-query): use shallowRef instead of ref
#6657
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Ignored Deployment
|
TheAlexLichter
changed the title
shallowRef instead of ref
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 9d4862e:
|
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 9d4862e. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
❗ Your organization needs to install the Codecov GitHub app to enable full functionality. Additional details and impacted files@@ Coverage Diff @@
## main #6657 +/- ##
=========================================
+ Coverage 0 70.81% +70.81%
=========================================
Files 0 18 +18
Lines 0 442 +442
Branches 0 113 +113
=========================================
+ Hits 0 313 +313
- Misses 0 99 +99
- Partials 0 30 +30 ☔ View full report in Codecov by Sentry. |
|
@manniL Hey Alexander, so what about this feature, has it been implemented? I dont see it anywhere in the docs or how to use that |
|
@GabrielHangor Hey! It is an under-the-hood improvement and "just works" |
|
@manniL so by default it returns shallowRef as data via the useQuery? What if i need my data deeply reactive - wrapped in a ref as it used to be.... |
|
I can see the changes in the useQueries hook but it seems that useQuery still using plain ref. Since useQuery is the most popular tool i guess it might be a good addition to add some kind of a toggle to return data wrapped in a shallowRef instead of ref...imagine having thousands of of records in api response in some data-heavy apps...lots of memory |
|
How about |
…to fix the timing of query cannot get the `fetchedPage` as route hasn't changed at that time + `queryStartedAtSSR` & `isQueriedBySSR` to fix not timing from the point of fetch started while SSR * rename variable `startTime` to `queryStartedAt`, const `isCached` to `isQueryCached`, `(network|render)Time` to `-Duration` - ref `isRouteNewQuery` as moved scrolling to top from watcher of query timing to waterch of route @ pages/posts.vue * fix ref of `data.pages` fetched from `useInfiniteQuery()` may contain nesting refs at root level: TanStack/query#6657 @ `<RendererList>` * using media query in css instead of js before hydrate like 9603faf for noscript user @ `<PostNav>` * partial revert 8283197 as only scroll to `savedPosition` when it's not scrolling to top * fix regression of `isPathsFirstDirectorySame()` from d5fcc95 @ app/router.options.ts @ fe
When only replacing the whole
refand not changing nested values,shallowRefallows performance improvements. More details in the Vue docs and my video.This comes especially handy when using data fetching.
(PS: This comment was suggesting this PR, so here I am 😂)