Discussion: State Management and Data Fetching #4487
Draft
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is WIP proposal that is to be used as a jumping off point for discussion. It shows, in a limited and unpolished capacity, a new model for handling application state, fetching data and generating URLs. This PR uses SvelteKit 2 (though does not rely on it), so run
npm install
.In general, it shows a model for going from fetching the bare minimum of data required to initialize the application to a way to pass that data down to the necessary components without the use of custom writable and derived stores. It also shows a way to think of the URL as our primary form of state management by having interactive elements that invalidate/change queries be link tags or buttons that simply update routing and search params, eliminating the idea of race conditions, uncontrolled data fetching or complex dependencies. When the URL changes, the impacted load functions automatically re-run, fetching new data (often from the cache).
It also shows a way to save route specific query state not via complex custom stores, but as simply the most recent state of the URL captured before resource based navigation.
Guiding ideas:
.svelte
files and into+page.ts
and+layout.ts
files<a>
tags to enable data preloading and automatic query fetching+
files as promises and use#await
blocks to handle loading and error statesget
method and persist data via localStorage or sessionStorageGo To Definitions
to understand the source of critical state or dataGoals: