vue-query hooks can only be used inside setup() function or functions that support injection context.

[prpanto]

Nuxt: latest
I have follow the example to install the vue-query on Nuxt

I dont understand what I make wrong?... The useInfiniteQuery need to be inside the script setup tag? Can someone explain me why this happen?

<template>
   ...
</template>

<script setup>
import { useInfiniteQuery } from '@tanstack/vue-query'

...

function queryReposFetch(page, perPage, refetch) {
  const {
    data,
    error: err,
    fetchNextPage: fetchNP,
    hasNextPage: hasNP,
    isFetching: isF, 
    isFetchingNextPage: isFNP,
    isPending,
    isError: isErr,
  } = useInfiniteQuery({
    queryKey: ['posts', perPage, refetch],
    queryFn: ({ pageParam = page }) => fetchRepos({ pageParam, perPage, refetch }),
    initialPageParam: 1,
    getNextPageParam: (lastPage, pages) => lastPage.cursor,
  })

  repos.value = data.value
  loadingRepos.value = isPending.value
  error.value = err.value
  fetchNextPage.value = fetchNP.value
  hasNextPage.value = hasNP.value
  isFetching.value = isF.value
  isFetchingNextPage.value = isFNP.value
  isError.value = isErr.value
}

function refetchRepos() {
  queryReposFetch(1, perPage.value, 1)
}

onMounted(async () => {
  await nextTick(() => {
    queryReposFetch(1, perPage.value, 0)
  })
})
</script>

[Mini-ghost]

You should always use composables at the top level of the setup function, so you would write the following code:

<script setup>
const isMounted = ref(false)

const {
  data,
  error,
  fetchNextPage,
  hasNextPage,
  isFetching,
  isFetchingNextPage,
  isPending,
  isErro,
} = useInfiniteQuery({
  queryKey: ['posts', perPage, refetch],
  queryFn: ({ pageParam = page }) => fetchRepos({ pageParam, perPage, refetch }),
  initialPageParam: 1,
  getNextPageParam: (lastPage, pages) => lastPage.cursor,
  enabled: isMounted
})

onMounted(() => isMounted.value = true)
</script>