bobvantpadje
bobvantpadje
PostsComments
NNuxt
Created by bobvantpadje on 9/12/2024 in #❓・help
Shareable custom useAsyncData composable
I have a composable that fetches data with useAsyncData . I would like to reuse this composable in other components. So that would look something like this: 
// useCustomAsyncData.ts
export function useCustomAsyncData() {
  return useAsyncData('key', () => { // fetch data here})
}

// component one 
const { data } = useCustomAsyncData()

// component two
const { data } = useCustomAsyncData()
// useCustomAsyncData.ts
export function useCustomAsyncData() {
  return useAsyncData('key', () => { // fetch data here})
}

// component one 
const { data } = useCustomAsyncData()

// component two
const { data } = useCustomAsyncData()
If I understand correctly, useAsyncData should memoize it's value. So, I expected that the fetching data inside useAsyncData would only be called once. However, this doesn't seem to be the case and the fetching data gets called twice. Am I missing something here? I understand that I could get the cached value with useNuxtData inside the second component. But Ideally I would have one composable that's smart enough to either fetch the data or retrieve it from the cache. I have a Codesandbox with a POC here to show what I'm exactly trying to do
6 replies
NNuxt
Created by bobvantpadje on 8/29/2024 in #❓・help
Nuxt + Apollo : what is the best way to fetch data.
I'm setting up a Nuxt project with Apollo and I want to leverage SSR. There is a Nuxt/Apollo package, but it doesn't seem to be actively mainained and there are some issues with it. Therefore I was thinking to use Vue Apollo. I have a couple questions regarding how to set this up, and how to best fetch data. Is useQuery safe to use with SSR? Using useQuery doesn't seem to be optimized for SSR. It's not possible to await useQuery or wrap it inside useAsyncData, since it's not a promise. So, it feels like this is not the best way to fetch data on the server side. Is this assumption correct? Or would it be fine to use useQuery server side? Would making a custom useAsyncQuery make sense? I really liked what Nuxt/Apollo did with their useAyncQuery implementation. This allows me to await the query on the server side, which is exactly what I want. I made a custom implementation in this code sandbox, but I feel like I'm maybe oversimplifying things a lot. Is this the right direction, or am I missing something? Are there any other (better) ways to fetch data with Apollo when using Nuxt + Apollo + SSR or am I heading in the right direction?
1 replies