Svelte: Declarative, updatable store that maintains previous state over time

[cdock1029]

Is your feature request related to a problem? Please describe.
Problem is described here: https://github.com/FormidableLabs/urql/issues/706

Describe the solution you'd like
I'm looking for a way to define stores declaratively, whose parameters can change but won't get recreated from scratch; the previous data is available. Essentially, like many React hooks operate, memoizing previous data.

Specific use-case is Apollo / Urql Graphql query(..) methods, that setup subscriptions internally but whose variables can be updated without discarding previous data immediately.

Then we can achieve UI that only has top-level loading component; subsequent data (think pagination) can maintain UI/previous data, but allow showing "loading" state in a sub-component (like React useTransition). As it stands now, every update blows away the data, forcing UI branching on "loading/fetching" alone. And displaying a flash of content. Tables/lists of data must be discarded. This comes up everywhere in an app with lists/details etc.

Describe alternatives you've considered
Pushing this down into a component is possible, which then handles the subscribe/unsubscibe/update internally. But this doesn't compose as well as top level "hook"-like functions for handling state. Some of the promise of "less code" goes away as a result, having to create multiple components/files vs composing data succinctly.

How important is this feature to you?
I thought it wasn't that important for a while. But now I see the flash of new content is kind of a sticking point. Then you need escape hatches to just having "stores" alone deliver on the promise of simplicity that they seem to provide at first. Same with using components as mitigation. Extra code and files, hard to compose data, cutting into the assumption of "less code" vs React. In other words, very important, and as much as I don't like complexity of "hooks" and verbosity of React, I may move back.

Additional context

React hooks version
https://codesandbox.io/s/nervous-herschel-wqpz0?file=/src/Page.js

Svelte store version
https://codesandbox.io/s/affectionate-euclid-25gxp?file=/page.svelte

[pushkine]

derived stores are what you are looking for :
https://codesandbox.io/s/angry-water-1wipf

[antony]

Agreed. Thank you @pushkine :)

[cdock1029]

@pushkine thank you yes that does get much of the way to what I was after. I appreciate it. The function that constructs the store not being re-run was what I was missing

Though full declarative "hook" like would work with changed internal state as well as external props changes.. kinda like:

// a, b, c any dependencies state/props
$: myQuery = query({query: SOME_QUERY, variables: {a, b, c}}) 

I'm thinking just have to have query(..) be a lookup somewhere (context?) for stored "stores" so I don't actually recreate the store each time. that or something like:

const [variables, list] = myQueryStore({ page: 1, perPage: 3, sort }, CUSTOMER);
$: $variables.sort = sort;

If sort was a prop