{"id":12554,"library":"vue-query","title":"Vue Query - Data Fetching Hooks","description":"Vue Query is a library designed to simplify data fetching, caching, and synchronization for Vue applications, bringing the powerful features of TanStack Query (formerly React Query) to the Vue ecosystem. It provides a set of hooks for declarative and efficient management of asynchronous data, reducing boilerplate and improving developer experience. The current stable version is 1.26.0, but version 2.x is under active beta development, which tightly aligns its core logic with `@tanstack/query-core`. This alignment in v2 is a key differentiator, ensuring consistency with the broader TanStack Query ecosystem. It addresses common challenges like caching, background refetching, optimistic updates, and pagination out-of-the-box, making it an advanced solution compared to manual `fetch` or `axios` implementations. The library is actively maintained with ongoing feature development and bug fixes.","status":"active","version":"1.26.0","language":"javascript","source_language":"en","source_url":"https://github.com/DamianOsipiuk/vue-query","tags":["javascript","vue","query","vue-query","vue-react-query","server-cache","typescript"],"install":[{"cmd":"npm install vue-query","lang":"bash","label":"npm"},{"cmd":"yarn add vue-query","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-query","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Nuxt 2 applications using the Composition API.","package":"@nuxtjs/composition-api","optional":true},{"reason":"Required for Vue 2 applications using the Composition API.","package":"@vue/composition-api","optional":true},{"reason":"Core dependency for Vue.js applications.","package":"vue","optional":false}],"imports":[{"note":"Used to create a new instance of the query client.","wrong":"const QueryClient = require('vue-query')","symbol":"QueryClient","correct":"import { QueryClient } from 'vue-query'"},{"note":"A component that makes the QueryClient instance available to all child components. It's a named import, not a default.","wrong":"import QueryClientProvider from 'vue-query'","symbol":"QueryClientProvider","correct":"import { QueryClientProvider } from 'vue-query'"},{"note":"The primary hook for fetching and managing server-side data. 'useQueries' is for fetching multiple queries in parallel.","wrong":"import { useQueries } from 'vue-query'","symbol":"useQuery","correct":"import { useQuery } from 'vue-query'"},{"note":"Used for sending data to the server (e.g., POST, PUT, DELETE requests).","symbol":"useMutation","correct":"import { useMutation } from 'vue-query'"}],"quickstart":{"code":"import { createApp, defineComponent } from 'vue';\nimport { QueryClient, QueryClientProvider, useQuery } from 'vue-query';\n\nconst queryClient = new QueryClient();\n\nconst fetchTodos = async () => {\n  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');\n  if (!response.ok) {\n    throw new Error('Network response was not ok');\n  }\n  return response.json();\n};\n\nconst App = defineComponent({\n  name: 'App',\n  setup() {\n    const { data, isLoading, isError, error } = useQuery('todo', fetchTodos);\n\n    return {\n      data,\n      isLoading,\n      isError,\n      error,\n    };\n  },\n  template: `\n    <div>\n      <h1>My Todo</h1>\n      <p v-if=\"isLoading\">Loading todo...</p>\n      <p v-else-if=\"isError\">Error: {{ error.message }}</p>\n      <div v-else>\n        <p>ID: {{ data.id }}</p>\n        <p>Title: {{ data.title }}</p>\n        <p>Completed: {{ data.completed ? 'Yes' : 'No' }}</p>\n      </div>\n    </div>\n  `,\n});\n\nconst app = createApp({\n  render() {\n    return [\n      h(QueryClientProvider, { client: queryClient }, {\n        default: () => h(App)\n      })\n    ];\n  }\n});\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0-beta.1"},{"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`.","message":"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.","severity":"breaking","affected_versions":">=2.0.0-beta.10"},{"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`.","message":"`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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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()`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"`QueryClientProvider` was not correctly imported or registered as a component, often due to incorrect casing or not using named import.","error":"Failed to resolve component: QueryClientProvider"},{"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()`.","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.","error":"Error: A QueryClient was not found in the Vue context. Did you forget to install the QueryClientProvider?"},{"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()`.","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.","error":"TypeError: Cannot read properties of undefined (reading 'setup')"}],"ecosystem":"npm"}