Vue Query - Data Fetching Hooks

Common errors

• Failed to resolve component: QueryClientProvider

  cause `QueryClientProvider` was not correctly imported or registered as a component, often due to incorrect casing or not using named import.
  fix Ensure `import { QueryClientProvider } from 'vue-query';` is used and that you are rendering it correctly in your template or render function, e.g., `<QueryClientProvider :client="queryClient">` or `h(QueryClientProvider, { client: queryClient }, ...)`. Remember it's a named export.

• Error: A QueryClient was not found in the Vue context. Did you forget to install the QueryClientProvider?

  cause The `QueryClientProvider` component was not used to wrap the application or the component attempting to use `vue-query` hooks, or the `client` prop was not passed.
  fix Wrap your root Vue component (or the relevant part of your app) with `<QueryClientProvider :client="queryClient">` and ensure `queryClient` is an instance of `new QueryClient()`.

• TypeError: Cannot read properties of undefined (reading 'setup')

  cause This usually indicates that a `vue-query` hook (or any Composition API hook) is being called outside of a Vue component's `setup()` function context.
  fix Verify that `useQuery`, `useMutation`, etc., are only called directly within the `setup()` method of your components or within custom composable functions that are themselves called from `setup()`.

Warnings

• breaking Version 2.0.0-beta and later migrates to `@tanstack/query-core`, which may introduce breaking changes in configuration options, API, and internal behavior. It's recommended to consult the TanStack Query documentation for core changes when upgrading to `vue-query` v2.
  Fix: Review the official migration guide for `@tanstack/query` and `vue-query` v2 when it becomes stable. Specifically, check for changes related to query keys, query options, and client configuration.
• breaking Starting from v2.0.0-beta.10, `vue-query` is updated to be ESM compliant, aligning with `query-core`'s move to ESM. This might affect bundler configurations or environments that rely strictly on CommonJS.
  Fix: Ensure your project is configured for ESM by using `"type": "module"` in your `package.json` or by configuring your bundler (e.g., Webpack, Rollup, Vite) to correctly handle ESM imports and exports for `vue-query`.
• gotcha `vue-query` requires the Vue Composition API. For Vue 2 projects, you must explicitly install and register either `@vue/composition-api` or `@nuxtjs/composition-api` (for Nuxt 2). For Vue 3, the Composition API is built-in.
  Fix: For Vue 2, install `npm install @vue/composition-api` and then `Vue.use(VueCompositionAPI)` in your main.js. For Nuxt 2, install `@nuxtjs/composition-api` and ensure it's configured in `nuxt.config.js`.
• gotcha All `vue-query` hooks (e.g., `useQuery`, `useMutation`) must be called within a component's `setup()` function or another Composition API hook. Calling them outside will result in errors related to missing context.
  Fix: Ensure that `useQuery` and other hooks are invoked directly within the `setup()` function of a Vue component or within a custom composable function that is itself called from `setup()`.

Install

• npm install vue-query npm
• yarn add vue-query yarn
• pnpm add vue-query pnpm

Imports

• QueryClient
  wrong:

  const QueryClient = require('vue-query')

  correct:

  import { QueryClient } from 'vue-query'

  Used to create a new instance of the query client.
• QueryClientProvider
  wrong:

  import QueryClientProvider from 'vue-query'

  correct:

  import { QueryClientProvider } from 'vue-query'

  A component that makes the QueryClient instance available to all child components. It's a named import, not a default.
• useQuery
  wrong:

  import { useQueries } from 'vue-query'

  correct:

  import { useQuery } from 'vue-query'

  The primary hook for fetching and managing server-side data. 'useQueries' is for fetching multiple queries in parallel.
• useMutation

  import { useMutation } from 'vue-query'

  Used for sending data to the server (e.g., POST, PUT, DELETE requests).

Quickstart

This quickstart demonstrates how to set up `vue-query` in a Vue 3 application. It initializes a `QueryClient`, provides it via `QueryClientProvider`, and then uses `useQuery` within a component to fetch and display data from a public API, handling loading and error states.

import { createApp, defineComponent } from 'vue';
import { QueryClient, QueryClientProvider, useQuery } from 'vue-query';

const queryClient = new QueryClient();

const fetchTodos = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const App = defineComponent({
  name: 'App',
  setup() {
    const { data, isLoading, isError, error } = useQuery('todo', fetchTodos);

    return {
      data,
      isLoading,
      isError,
      error,
    };
  },
  template: `
    <div>
      <h1>My Todo</h1>
      <p v-if="isLoading">Loading todo...</p>
      <p v-else-if="isError">Error: {{ error.message }}</p>
      <div v-else>
        <p>ID: {{ data.id }}</p>
        <p>Title: {{ data.title }}</p>
        <p>Completed: {{ data.completed ? 'Yes' : 'No' }}</p>
      </div>
    </div>
  `,
});

const app = createApp({
  render() {
    return [
      h(QueryClientProvider, { client: queryClient }, {
        default: () => h(App)
      })
    ];
  }
});
app.mount('#app');