fix(react-router): ensure fetch abort works correctly even with pendingComponent

[leesb971204]

fixes #3014

[nx-cloud]

View your CI Pipeline Execution ↗ for commit eeeaeda.

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	4m 39s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	1m 25s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-30 22:25:34 UTC

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-example-large
• tanstack-start-example-supabase-basic
• tanstack-start-example-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@3181

@tanstack/create-router

npm i https://pkg.pr.new/@tanstack/create-router@3181

@tanstack/create-start

npm i https://pkg.pr.new/@tanstack/create-start@3181

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/@tanstack/directive-functions-plugin@3181

@tanstack/react-cross-context

npm i https://pkg.pr.new/@tanstack/react-cross-context@3181

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/@tanstack/eslint-plugin-router@3181

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@3181

@tanstack/react-router

npm i https://pkg.pr.new/@tanstack/react-router@3181

@tanstack/react-router-with-query

npm i https://pkg.pr.new/@tanstack/react-router-with-query@3181

@tanstack/router-cli

npm i https://pkg.pr.new/@tanstack/router-cli@3181

@tanstack/router-devtools

npm i https://pkg.pr.new/@tanstack/router-devtools@3181

@tanstack/router-generator

npm i https://pkg.pr.new/@tanstack/router-generator@3181

@tanstack/router-plugin

npm i https://pkg.pr.new/@tanstack/router-plugin@3181

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/@tanstack/router-vite-plugin@3181

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/@tanstack/server-functions-plugin@3181

@tanstack/start

npm i https://pkg.pr.new/@tanstack/start@3181

@tanstack/start-api-routes

npm i https://pkg.pr.new/@tanstack/start-api-routes@3181

@tanstack/start-config

npm i https://pkg.pr.new/@tanstack/start-config@3181

@tanstack/start-client

npm i https://pkg.pr.new/@tanstack/start-client@3181

@tanstack/start-plugin

npm i https://pkg.pr.new/@tanstack/start-plugin@3181

@tanstack/start-router-manifest

npm i https://pkg.pr.new/@tanstack/start-router-manifest@3181

@tanstack/start-server

npm i https://pkg.pr.new/@tanstack/start-server@3181

@tanstack/start-server-functions-client

npm i https://pkg.pr.new/@tanstack/start-server-functions-client@3181

@tanstack/start-server-functions-fetcher

npm i https://pkg.pr.new/@tanstack/start-server-functions-fetcher@3181

@tanstack/start-server-functions-handler

npm i https://pkg.pr.new/@tanstack/start-server-functions-handler@3181

@tanstack/start-server-functions-server

npm i https://pkg.pr.new/@tanstack/start-server-functions-server@3181

@tanstack/start-server-functions-ssr

npm i https://pkg.pr.new/@tanstack/start-server-functions-ssr@3181

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@3181

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@3181

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@3181

commit: eeeaeda

[schiller-manuel]

can you please add a test for this?

[leesb971204]

can you please add a test for this?

I have added and written the test cases as requested. Since this is my first attempt at writing test cases, I am unsure if they have been written correctly. I would greatly appreciate it if you could kindly review them and provide your feedback. For your reference, it seems that the code below needs to be placed at the very top of the file in my local environment for the test cases to work properly. Thank you so much in advance for your help!

/**
 * @vitest-environment jsdom
 */
import '@testing-library/jest-dom/vitest'

[leesb971204]

can you please add a test for this?

I apologize for the misunderstanding earlier. To clarify the issue, when pendingMs is 0, the abort function operates correctly if there is no pendingComponent. However, if a pendingComponent is present, the abort function does not work as expected. I have made modifications to address this behavior. Considering that this might be the intended functionality, I believe it may be necessary to revise the title of the PR accordingly.

[schiller-manuel]

this does not work with preloads. hover over a link, let the preload start. then click, wait for the pending component, navigate away. preload is not cancelled.

[leesb971204]

this does not work with preloads. hover over a link, let the preload start. then click, wait for the pending component, navigate away. preload is not cancelled.

2025-01-22.3.50.05.mov

If the issue you mentioned about preload not working aligns with the behavior in the video, it seems unrelated to my work. I have reproduced this behavior in the latest main branch, and it does not appear to be a side effect of my changes. While I agree that preload(fetching posts in my video) should be aborted, the environment in which I worked had defaultPreload set to false, and I believe addressing this behavior should be treated as a separate issue. And I think hover action is related to cachedMatches not pendingMatches. Therefore, I think that the work regarding preload not functioning properly should be addressed in a new PR. What are your thoughts on this?