help: setting a non-reactive const with useFetch()

[pooledge]

FOA thanks for the module, was looking for this!

📚 What are you trying to do? Please describe.
I'd like to set a const items[] as a result of the useFetch(). I explicitly want items array to be non-reactive to prevent performance issues while observing a huge array.

Using Apollo in a regular Vue CLI app I'm able to achieve this with:

const { result, loading } = useQuery(aQuery);

so while result is not set, I can use loading. I see there is no simple way to achieve this.

My global aim is to refactor an existing Nuxt.js app with less reactivity. Am I looking to the right direction at all?

Oh and BTW, a check for globalName from the Nuxt config would be nice )

[danielroe]

Created #37 to track the last comment.

It should be possible to do this - possibly in conjunction with the great work @mathe42 is doing - great idea 😃

[mathe42]

So you want to use shallowRef from vue3?

When this vuejs/composition-api#311 gets merged we can create a ssrShallowRef wich should be what you want.

[danielroe]

@pooledge Presumably you want this to be reactive on server, so that you get the correct HTML rendered after the fetch completes, but completely non-reactive on client?

[pooledge]

I have to admit at this point I am not sure anymore what my worst enemy is. Do any of the following assumptions make sense to you?

shallowRef describes very much the same effect Apollo's useQuery() demonstrates: the variable is reactive while its value is not tracking any changes.
If so, being able to unRef() if you already can ref() helps to gain control over this situation and it isn't even the useFetch() thing anymore.
As for SSR to client, the main work is hydration so I'll have to apply techniques to prevent or defer this at first.
Right now simply freezing the $store data in computed insignificantly affects init and render and again what it does in my understanding – value doesn't track changes.

I guess to better understand the problem, more measurements have to be made in the client. I'll try to compare the Apollo setup I mentioned earlier with something like a sample of what I have in Nuxt right now.

@danielroe @mathe42 thank you for your inputs!

[mathe42]

I'm currently working on shallowSsrRef:

const _ref = shallowSsrRef(null)


if(!_ref) {
   useFetch(() => {
      _ref.value = await fetcher('Hello World')
   })
}

// on client after ssr
console.log(_ref) // 'Hello World'

const _ref = shallowSsrRef({ test: 'Hello' })


if(_ref.test === 'Hello') {
   useFetch(() => {
      _ref.value.test = await fetcher('World')
   })
}

// on client after ssr
console.log(_ref.value) // 'Hello'

[danielroe]

@pooledge Now merged and released as 0.6.3. Let me know if shallowSsrRef does the job for you 😄