remove skipped properties from serialized state

[sinisterstumble]

What problem is this solving

Pinia has the ability to skip the hydration of certain properties with skipHydrate(). However, there is currently no way to remove skipped properties from the serialized state.

Proposed solution

Pinia could provide a function filterSkipped that would go over pinia.state.value and remove the skipped properties.

Describe alternatives you've considered

No response

[posva]

What are you really trying to do? You shouldn't need to remove any properties from the serialized state. If that's the case, they probably shouldn't be in the state in the first place

[sinisterstumble]

It could be that I misunderstood something. I have a ref property in a pinia setup store that tracks a file loading state: loaded | pending. I use skipHydrate on that property since the client and the server must do their own loading. The property is used for UI interaction feedback on the client. Currently, the property is serialized into pinia.state.value as 'loaded', which is the server state, and it's incorrect for the client. The skipHydrate skips hydration of that property, and it ends up with the value 'pending' - the correct initial ref value for the client.

So everything works perfectly as-is. Removing the property from the serialized state would just free up a little bit of space.

[posva]

removing one or even a thousand numbers from memory won't make a difference in a Vue application, you don't need to worry about this, let JS handle the garbage collection 🙂

[sinisterstumble]

I meant the document size with the unnecessary properties in the serialized state.

[Csszabi98]

Hey, I have stumbled upon the need for such a functionality myself. My use case is the following:

1. Apollo queries are executed, and apollo takes care of caching the results, apollo state is restored on the client and the client uses the cache
2. State derived from the apollo query results is stored inside of pinia, and is used by the components to render
3. When I try to SSR my page, I end up with a duplicated state on the client that is quite large: pinia.state and apollo.state

The need arises to deduplicate this, as the pinia state essentially acts as "writableComputed" since it is derived from the apollo state. In fact, using and internal ref and exposing a computed derivate does solve the duplication, but it creates some overhead.

I have to define stores like this:

const store  = defineStore('example', () => {
  const apolloDerivate = ref()

  function setApolloDerivate(newValue) {
    // Not so trivial state setting logic based on multiple refs
  }

  return {
    apolloDerivate: computed(() => apolloDerivate.value),
    setApolloDerivate
  }
})

Or use a utility function like:

function nonSerializableRef() {
  const dataRef = ref()
 
  return computed({
    get() {
      return dataRef.value
    },
   set(newValue) {
     dataRef.value = newValue
   }
}

Both solutions are quite verbose and bring the overhead (and performance issues) of an extra computed property, when in fact what I would like to do is to just use something like skipSerialize.

The component rendering logic takes care of building up the store correctly during the hydration process using the instantly resolved Apollo query result (from the cache).

The components are architected this way to enable multiple data provider components upward the tree.

[posva]

Using a computed is as long as using a helper called skipSerialize. Note you could also use just a js getter or toRaw() to keep things reactive while skipping pinia's check for state (isRef or isReactive) see playground.