Sharing Reactive Data Between Vue Components

[jarkt]

In my vue app is a profile component and an edit component for the profile which is rendered simultanously.
Both must work with the same reactive data comming from Apollo client. These are the loading state, error and the result data itself.
The app uses SSR with Vite.

I don't know how I can share the same reactive variables. The idea is not using Apollo for this but a Pinia store. But I doesn't find any ressources about how to store reactive variables in a store. That seems not to be so easy as one maybe think.

If I only regard client side, it's possible by defining an object with shallowReactive and assign objects to it by their ids.
The inner objects can contain ref variables and it's working fine. (see below)

SSR makes it more complicated. If I serialize the stores with devalue (https://pinia.vuejs.org/ssr/#State-hydration) I get a string who looks like this (formatted here of course):

{
  profiles: {
    _profiles: {
      'a1bee77c-fdc3-4442-8034-6dda126e70b4': {
        loading: {
          __v_isShallow: false,
          dep: void 0,
          __v_isRef: true,
          _rawValue: false,
          _value: false
        }
      }
    }
  }
}

I don't think it's the needed result as it's not possible to deserialize it to a ref variable.
So I cannot work with the inner store state if it comes initially from the server.
At this stage I maybe need a serialized object like this:

{
  profiles: {
    _profiles: {
      'a1bee77c-fdc3-4442-8034-6dda126e70b4': {
        loading: false
      }
    }
  }
}

To make it reactive again would be another easy part which I could do inside the store for myself.
Now I'm not sure if my approach is right or how I can solve the issue.

This is the code which works on the client side only:

import {defineStore} from 'pinia'
import {Ref, ref, shallowReactive} from 'vue'
import {useProfileByIdQuery} from '@/composables/app/queries/profileByIdQuery.ts'
import {ApolloError} from '@apollo/client'

interface ResultValue {
  loading: Ref<boolean>
  error: Ref<ApolloError | null>
  data: Ref<any>
}

export const useProfilesStore = defineStore('profiles', () => {
  const _profiles = shallowReactive<Record<string, ResultValue>>({})

  const loadProfile = (profileId: string) => {
    const profileFromStore = _profiles[profileId]

    if (typeof profileFromStore !== "undefined") {
      return profileFromStore
    }

    const profileByIdQuery = useProfileByIdQuery(profileId)
    _profiles[profileId] = {
      loading: profileByIdQuery.loading, // Already reactive from vue-apollo
      error: profileByIdQuery.error, // Already reactive from vue-apollo
      data: ref(null)
    }

    profileByIdQuery.onResult((result) => {
      if (result.loading) {
        return
      }

      _profiles[profileId].data.value = result.data.ProfileById
    })

    profileByIdQuery.onError(() => {
      delete _profiles[profileId]
    })

    return _profiles[profileId]
  }

  return {
    _profiles,
    loadProfile
  }
})

It could be easy if Pinia would offer the possibility to write custom functions for the serialisation and deserialisation process.