help: how to use ssrRef with useFetch

**📚 What i am trying to do? ** i really need use a shared ref with useFetch how can i do that

🔍 What have i tried? i tried this :

import { Ref, ssrRef } from '@nuxtjs/composition-api'
const sharedMap = new Map()

function sharedRef<T>(value: T, key: string): Ref
function sharedRef<T>(value: T, _?): Ref
function sharedRef<T>(value: T, key: string): Ref {
  const givenKey = key || value
  if (sharedMap.has(givenKey)) {
    return sharedMap.get(givenKey)
  }
  const newRef = ssrRef(key ? value : null, givenKey as string)
  sharedMap.set(givenKey, newRef)
  return newRef
}
export { sharedRef }

to avoid twice hydration, am i in right way? if not how can i do this?

ℹ️ Additional context i have another problem too, i want to check if my shared ref has data don’t fetch it with client navigation therefor :

const { fetch } = useFetch(() =>{
 if(mySharedRef.value){return}
} ...)

it’s totally fine in develop env but when i deployed it, data has gone after a quick showing, but page source is okay.

[danielroe]

@ziaadini Great 👍

[ziaadini]

thanks. i had some issue with ssrRef and i fix it by this code with vuex

import { useStore, computed } from '@nuxtjs/composition-api'

export const useStoreRef = (initialValue, key) => {
  const store = useStore()
  return computed({
    get() {
      // @ts-ignore
      const data = store.state.refData[key]
      return data !== undefined ? data : initialValue
    },
    set(value) {
      store.commit('SET_REF', { key, value })
    }
  })
}

inside store/index.ts mutation:

 SET_REF(state, { key, value }) {
    Vue.set(state.refData, key, value)
  },

and every thing work as expected now and i can useFetch because i’m using vuex, not ssrRef. i think it’s okay now isn’t it?