Skip to content

fix(nuxt)!: don't rerun asyncdata w/ existing data in useAsyncData #32170

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

Merged
merged 2 commits into from
Jun 2, 2025

Conversation

danielroe
Copy link
Member

🔗 Linked issue

resolves #32165

📚 Description

this prevents rerunning the handler when calling useAsyncData('key') if another useAsyncData('key') is already instantiated and not cleaned up...

this likely needs a careful review (cc: @TheAlexLichter) to make sure we don't introduce a regression in behaviour - note that this requires updating the unit tests because handlers now run less frequently when a second component is loaded and another one is still in memory.

@danielroe danielroe requested a review from TheAlexLichter May 20, 2025 14:54
@danielroe danielroe self-assigned this May 20, 2025
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

pkg-pr-new bot commented May 20, 2025

Open in StackBlitz

@nuxt/kit

npm i https://pkg.pr.new/@nuxt/kit@32170

nuxt

npm i https://pkg.pr.new/nuxt@32170

@nuxt/schema

npm i https://pkg.pr.new/@nuxt/schema@32170

@nuxt/rspack-builder

npm i https://pkg.pr.new/@nuxt/rspack-builder@32170

@nuxt/vite-builder

npm i https://pkg.pr.new/@nuxt/vite-builder@32170

@nuxt/webpack-builder

npm i https://pkg.pr.new/@nuxt/webpack-builder@32170

commit: 781ea86

Copy link

codspeed-hq bot commented May 20, 2025

CodSpeed Performance Report

Merging #32170 will not alter performance

Comparing fix/handler-recalled (781ea86) with main (5147dff)

Summary

✅ 10 untouched benchmarks

@danielroe danielroe changed the title fix(nuxt): don't rerun asyncdata w/ existing data in useAsyncData fix(nuxt)!: don't rerun asyncdata w/ existing data in useAsyncData Jun 2, 2025
@danielroe danielroe marked this pull request as ready for review June 2, 2025 08:42
@Copilot Copilot AI review requested due to automatic review settings June 2, 2025 08:42
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes redundant re-execution of asyncData when calling useAsyncData with an existing successful result.

  • Adjusts test expectations to reflect fewer asyncData handler calls.
  • Adds a condition to avoid triggering initialFetch if the asyncData call has already succeeded.
  • Improves the unregister logic in the key watcher by ensuring cleanup only occurs for changed keys.

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
test/nuxt/composables.test.ts Updated test assertions to reflect the new behavior (fewer calls).
packages/nuxt/src/app/composables/asyncData.ts Added a status check in the immediate branch and refined key cleanup.
Comments suppressed due to low confidence (3)

test/nuxt/composables.test.ts:533

  • The updated expected call count reflects the fix for redundant fetching. Ensure that the test scenarios adequately cover cases with multiple components accessing the same asyncData key.
expect(promiseFn).toHaveBeenCalledTimes(1)

packages/nuxt/src/app/composables/asyncData.ts:309

  • This added status check prevents re-fetching when asyncData has already succeeded. Please verify that this condition covers all intended scenarios, such as when error states occur but valid data exists.
} else if (options.immediate && asyncData.status.value !== 'success') {

packages/nuxt/src/app/composables/asyncData.ts:337

  • The change to unregister only when the key actually changes helps avoid premature cleanup. Confirm that all edge cases where the key remains unchanged are safely handled.
if (oldKey && oldKey !== newKey) {

Copy link

coderabbitai bot commented Jun 2, 2025

Walkthrough

The changes update the internal logic of the useAsyncData composable in the Nuxt application. The conditions for triggering the initial fetch on the client side are refined to prevent redundant fetches when data is already loaded. The logic for unregistering async data keyed entries is also tightened to avoid unnecessary operations when the key does not change. Corresponding test cases are updated to reflect these changes, with expected fetch call counts reduced to match the improved deduplication and caching behaviour. Additionally, a new test is introduced to verify correct handling when nested components access the same async data key. No exported or public entity signatures are altered.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5147dff and 781ea86.

📒 Files selected for processing (2)
  • packages/nuxt/src/app/composables/asyncData.ts (2 hunks)
  • test/nuxt/composables.test.ts (4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: test-fixtures (windows-latest, built, vite, async, manifest-off, json, 20)
  • GitHub Check: test-fixtures (ubuntu-latest, built, vite, default, manifest-on, json, 20)
  • GitHub Check: test-fixtures (ubuntu-latest, dev, vite, async, manifest-off, json, 20)
  • GitHub Check: test-fixtures (ubuntu-latest, built, vite, async, manifest-on, json, 20)
🔇 Additional comments (7)
packages/nuxt/src/app/composables/asyncData.ts (2)

309-312: Excellent optimisation to prevent redundant fetches.

This change correctly prevents the initial fetch from running when the async data status is already 'success', which aligns perfectly with the PR objective of avoiding unnecessary handler executions when data is already loaded. This will improve performance by reducing duplicate API calls when multiple components share the same key.


337-339: Good improvement to key change detection logic.

The refined condition oldKey && oldKey !== newKey correctly prevents unnecessary unregistering when the key remains the same, avoiding redundant operations. This is a logical improvement that complements the main optimisation.

test/nuxt/composables.test.ts (5)

533-533: Test assertion correctly updated to reflect improved deduplication.

The expectation is properly adjusted from 2 to 1 calls, which aligns with the optimisation in asyncData.ts that prevents redundant fetches when data is already successfully loaded.


537-538: Consistent test updates reflecting the deduplication improvements.

The reduced call count expectations (from 3 to 2) correctly reflect the behaviour changes where handlers run less frequently due to the improved caching and status checking logic.


540-569: Excellent test case for the specific scenario addressed by this PR.

This new test effectively validates the fix for the issue where nested components accessing the same async data key should not show loading indicators or trigger redundant fetches. The test setup with parent and child components using the same key is exactly what the PR aims to optimise.


633-633: Test assertion properly updated for memory management scenario.

The expectation correctly reflects that when multiple components use the same key, the handler should only be called once due to the improved deduplication logic.


736-736: Consistent test updates for caching behaviour verification.

The reduced call count expectations (from 2 to 1) properly reflect the improved caching behaviour where getCachedData is called fewer times due to the optimisations preventing redundant operations.

Also applies to: 747-747

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@danielroe danielroe merged commit f910b3c into main Jun 2, 2025
48 checks passed
@danielroe danielroe deleted the fix/handler-recalled branch June 2, 2025 09:07
This was referenced Jun 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

endless looping useAsyncData when used with same key in nested components with conditional rendering after updating to nuxt 3.17.0
1 participant
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy