useQuery + useFetch in Nuxt3

[iamdantz]

I'm using Vue-Query for first time, trying some experiments

In Nuxt 3 I have a composable:

// composables/useDemo.ts

export const useDemo = (path: string, options?: undefined | object) => {
  return useFetch(path, {
    ...options,
    onResponseError({ response }) {
      throw createError({
        statusCode: response.status,
        statusMessage: response.statusText,
      });
    },
  });
};

Then in my page:

// pages/demo.vue

<script setup lang="ts">
const { isPending, isError, data, error } = useQuery({
  queryKey: ['demo'],
  queryFn: () => useDemo('somePath'),
});
</script>

And this works but in my console I have a warining:

[nuxt] [useFetch] Component is already mounted, please use $fetch instead

Replacing useFetch with $fetch stills works and remove the warning but, why?

I just to know why this behavior

Note: My API is a nodejs API running in other project
Note 2: I've used vue-query from Nuxt Modules directory to install
Note 3: ssr: false

[DamianOsipiuk]

useFetch in Nuxt is a wrapper around $fetch that handles SSR automatically.
useQuery does the same thing for SSR when plugin is properly set up.
There are additional benefits of using vue-query when app runs in client side mode.
But useQuery in itself does not fetch the data so it needs $fetch or other Promise based function as queryFn.

But you should not mix both. Choose one of them.

[iamdantz]

Thanks!