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

Add fetcherKey APIs and update fetcher persistence architecture #10949

Closed
wants to merge 18 commits into from
Closed
Show file tree
Hide file tree
Changes from 17 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fetcher-key.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"react-router-dom": minor
---

Add support for manual fetcher key specification via `useFetcher({ key: string })` so you can access the same fetcher instance from different components in your application without prop-drilling ([RFC](https://github.com/remix-run/remix/discussions/7698))
14 changes: 14 additions & 0 deletions .changeset/fetcher-persistence.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
"react-router-dom": minor
"@remix-run/router": minor
---

Fix the persistence behavior of fetchers so that they don't get cleaned up on `fetcher` unmount, but instead get cleaned up on fetcher completion (which may be after the fetcher unmounts in the UI) ([RFC](https://github.com/remix-run/remix/discussions/7698))

- This is a long-standing bug fix as the `useFetchers()` API was always supposed to only reflect **in-flight** fetcher information for pending/optimistic UI
- It was not intended to reflect fetcher data or hang onto fetchers after they returned to an idle state
- To do this we've re-architected things a bit and now it's the `react-router-dom` layer that holds stateful fetcher data to expose via `useFetcher()`
- The `router` now only knows about in-flight fetchers - they do not exist in `state.fetchers` until a `fetch()` call is made, and they are removed when it returns to `idle` (and the data is handed off to the React layer)
- **Warning:** This has two potential "breaking bug" side-effects for your application:
- Fetchers that previously unmounted _while in-flight_ will not be immediately aborted and will instead be cleaned up once they return to `idle`. They will remain exposed via `useFetchers` while in-flight so you can still access pending/optimistic data after unmount.
- Fetchers that complete while still mounted will no longer appear in `useFetchers()` - they served effectively no purpose in there since you can access the data via `useFetcher().data`)
6 changes: 6 additions & 0 deletions .changeset/fix-type-bug.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@remix-run/router": patch
---

- Remove the internal `router.getFetcher` API
- Fix `router.deleteFetcher` type definition which incorrectly specified `key` as an optional parameter
8 changes: 8 additions & 0 deletions .changeset/submit-navigate-fetcherKey.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"react-router-dom": minor
---

Add `navigate`/`fetcherKey` params/props to `useSumbit`/`Form` to support kicking off a fetcher submission under the hood with an optionally user-specified key

- Invoking a fetcher in this way is ephemeral and stateless
- If you need to access the state of one of these fetchers, you will need to leverage `useFetcher({ key })` to look it up elsewhere
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -113,16 +113,16 @@
"none": "48.3 kB"
},
"packages/react-router/dist/react-router.production.min.js": {
"none": "13.9 kB"
"none": "13.8 kB"
},
"packages/react-router/dist/umd/react-router.production.min.js": {
"none": "16.3 kB"
},
"packages/react-router-dom/dist/react-router-dom.production.min.js": {
"none": "15.9 kB"
"none": "16.5 kB"
},
"packages/react-router-dom/dist/umd/react-router-dom.production.min.js": {
"none": "22.1 kB"
"none": "22.7 kB"
}
}
}
Loading