Am I doing composables wrong?

I have a component that ended up with a lot of queries that were used to derive a value, so I figured I'd refactor that logic into its own file, but I'm having some trouble getting vue-query to work in a composable scenario. Here's a redacted and simplified version of what my external module now looks like:

export function useDownloadStatus (filename: string) {
  const status = ref('loading')

  watchEffect(() => {
    const [
      { data: headData, isPending: headPending },
      { data: getData, isPending: getPending },
    ] = [
      headQuery(filename), // these are directly mapped to useQuery() with some predefined settings for query key and queryFn
      getQuery(filename),
    ]
    status.value = (() => {
      if (headPending) return 'loading'
      if (headData.value) return 'downloadable'

      if (getPending) return 'loading'
      if (!getData.value) return 'nonexistent'

      // [..more logic for other statuses]

      return 'fallbackvalue'
    })()
  })
  return status
}

export function useDownloadStatus (filename: string) {
  const status = ref('loading')

  watchEffect(() => {
    const [
      { data: headData, isPending: headPending },
      { data: getData, isPending: getPending },
    ] = [
      headQuery(filename), // these are directly mapped to useQuery() with some predefined settings for query key and queryFn
      getQuery(filename),
    ]
    status.value = (() => {
      if (headPending) return 'loading'
      if (headData.value) return 'downloadable'

      if (getPending) return 'loading'
      if (!getData.value) return 'nonexistent'

      // [..more logic for other statuses]

      return 'fallbackvalue'
    })()
  })
  return status
}

export function useDownloadStatus (filename: string) {
  const status = ref('loading')

  watchEffect(() => {
    const [
      { data: headData, isPending: headPending },
      { data: getData, isPending: getPending },
    ] = [
      headQuery(filename), // these are directly mapped to useQuery() with some predefined settings for query key and queryFn
      getQuery(filename),
    ]
    status.value = (() => {
      if (headPending) return 'loading'
      if (headData.value) return 'downloadable'

      if (getPending) return 'loading'
      if (!getData.value) return 'nonexistent'

      // [..more logic for other statuses]

      return 'fallbackvalue'
    })()
  })
  return status
}

export function useDownloadStatus (filename: string) {
  const status = ref('loading')

  watchEffect(() => {
    const [
      { data: headData, isPending: headPending },
      { data: getData, isPending: getPending },
    ] = [
      headQuery(filename), // these are directly mapped to useQuery() with some predefined settings for query key and queryFn
      getQuery(filename),
    ]
    status.value = (() => {
      if (headPending) return 'loading'
      if (headData.value) return 'downloadable'

      if (getPending) return 'loading'
      if (!getData.value) return 'nonexistent'

      // [..more logic for other statuses]

      return 'fallbackvalue'
    })()
  })
  return status
}

My component

button.vue

button.vue

button.vue

button.vue uses the composable like any other, by importing it and

const status = useDownloadStatus("foo")

const status = useDownloadStatus("foo")

const status = useDownloadStatus("foo")

const status = useDownloadStatus("foo") from

<script setup>

<script setup>

<script setup>

<script setup>

While I can see the network requests being made, it seems like the queries reactivity disappear along the way, leaving the status left on

loading

loading

loading

loading and a ill-boding warning from vue-query in the console:

vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

vue-query composables like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

Any ideas what I'm missing?

Am I doing composables wrong?

Similar Threads

Similar Threads

Similar Threads