{"owner":"vuejs","repo":"apollo","hasSkills":true,"totalSkillsCount":100,"totalTokensCount":104212,"categories":["anthropic-skill","plugin-manifest","cursor-rule"],"hasMcp":false,"mcpConfig":null,"found":["packages/docs/advanced/lazy-queries.md","packages/docs/advanced/loading-states.md","packages/docs/advanced/multiple-clients.md","packages/docs/advanced/outside-components.md","packages/docs/advanced/streaming.md","packages/docs/api/components/ApolloFragment.md","packages/docs/api/components/ApolloMutation.md","packages/docs/api/components/ApolloQuery.md","packages/docs/api/components/ApolloSubscribeToMore.md","packages/docs/api/components/ApolloSubscription.md","packages/docs/api/components/index.md","packages/docs/api/composable/@vue/namespaces/provideApolloClient/index.md","packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Callback.md","packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Result.md","packages/docs/api/composable/@vue/namespaces/provideApolloClients/index.md","packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Callback.md","packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Result.md","packages/docs/api/composable/@vue/namespaces/useApolloClient/index.md","packages/docs/api/composable/@vue/namespaces/useApolloClient/interfaces/Result.md","packages/docs/api/composable/@vue/namespaces/useFragment/index.md","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Current.md","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Options.md","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Result.md","packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/FromValue.md","packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/ReactiveVariablesParameter.md","packages/docs/api/composable/@vue/namespaces/useLazyQuery/index.md","packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options.md","packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result.md","packages/docs/api/composable/@vue/namespaces/useMutation/index.md","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateOptions.md","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateResult.md","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Options.md","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Result.md","packages/docs/api/composable/@vue/namespaces/useMutation/type-aliases/ReactiveVariablesParameter.md","packages/docs/api/composable/@vue/namespaces/useQuery/index.md","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Current.md","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreOptions.md","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreResult.md","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Options.md","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Result.md","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/SubscribeToMoreOptions.md","packages/docs/api/composable/@vue/namespaces/useQuery/type-aliases/ReactiveVariablesParameter.md","packages/docs/api/composable/@vue/namespaces/useSubscription/index.md","packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Options.md","packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Result.md","packages/docs/api/composable/@vue/namespaces/useSubscription/type-aliases/ReactiveVariablesParameter.md","packages/docs/api/composable/functions/provideApolloClient.md","packages/docs/api/composable/functions/provideApolloClients.md","packages/docs/api/composable/functions/useApolloClient.md","packages/docs/api/composable/functions/useFragment.md","packages/docs/api/composable/functions/useGlobalMutationLoading.md","packages/docs/api/composable/functions/useGlobalQueryLoading.md","packages/docs/api/composable/functions/useGlobalSubscriptionLoading.md","packages/docs/api/composable/functions/useLazyQuery.md","packages/docs/api/composable/functions/useMutation.md","packages/docs/api/composable/functions/useMutationLoading.md","packages/docs/api/composable/functions/useQuery.md","packages/docs/api/composable/functions/useQueryLoading.md","packages/docs/api/composable/functions/useSubscription.md","packages/docs/api/composable/functions/useSubscriptionLoading.md","packages/docs/api/composable/index.md","packages/docs/api/composable/typedoc-sidebar.json","packages/docs/api/composable/variables/ApolloClients.md","packages/docs/api/composable/variables/DefaultApolloClient.md","packages/docs/api/index.md","packages/docs/caching/cache-updates.md","packages/docs/caching/interaction.md","packages/docs/caching/optimistic-ui.md","packages/docs/caching/overview.md","packages/docs/data/data-masking.md","packages/docs/data/error-handling.md","packages/docs/data/fragments.md","packages/docs/data/mutations.md","packages/docs/data/queries.md","packages/docs/data/refetching.md","packages/docs/data/subscriptions.md","packages/docs/data/suspense.md","packages/docs/data/typescript.md","packages/docs/guide/index.md","packages/docs/guide/installation.md","packages/docs/guide/why-apollo.md","packages/docs/index.md","packages/docs/local-state/overview.md","packages/docs/migration/compat.md","packages/docs/migration/components.md","packages/docs/migration/guide.md","packages/docs/migration/whats-changed.md","packages/docs/networking/authentication.md","packages/docs/networking/basic-http.md","packages/docs/package.json","packages/docs/pagination/cursor-based.md","packages/docs/pagination/offset-based.md","packages/docs/pagination/overview.md","packages/docs/ssr/nuxt.md","packages/docs/ssr/overview.md","packages/docs/tsconfig.json","packages/docs/typedoc.json","packages/vue-apollo-components/README.md","packages/vue-apollo-composable/README.md",".cursorrules (react-graphql-apollo-client-cursorrules-prompt-file.mdc)"],"skills":{"packages/docs/advanced/lazy-queries.md":"# Lazy Queries\n\n[`useLazyQuery`](/api/composable/functions/useLazyQuery) is for queries where the variables are not known up front. Reach for it when a query should run in response to a user action (search submit, button click, modal open) rather than automatically on mount.\n\n:::: components-api\n::: warning Composition API only\nThere is no `<ApolloLazyQuery>`.\n:::\n::::\n\n## When to use lazy vs enabled\n\n| Situation | Tool |\n|-----------|------|\n| Variables come from a user action (search box submit, button click) | `useLazyQuery` |\n| Variables are known but you want to gate execution on a condition | `useQuery({ enabled })` |\n| Variables are known and the query should run on mount | `useQuery` |\n\n`useLazyQuery` starts disabled. It exposes a `load(variables?)` function that you call when ready. After the first `load`, the query behaves like a normal `useQuery`: variables become reactive, results update, and the query stops when the scope is disposed.\n\n## Basic usage\n\n```vue\n<script setup lang=\"ts\">\nconst SEARCH_USERS: TypedDocumentNode<{ users: { id: string, name: string }[] }, { term: string }>\n  = gql`\n    query SearchUsers($term: String!) {\n      users(search: $term) {\n        id\n        name\n      }\n    }\n  `\n\nconst term = ref('')\nconst { load, current } = useLazyQuery(SEARCH_USERS)\n\nasync function search() {\n  const result = await load({ term: term.value })\n  console.log('Found users:', result?.users)\n}\n</script>\n\n<template>\n  <form @submit.prevent=\"search\">\n    <input v-model=\"term\">\n    <button>Search</button>\n  </form>\n\n  <div v-if=\"current.loading\">\n    Searching...\n  </div>\n  <ul v-else-if=\"current.resultState === 'complete'\">\n    <li v-for=\"user in current.result.users\" :key=\"user.id\">\n      {{ user.name }}\n    </li>\n  </ul>\n</template>\n```\n\n`load(variables?)`:\n\n- Sets the variables for the query (merged with any variables already in options).\n- Starts the query.\n- Returns a promise that resolves with the result data when the query completes, or rejects with the error.\n\nThe result also lands in `current.result` and the individual refs (`result`, `loading`, `error`) just like `useQuery`.\n\n## Loading multiple times\n\nCalling `load` again with different variables re-runs the query:\n\n```ts\nconst { load } = useLazyQuery(SEARCH_USERS)\n\nawait load({ term: 'alice' }) // First search\nawait load({ term: 'bob' }) // New search\n```\n\nEach call merges new variables on top of the previously-loaded ones.\n\n## Options\n\n`useLazyQuery` accepts the same options as `useQuery` (variables, fetch policies, error handling, etc.), except `enabled` is not applicable (the query is always lazy until `load` is called).\n\nYou can still set reactive `variables` in options, which acts as the default for `load`:\n\n```ts\nconst term = ref('')\nconst limit = ref(10)\n\nconst { load } = useLazyQuery(SEARCH_USERS, {\n  variables: { term, limit },\n})\n\n// Uses the reactive variables from options\nasync function search() {\n  await load()\n}\n\n// Or override on the call\nasync function searchOne() {\n  await load({ term: term.value, limit: 1 })\n}\n```\n\nAfter the first `load`, changes to the reactive variables trigger re-execution like any normal `useQuery`.\n\n## Awaiting the result\n\n`load` returns a promise so you can use the result inline:\n\n```ts\nasync function fetchUser(id: string) {\n  try {\n    const data = await load({ id })\n    if (data) {\n      console.log('Loaded:', data.user)\n    }\n  }\n  catch (e) {\n    console.error('Failed to load:', e)\n  }\n}\n```\n\nThe promise resolves with the query data when the result is complete. If the query errors, it rejects with the error. The reactive refs (`current`, `result`, `error`) update either way.\n\n## Lazy queries during SSR\n\n`useLazyQuery` does not run on the server because there is no user action to trigger it. If a value needs to be available during SSR, use `useQuery` instead. See [SSR Overview](/ssr/overview).\n\n## Options and result reference\n\nFor every available option and method, see:\n\n- [`useLazyQuery.Options`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options)\n- [`useLazyQuery.Result`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result)\n\n## Next steps\n\n- [Queries](/data/queries) for the basic `useQuery` patterns.\n- [Refetching](/data/refetching) compares lazy loading with refetch and poll.\n- [Loading States](/advanced/loading-states) handles loading indicators across many queries.\n","packages/docs/advanced/loading-states.md":"# Loading States\n\nEvery operation exposes its own `loading` state, but real apps often want to combine them: a single indicator for the whole page, an app-wide loading bar, a \"saving\" toast that tracks every mutation. Vue Apollo ships six composables for aggregating loading state across multiple operations.\n\n| Scope | Queries | Mutations | Subscriptions |\n|-------|---------|-----------|---------------|\n| Current effect scope (usually a component) | `useQueryLoading` | `useMutationLoading` | `useSubscriptionLoading` |\n| Whole app | `useGlobalQueryLoading` | `useGlobalMutationLoading` | `useGlobalSubscriptionLoading` |\n\nThe per-scope composables track every `useQuery`/`useMutation`/`useSubscription` called within the current Vue effect scope (typically the component that calls them, plus anything they call recursively). The global composables track every operation in the entire app.\n\n:::: components-api\n::: warning Components have their own scope\n`<ApolloQuery>` runs its `useQuery` inside its *own* component instance, so a\n`useQueryLoading()` in the surrounding `<script setup>` will never see it. Reach for the\n**global** composables when the operations are declared as elements, or for the `loading`\nslot prop when you only care about one of them.\n\nEverything on this page is written in the composables because these six *are* composables:\nthere is no component form of an aggregate counter. They work the same in a file that\notherwise uses only components.\n:::\n::::\n\n## Per-scope loading\n\n```vue\n<script setup lang=\"ts\">\nconst { current: users } = useQuery(GET_USERS)\nconst { current: posts } = useQuery(GET_POSTS)\n\n// True while any query in this component is loading\nconst loading = useQueryLoading()\n</script>\n\n<template>\n  <div v-if=\"loading\">\n    Loading...\n  </div>\n  <div v-else>\n    <!-- Render data -->\n  </div>\n</template>\n```\n\n`useQueryLoading` returns a computed ref that is `true` while at least one query in the current scope is in flight. It is reactive: as queries finish, the ref flips back to `false`.\n\nUse the same shape for mutations and subscriptions:\n\n```ts\nconst { mutate: updateUser } = useMutation(UPDATE_USER)\nconst saving = useMutationLoading()\n```\n\nPer-scope tracking is automatically scoped to the component that calls these composables. The same composable in a sibling component does not affect this scope.\n\n## Global loading\n\n`useGlobalQueryLoading`, `useGlobalMutationLoading`, and `useGlobalSubscriptionLoading` track every operation in the entire app. Useful for app-shell loading indicators:\n\n```vue\n<script setup lang=\"ts\">\nimport { useGlobalQueryLoading } from '@vue/apollo-composable'\n\nconst loading = useGlobalQueryLoading()\n</script>\n\n<template>\n  <header>\n    <div v-if=\"loading\" class=\"loading-bar\" />\n  </header>\n  <main>\n    <slot />\n  </main>\n</template>\n```\n\nUnlike the per-scope variants, the global composables can be called anywhere, including outside a component setup.\n\n## Restrictions\n\n- The per-scope composables must be called inside an effect scope (typically a `<script setup>` block, a Vue plugin, or anywhere `getCurrentScope()` returns a scope). They throw outside.\n- The global composables have no such restriction.\n\n## When to choose which\n\n| Goal | Composable |\n|------|------------|\n| Loading indicator for a specific component or section | Per-scope: `useQueryLoading`, etc. |\n| App-wide top loading bar | Global: `useGlobalQueryLoading` |\n| Disable a button while a specific mutation is in flight | The `loading` of that mutation alone |\n| Combine queries and mutations into one indicator | Two refs, combined with `computed(() => queries.value || saving.value)` |\n\nFor the \"indicator for one specific operation\" case, do not reach for these composables.\n\n:::: composition-api\nUse the `loading` ref the original composable returned:\n\n```ts\nconst { mutate: save, loading } = useMutation(SAVE)\n// `loading` is true while this specific save is running\n```\n::::\n\n:::: components-api\nUse the `loading` slot prop, which is scoped to that one element:\n\n```vue-html\n<ApolloMutation v-slot=\"{ mutate, loading }\" :mutation=\"Save\" @error=\"console.error\">\n  <button :disabled=\"loading\" @click=\"mutate()\">\n    Save\n  </button>\n</ApolloMutation>\n```\n::::\n\n## Combining categories\n\nWant a single indicator that flips on while any operation is running? Compose them:\n\n```ts\nconst queries = useGlobalQueryLoading()\nconst mutations = useGlobalMutationLoading()\nconst subscriptions = useGlobalSubscriptionLoading()\n\nconst anyLoading = computed(\n  () => queries.value || mutations.value || subscriptions.value,\n)\n```\n\n## SSR\n\nThe global composables avoid cross-request contamination during SSR. You can safely use them in components that render on the server.\n\nThe per-scope composables are also SSR-safe, but the counters are scoped to the current request's effect scope.\n\n## Next steps\n\n- [Queries](/data/queries) for the `loading` ref on individual `useQuery` calls.\n- [Mutations](/data/mutations) for the `loading` ref on `useMutation`.\n- [Suspense](/data/suspense) for a different approach to coarse-grained loading.\n","packages/docs/advanced/multiple-clients.md":"# Multiple Clients\n\nVue Apollo supports multiple `ApolloClient` instances in the same app. The canonical use case is talking to different backends: a primary GraphQL API and an analytics service, each with its own schema, endpoint, and link chain.\n\nThis page covers the recommended pattern: provide a dictionary of named clients, then pick the right one per call with the `clientId` option.\n\n## Setting up named clients\n\nCreate each client as you would a single client. Provide them as a dictionary through the `ApolloClients` injection key:\n\n```ts\n// src/apollo.ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\n\nexport const mainClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n\nexport const analyticsClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://analytics.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n```\n\n```ts\n// src/main.ts\nimport { ApolloClients } from '@vue/apollo-composable'\nimport { createApp } from 'vue'\nimport { analyticsClient, mainClient } from './apollo'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.provide(ApolloClients, {\n  default: mainClient,\n  analytics: analyticsClient,\n})\napp.mount('#app')\n```\n\nThe dictionary must contain a `default` entry. That is the client used when no `clientId` is specified.\n\n## Using a specific client\n\n:::: composition-api\nPass `clientId` in the composable options:\n\n```vue\n<script setup lang=\"ts\">\nconst PAGE_VIEWS: TypedDocumentNode<{ pageViews: number }, {}>\n  = gql`\n    query PageViews {\n      pageViews\n    }\n  `\n\nconst { current } = useQuery(PAGE_VIEWS, {\n  clientId: 'analytics',\n})\n</script>\n```\n\nThe same option works on [`useMutation`](/data/mutations), [`useSubscription`](/data/subscriptions), [`useLazyQuery`](/advanced/lazy-queries), and [`useFragment`](/data/fragments).\n::::\n\n:::: components-api\nSet the `clientId` prop:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery :query=\"PageViews\" clientId=\"analytics\">\n    <template #data=\"{ data }\">\n      {{ data.pageViews }} views\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n[`<ApolloMutation>`](/api/components/ApolloMutation),\n[`<ApolloSubscription>`](/api/components/ApolloSubscription) and\n[`<ApolloFragment>`](/api/components/ApolloFragment) take the same prop.\n[`<ApolloSubscribeToMore>`](/api/components/ApolloSubscribeToMore) always uses whichever\nclient its enclosing `<ApolloQuery>` picked.\n\nBecause the prop is a normal binding, a client can be chosen per element without any of the\nplumbing a composable would need:\n\n```vue-html\n<ApolloQuery :query=\"PageViews\" :clientId=\"isPreview ? 'staging' : 'default'\">\n```\n::::\n\n## Resolving clients imperatively\n\nFor code that runs outside a composable call (event handlers, stores, route guards), use `useApolloClient` to resolve a client by id:\n\n```ts\nimport { useApolloClient } from '@vue/apollo-composable'\n\nconst { resolveClient } = useApolloClient()\n\nconst analytics = resolveClient('analytics')\n\nawait analytics.mutate({\n  mutation: TRACK_EVENT,\n  variables: { event: 'page_view' },\n})\n```\n\n`resolveClient()` with no argument returns the default client.\n\n:::: components-api\nThis is for code, not templates. An element that already picks its client with `clientId`\nnever needs to resolve one by hand, so reach for `useApolloClient` only where the call\nhappens outside the template: a store action, a route guard, an event handler that talks to\nthe client directly.\n::::\n\n## Switching clients reactively\n\n`clientId` is read each time the underlying observable is created. You can vary it based on a ref to switch clients at runtime, but the query is re-created whenever it changes, which means the previous result is lost and a new fetch starts.\n\n:::: composition-api\n```ts\nconst env = ref<'default' | 'staging'>('default')\n\nconst { current } = useQuery(QUERY, () => ({\n  clientId: env.value,\n}))\n```\n::::\n\n:::: components-api\n```vue-html\n<ApolloQuery :query=\"Query\" :clientId=\"env\">\n```\n::::\n\nThis is fine for occasional switches (an admin tool toggling between staging and prod). For per-feature splits, prefer setting `clientId` once per component or per query, not reactively.\n\n## Mixing with `provideApolloClient` / `provideApolloClients`\n\nFor non-component contexts (Vue Router guards, top-level scripts), use [`provideApolloClients`](/advanced/outside-components) to make named clients available the same way:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\n\nconst cleanup = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})\n\nconst result = cleanup(() => {\n  // useQuery calls in here can use clientId\n  // ...\n})\n```\n\nSee [Outside Components](/advanced/outside-components) for the full pattern.\n\n:::: components-api\n::: warning Composition API only\n`provideApolloClients` exists to give composables an injection context they would otherwise\nlack. Components run inside a template, so they always have one and resolve `clientId`\nagainst the `ApolloClients` map the app provided.\n:::\n::::\n\n## When to reach for multiple clients\n\n| Situation | Pattern |\n|-----------|---------|\n| One API, different auth states (anonymous vs logged in) | One client, set auth headers per request through context |\n| One API, different cache policies in different parts of the app | One client, vary fetch policies per query |\n| Separate backends with their own schemas | Multiple clients |\n| Same backend, different versions or federated subgraphs reached separately | Multiple clients |\n\nMultiple clients have real costs: each has its own cache, so queries against one cannot see updates to the other. If two parts of your app talk to the same entities, keep them on one client.\n\n## Next steps\n\n- [Outside Components](/advanced/outside-components) covers `provideApolloClient` / `provideApolloClients`.\n- [Authentication](/networking/authentication) for per-request auth that does not need a separate client.\n- The [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the full resolution API.\n","packages/docs/advanced/outside-components.md":"# Outside Components\n\nVue Apollo's composables rely on Vue's injection system to find the Apollo client. Inside a component's `<script setup>` (or any code that runs in a component's effect scope) the client is found through `inject(DefaultApolloClient)` automatically.\n\nOutside of that context, `useQuery` and friends have no way to resolve a client. [`provideApolloClient`](/api/composable/functions/provideApolloClient) and [`provideApolloClients`](/api/composable/functions/provideApolloClients) bridge that gap for the duration of a callback.\n\n:::: components-api\n::: warning Composition API only\nThis page is about calling composables outside a component setup: Pinia stores, route\nguards, plain modules. Components only exist inside a template, so they always have the\ninjection context and never need this.\n\nUse the `clientId` prop to pick a non-default client from a template; see\n[Multiple Clients](/advanced/multiple-clients).\n:::\n::::\n\n## When you need this\n\nYou need `provideApolloClient` when calling Vue Apollo composables from code that is **not** a component setup:\n\n- Vue Router navigation guards (`beforeEach`, `beforeEnter`).\n- Standalone scripts, utility functions, or workers.\n- Test setup code that runs outside of `mount()`.\n\nYou generally do **not** need it for:\n\n- Pinia stores. Call `useSomeStore()` from inside a component setup. The store can then use `useQuery`/`useMutation` directly because injection has already been resolved.\n- Composables called from inside a component. Injection works through nested composables.\n- Watch callbacks inside components. The component's effect scope is still active.\n\n## The pattern\n\n`provideApolloClient(client)` returns a function that runs your callback with the client available:\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nconst result = provideApolloClient(apolloClient)(() => {\n  return useQuery(gql`\n    query Me {\n      me { id name }\n    }\n  `)\n})\n```\n\n## Vue Router guards\n\nThe canonical use case: a route guard that prefetches data before navigation.\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { createRouter } from 'vue-router'\nimport { apolloClient } from './apollo'\n\nconst router = createRouter({\n  // ...routes\n})\n\nrouter.beforeEach(async (to) => {\n  if (to.meta.requiresAuth) {\n    const { current, onResult, onError } = provideApolloClient(apolloClient)(() => {\n      return useQuery(gql`\n        query CurrentUser {\n          me { id role }\n        }\n      `, {\n        fetchPolicy: 'cache-first',\n      })\n    })\n\n    // Wait for the query to complete\n    await new Promise<void>((resolve) => {\n      onResult(() => resolve())\n      onError(() => resolve())\n    })\n\n    if (!current.value.result?.me) {\n      return '/login'\n    }\n  }\n})\n```\n\n::: warning Cleanup matters\nGuards run outside any component's lifecycle, so the query has no scope to clean up against. If you start a long-running query (especially with `pollInterval` or a non-default `fetchPolicy`), it will leak.\n\nFor one-shot lookups, prefer `client.query()` directly:\n\n```ts\nconst { data } = await apolloClient.query({\n  query: CURRENT_USER,\n  fetchPolicy: 'cache-first',\n})\n```\n\n`client.query` does not subscribe and has nothing to leak. Reach for `provideApolloClient` + `useQuery` only when you need the reactive `current` ref, or when you specifically want the cache-update behavior.\n:::\n\n## Standalone helpers\n\nFor utility functions outside any Vue context (CLI tools, server scripts, workers):\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nexport function getUserOnce(id: string) {\n  return provideApolloClient(apolloClient)(() => {\n    const { onResult, onError } = useQuery(gql`\n      query User($id: ID!) {\n        user(id: $id) { id name }\n      }\n    `, {\n      variables: { id },\n    })\n\n    return new Promise<any>((resolve, reject) => {\n      onResult(data => resolve(data))\n      onError(reject)\n    })\n  })\n}\n```\n\nFor most one-off queries, `apolloClient.query(...)` directly is simpler.\n\n## Multiple clients\n\n`provideApolloClients` is the dictionary variant:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\nimport { analyticsClient, mainClient } from './apollo'\n\nprovideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  // useQuery, useMutation, etc. can resolve by clientId in here\n})\n```\n\nSee [Multiple Clients](/advanced/multiple-clients) for the full pattern.\n\n## How it works\n\n`provideApolloClient` writes the client into a module-level variable, runs your callback, then clears it. Vue Apollo's `useApolloClient` checks Vue's injection first; if there is no injection context (because you are not in a component), it falls back to the module-level variable.\n\nThis means:\n\n- The client only lives for the duration of the callback.\n- Nested calls work: if you call `provideApolloClient` inside `provideApolloClient`, the inner call wins until its callback returns.\n- It is not thread-safe across concurrent async work, because module state is shared. Do not start two independent `provideApolloClient` blocks in parallel; chain them or use a single block.\n\n## Next steps\n\n- [Multiple Clients](/advanced/multiple-clients) for the named-clients pattern.\n- [SSR Overview](/ssr/overview) for the SSR equivalent (cache extract/restore on the server).\n- [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the resolution API.\n","packages/docs/advanced/streaming.md":"# Streaming & @defer\n\nThe `@defer` and `@stream` directives let a GraphQL server deliver a single response in multiple chunks. The client renders the first chunk immediately and updates as later chunks arrive.\n\nVue Apollo surfaces this through the `current.resultState` discriminator: while data is arriving, `resultState` is `'streaming'`; when the server finishes, it becomes `'complete'`.\n\n## When to use streaming\n\n`@defer` is useful when a query has fast and slow fields and you want to render the fast ones first:\n\n```graphql\nquery Profile($id: ID!) {\n  user(id: $id) {\n    id\n    name        # Fast: from the user table\n    ... @defer {\n      activity  # Slow: aggregates from other services\n    }\n  }\n}\n```\n\nThe browser receives `name` immediately and `activity` when it is ready. Without `@defer`, the whole query is held until every field resolves.\n\n`@stream` works the same way for lists: items arrive incrementally instead of all at once.\n\n## Configuring the client\n\n`@defer` and `@stream` need an incremental delivery handler on your Apollo Client instance. Without one, using either directive throws an error.\n\n```ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\nimport { Defer20220824Handler } from '@apollo/client/incremental'\n\nconst apolloClient = new ApolloClient({\n  cache: new InMemoryCache(),\n  link: new HttpLink({ uri: '/graphql' }),\n  incrementalHandler: new Defer20220824Handler(),\n})\n```\n\nApollo Client ships several handlers, each implementing a different incremental delivery protocol:\n\n| Handler | Protocol |\n|---------|----------|\n| `Defer20220824Handler` | Used by Apollo Router and earlier `graphql-yoga` versions |\n| `GraphQL17Alpha2Handler` | Alias for `Defer20220824Handler` |\n| `GraphQL17Alpha9Handler` | Newer `graphql` 17 alpha format |\n| `NotImplementedHandler` | Default; throws on `@defer`/`@stream` |\n\nPick the one your server supports. See [Apollo's @defer docs](https://www.apollographql.com/docs/react/data/defer) for protocol details.\n\n## Reading a streaming query\n\n:::: composition-api\n```vue\n<script setup lang=\"ts\">\nconst PROFILE: TypedDocumentNode<{ user: { id: string, name: string, activity?: Array<{ id: string, kind: string }> } }, { id: string }>\n  = gql`\n    query Profile($id: ID!) {\n      user(id: $id) {\n        id\n        name\n        ... @defer {\n          activity {\n            id\n            kind\n          }\n        }\n      }\n    }\n  `\n\nconst { current } = useQuery(PROFILE, { variables: { id: '1' } })\n</script>\n\n<template>\n  <div v-if=\"current.resultState === 'empty'\">\n    Loading...\n  </div>\n\n  <div v-else>\n    <!-- `name` is available as soon as the first chunk arrives -->\n    <h1>{{ current.result?.user.name }}</h1>\n\n    <!-- `activity` is available once the deferred chunk arrives -->\n    <div v-if=\"current.result?.user.activity\">\n      <h2>Recent activity</h2>\n      <ul>\n        <li v-for=\"entry in current.result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </div>\n    <div v-else>\n      Loading activity...\n    </div>\n  </div>\n</template>\n```\n::::\n\n:::: components-api\n`#data` renders from the first chunk onwards, so the non-deferred fields appear immediately\nand the deferred ones fill in underneath as they land:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery\n    :query=\"gql`\n      query Profile($id: ID!) {\n        user(id: $id) {\n          id\n          name\n          ... @defer {\n            activity {\n              id\n              kind\n            }\n          }\n        }\n      }\n    `\"\n    :variables=\"{ id: '1' }\"\n  >\n    <template #loading>\n      Loading...\n    </template>\n    <template #data=\"{ data }\">\n      <!-- `name` is available as soon as the first chunk arrives -->\n      <h1>{{ data.user.name }}</h1>\n\n      <!-- `activity` is available once the deferred chunk arrives -->\n      <div v-if=\"data.user.activity\">\n        <h2>Recent activity</h2>\n        <ul>\n          <li v-for=\"entry in data.user.activity\" :key=\"entry.id\">\n            {{ entry.kind }}\n          </li>\n        </ul>\n      </div>\n      <div v-else>\n        Loading activity...\n      </div>\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n`#loading` covers only the gap before the first chunk. From there `#data` stays mounted\nfor the rest of the stream.\n\nListen for `@streamingResult` if you want each chunk imperatively, and use the default\nslot when you need `resultState` itself to tell `'streaming'` from `'complete'`.\n::::\n\nThe `resultState` lifecycle for a `@defer` query:\n\n1. `'empty'` while no data has arrived.\n2. `'streaming'` after the first chunk lands. `current.result` contains the non-deferred fields. Deferred fields are still `undefined`.\n3. `'streaming'` continues to fire as more deferred chunks arrive. Fields appear as their chunks land.\n4. `'complete'` once the server signals the response is finished. All fields are populated.\n\n`loading` stays `true` through `streaming` and only becomes `false` at `complete`. `networkStatus` transitions from `loading` to `streaming` to `ready`.\n\n## Type narrowing for streaming\n\nBecause deferred fields may be absent during `streaming`, their TypeScript types should reflect that. With GraphQL Codegen, this happens automatically through the `Incremental` / `Streaming` type helpers. With manual `TypedDocumentNode`, mark deferred fields as optional in your `TData` type.\n\n:::: composition-api\nInside your component:\n\n```ts\nif (current.value.resultState === 'streaming' || current.value.resultState === 'complete') {\n  // current.value.result is defined\n  console.log(current.value.result.user.name)\n}\n```\n\nOr be more specific:\n\n```ts\nif (current.value.resultState === 'complete') {\n  // All fields, including deferred ones, are present\n  console.log(current.value.result.user.activity)\n}\n```\n::::\n\n:::: components-api\nThe default slot hands you the same discriminated union, so `resultState` narrows `result`\nin the template exactly as it does in script. See\n[Two ways to read the result](/data/queries#two-ways-to-read-the-result) for how the two\nrendering modes differ:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery v-slot=\"{ result, resultState }\" :query=\"Profile\" :variables=\"{ id: '1' }\">\n    <template v-if=\"resultState === 'streaming' || resultState === 'complete'\">\n      <!-- Non-deferred fields are there from the first chunk -->\n      <h1>{{ result.user.name }}</h1>\n\n      <!-- Deferred fields are only guaranteed once the state reaches `complete` -->\n      <ul v-if=\"resultState === 'complete' && result.user.activity\">\n        <li v-for=\"entry in result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </template>\n  </ApolloQuery>\n</template>\n```\n::::\n\n## Combining with Suspense\n\nBy default, `await useQuery()` resolves as soon as the first chunk lands. The component renders with partial data, then re-renders as more arrives.\n\nIf you want Suspense to wait for the entire stream to complete (so the first render has all the data), set `awaitComplete: true`:\n\n```vue\n<script setup lang=\"ts\">\nimport { gql } from '@apollo/client'\nimport { useQuery } from '@vue/apollo-composable'\n\nconst { current } = await useQuery(PROFILE_QUERY, {\n  variables: { id: '1' },\n  awaitComplete: true, // Wait for `resultState === 'complete'`\n})\n</script>\n```\n\nUse this carefully: it negates the latency benefit of `@defer`. Most of the time, you want the default (render fast, fill in slow) and only opt into `awaitComplete` for screens where partial data would be misleading.\n\n:::: components-api\n`awaitComplete` reaches the component through `options`, and it still governs SSR prefetch\nthere, so the server waits for the whole response before rendering:\n\n```vue-html\n<ApolloQuery :query=\"GetProfile\" :options=\"{ awaitComplete: true }\">\n```\n\nOn the client it has nothing to act on, because `<ApolloQuery>` cannot suspend. The slots\nrender as chunks land either way. See [Suspense](/data/suspense) for why.\n::::\n\n## Refetching a streaming query\n\nRefetching a `@defer` query goes through the streaming lifecycle again. The previous `result` stays available while the new response streams in. `networkStatus` reports `refetch` initially, then `streaming`, then `ready`.\n\nSee [Apollo's data merging tables](https://www.apollographql.com/docs/react/data/defer#loading-networkstatus-datastate-and-data-merging) for the exact transitions during refetch.\n\n## `@stream` for lists\n\n`@stream` works on list fields:\n\n```graphql\nquery Alphabet {\n  letters @stream(initialCount: 0)\n}\n```\n\n:::: composition-api\nThe server can send letters one by one. `current.result.letters` grows as items arrive:\n\n```ts\nconst { current } = useQuery(ALPHABET)\n\nwatch(() => current.value.result?.letters, (letters) => {\n  console.log(letters) // ['a'], ['a', 'b'], ['a', 'b', 'c'], ...\n})\n```\n::::\n\n:::: components-api\nThe list grows in place, so a `v-for` inside `#data` simply re-renders as each chunk lands.\n::::\n\n`@stream` shares the same `resultState` transitions as `@defer`.\n\n## Next steps\n\n- [Suspense](/data/suspense) covers `awaitComplete` and the SSR interaction.\n- [Queries](/data/queries) covers the basics of `useQuery` and `resultState`.\n- Apollo's [@defer reference](https://www.apollographql.com/docs/react/data/defer) covers the full protocol.\n","packages/docs/api/components/ApolloFragment.md":"# ApolloFragment\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `fragment` *(required)* | `DocumentNode \\| TypedDocumentNode<TData, TVariables>` | &nbsp; | A GraphQL fragment document. |\n| `from` *(required)* | `NonNullable<useFragment.FromValue<TData>>` | &nbsp; | Cache identifiable entity to read the fragment from.<br><br>Accepts a masked object from a parent query, a `{ __ref }` reference, or a cache ID string. |\n| `fragmentName` | `string \\| undefined` | &nbsp; | Name of the fragment to use, when the document declares more than one. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables used when reading the fragment. |\n| `optimistic` | `boolean \\| undefined` | &nbsp; | Read from optimistic cache data. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useFragment.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useFragment` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `nextState` | `[state: RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` has every field.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n\n### `#incomplete`\n\nShown while fields are still missing from the cache. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `DeepPartial<TData>` |\n| `missing` | `MissingTree \\| undefined` |\n\n### `#default`\n\nRaw mode. Receives the flattened fragment state.\n\nRendered in both modes, so nested children still mount.\n\nReceives `RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">`.\n\n## Exposed\n\nA template ref receives the full [`useFragment.Result`](/api/composable/@vue/namespaces/useFragment/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloFragment ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/ApolloMutation.md":"# ApolloMutation\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `mutation` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The mutation document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables applied to every call, unless overridden in `mutate()`. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useMutation.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useMutation` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n| `done` | `[result: ApolloClient.MutateResult<MaybeMasked<TData>>]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `mutate` | `useMutation.MutateFunction<TData, TVariables>` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `called` | `boolean` |\n| `result` | `TData \\| null \\| undefined` |\n| `reset` | `() => void` |\n\n## Exposed\n\nA template ref receives the full [`useMutation.Result`](/api/composable/@vue/namespaces/useMutation/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloMutation ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/ApolloQuery.md":"# ApolloQuery\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `query` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The query document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the query. |\n| `disabled` | `boolean \\| undefined` | `false` | Skip execution until a condition is met. |\n| `fetchPolicy` | `useQuery.Options<TData, TVariables>[\"fetchPolicy\"] \\| undefined` | &nbsp; | How the query reads from and writes to the cache. |\n| `pollInterval` | `number \\| undefined` | &nbsp; | Refetch every N milliseconds. |\n| `debounce` | `number \\| undefined` | &nbsp; | Delay variable updates (ms). `loading` covers the window. |\n| `throttle` | `number \\| undefined` | &nbsp; | Throttle variable updates (ms). `loading` covers the window. |\n| `keepPreviousResult` | `boolean \\| undefined` | &nbsp; | Keep the previous result on screen while new variables are in flight.<br><br>Off by default, as in `useQuery`. Opt in for search and pagination, where clearing the list on every change flickers. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `empty` | `((data: TData) => boolean) \\| undefined` | &nbsp; | Decides whether a result counts as empty, selecting the `#empty` slot.<br><br>Without it `#empty` is never used, so `#data` handles the empty case itself. |\n| `options` | `useQuery.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useQuery` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `completeResult` | `[data: TData]` |\n| `partialResult` | `[data: TData]` |\n| `streamingResult` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `nextState` | `[state: useQuery.Current<TData, \"empty\" \\| \"complete\" \\| \"streaming\" \\| \"partial\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` is never undefined.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n| `error` | `ErrorLike \\| undefined` |\n| `isPreviousResult` | `boolean` |\n| `loading` | `boolean` |\n| `pending` | `boolean` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n| `fetchMore` | `<TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(options: ObservableQuery.FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<RenameKey<ApolloClient.QueryResult<TFetchData>, \"data\", \"result\">> \\| undefined` |\n\n### `#loading`\n\nShown while the first result is loading. Opinionated mode only.\n\nNo slot props.\n\n### `#error`\n\nShown when the query failed and there is nothing to display. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `error` | `ErrorLike` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n\n### `#empty`\n\nShown when the `empty` prop returns `true`, and as the last branch when the query\nsettles with nothing to show. Without the `empty` prop, `#data` owns the empty result.\n\nNo slot props.\n\n### `#default`\n\nRaw mode. Receives the flattened query state and its methods.\n\nRendered in both modes, so nested renderless children still mount.\n\nReceives `useQuery.Current<MaybeMasked<TData>> & Pick<Query, 'refetch' \\| 'fetchMore' \\| 'updateQuery' \\| 'subscribeToMore' \\| 'start' \\| 'stop' \\| 'restart'>`.\n\nEvery field of [`useQuery.Current`](/api/composable/@vue/namespaces/useQuery/interfaces/Current) is present, so `resultState` narrows `result` here exactly as it does in script.\n\n## Exposed\n\nA template ref receives the full [`useQuery.Result`](/api/composable/@vue/namespaces/useQuery/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloQuery ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/ApolloSubscribeToMore.md":"# ApolloSubscribeToMore\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `document` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `updateQuery` | `SubscribeToMoreUpdateQueryFn<any, any, TData> \\| undefined` | &nbsp; | Merges incoming subscription data into the parent query's result. |\n| `context` | `DefaultContext \\| undefined` | &nbsp; | Context passed to the link chain for this subscription. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n","packages/docs/api/components/ApolloSubscription.md":"# ApolloSubscription\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `subscription` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `disabled` | `boolean \\| undefined` | `false` | Stop the subscription. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useSubscription.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useSubscription` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `complete` | `[]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `result` | `TData \\| undefined` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `start` | `() => void` |\n| `stop` | `() => void` |\n| `restart` | `() => Promise<void>` |\n\n## Exposed\n\nA template ref receives the full [`useSubscription.Result`](/api/composable/@vue/namespaces/useSubscription/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloSubscription ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/index.md":"# Components API\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n- [ApolloQuery](./ApolloQuery)\n- [ApolloMutation](./ApolloMutation)\n- [ApolloSubscription](./ApolloSubscription)\n- [ApolloSubscribeToMore](./ApolloSubscribeToMore)\n- [ApolloFragment](./ApolloFragment)\n","packages/docs/api/composable/@vue/namespaces/provideApolloClient/index.md":"[@vue/apollo-composable](../../../index.md) / provideApolloClient\n\n# provideApolloClient\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n","packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Callback.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Result.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/provideApolloClients/index.md":"[@vue/apollo-composable](../../../index.md) / provideApolloClients\n\n# provideApolloClients\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n","packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Callback.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Result.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/useApolloClient/index.md":"[@vue/apollo-composable](../../../index.md) / useApolloClient\n\n# useApolloClient\n\n## Interfaces\n\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useApolloClient/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useApolloClient](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useApolloClient.\n\n## Properties\n\n### client\n\n> `readonly` **client**: [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance.\n\n***\n\n### resolveClient()\n\n> **resolveClient**: (`clientId?`) => [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nResolves an ApolloClient by ID.\n\n#### Parameters\n\n##### clientId?\n\n`string`\n\nThe client ID to resolve. If omitted, resolves the default client.\n\n#### Returns\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\n","packages/docs/api/composable/@vue/namespaces/useFragment/index.md":"[@vue/apollo-composable](../../../index.md) / useFragment\n\n# useFragment\n\n## Type Aliases\n\n- [FromValue](type-aliases/FromValue.md)\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Current.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Current\n\n# Interface: Current\n\nCurrent state\n\n## 1. Operation data\n\n### complete\n\n> **complete**: `boolean`\n\nWhether the fragment data is complete.\n\n***\n\n### missing?\n\n> `optional` **missing**: `MissingTree`\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: `object` \\| `object`[]\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"`\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Options\n\n# Interface: Options\n\nOptions for useFragment.\n\n## 1. Fragment\n\n### fragment\n\n> **fragment**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`DocumentNode`\\>\n\nA GraphQL fragment document.\n\n***\n\n### fragmentName?\n\n> `optional` **fragmentName**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`string`\\>\n\nName of the fragment to use if document contains multiple fragments.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\\>\n\nVariables for the fragment.\n\n## 2. Data Source\n\n### from\n\n> **from**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`FromValue`](../type-aliases/FromValue.md) \\| [`FromValue`](../type-aliases/FromValue.md)[]\\>\n\nCache identifiable entity to read the fragment from.\n\n## 3. Configuration\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use.\n\n***\n\n### optimistic?\n\n> `optional` **optimistic**: `boolean`\n\nRead from optimistic cache data.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useFragment.\n\n## 1. Operation data\n\n### complete\n\n> **complete**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nWhether the fragment data is complete.\n\n***\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### missing\n\n> **missing**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`MissingTree`\\>\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `object`[]\\>\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`\"complete\"` \\| `\"partial\"`\\>\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n\n## 2. Events\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when fragment data changes.\n","packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/FromValue.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / FromValue\n\n# Type Alias: FromValue\n\n> **FromValue** = `object` \\| `string` \\| `null`\n\nCache identifier: object with `__typename`/`id`, `{ __ref }` reference, or string ID.\n","packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseFragment({ fragment, from, variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseFragment({ fragment, from, variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseFragment({ fragment, from, variables: () => ({ id }) })\n```\n","packages/docs/api/composable/@vue/namespaces/useLazyQuery/index.md":"[@vue/apollo-composable](../../../index.md) / useLazyQuery\n\n# useLazyQuery\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useLazyQuery - same as useQuery but `enabled` is not applicable.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../../useQuery/type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n","packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useLazyQuery - extends useQuery.Result with `load` function.\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](../../useQuery/interfaces/Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### load()\n\n> **load**: (`variables?`) => `Promise`\\<`object` \\| `undefined`\\>\n\nLoad the query. Starts the query if not already started.\n\nUnlike `useQuery`, which executes immediately, `useLazyQuery` waits until `load()` is called. After loading, the query behaves like a normal `useQuery`.\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this load. If provided, these will be merged with any variables from options.\n\n#### Returns\n\n`Promise`\\<`object` \\| `undefined`\\>\n\nPromise resolving to the query result data when complete.\n\n#### Example\n\n```ts\nconst { load, result, loading } = useLazyQuery(GetUser)\n\n// Query doesn't execute until load() is called\nasync function fetchUser(id: string) {\n  const data = await load({ id })\n  console.log('User loaded:', data)\n}\n```\n\n***\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](../../useQuery/interfaces/FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](../../useQuery/interfaces/SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n\n","packages/docs/api/composable/@vue/namespaces/useMutation/index.md":"[@vue/apollo-composable](../../../index.md) / useMutation\n\n# useMutation\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [MutateOptions](interfaces/MutateOptions.md)\n- [MutateResult](interfaces/MutateResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateOptions.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateOptions\n\n# Interface: MutateOptions\n\nOptions when calling the mutate function.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nVariables for this mutation call.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext` \\| (`composableContext`) => `DefaultContext`\n\nContext can be a callback or object.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateResult.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateResult\n\n# Interface: MutateResult\n\nMutation result returned from mutate().\n\n## Properties\n\n### data\n\n> **data**: `object` \\| `undefined`\n\nThe mutation result data.\n\n***\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nError if mutation failed.\n\n***\n\n### extensions?\n\n> `optional` **extensions**: `Record`\\<`string`, `unknown`\\>\n\nCustom extensions returned from the GraphQL server.\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / Options\n\n# Interface: Options\n\nOptions for useMutation.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your mutation requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\nSupports reactive variables - provide a ref, getter, or object with reactive properties.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n## 4. Vue-Apollo\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### throws?\n\n> `optional` **throws**: `\"auto\"` \\| `\"always\"` \\| `\"never\"`\n\nControls error throwing behavior.\n\n- `'auto'` (default): Throws if no `onError` handler is registered\n\n- `'always'`: Always throws errors\n\n- `'never'`: Never throws errors\n\n#### Default\n\n```ts\n'auto'\n```\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useMutation.\n\n## 1. Mutation\n\n### mutate()\n\n> **mutate**: (`options?`) => `Promise`\\<[`MutateResult`](MutateResult.md)\\>\n\nCall the mutation with optional variables and override options.\n\n#### Parameters\n\n##### options?\n\n[`MutateOptions`](MutateOptions.md)\n\nVariables and options for this mutation call.\n\n#### Returns\n\n`Promise`\\<[`MutateResult`](MutateResult.md)\\>\n\nPromise resolving to the mutation result.\n\n#### Example\n\n```ts\nconst { mutate } = useMutation(AddTodo)\n\n// Call with variables\nconst result = await mutate({ variables: { text: 'New todo' } })\n\n// With optimistic response\nawait mutate({\n  variables: { text: 'New todo' },\n  optimisticResponse: {\n    addTodo: { __typename: 'Todo', id: 'temp', text: 'New todo', completed: false }\n  }\n})\n```\n\n## 2. Operation data\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nIf the mutation produces one or more errors, this object contains either an array of `graphQLErrors` or a single `networkError`. Otherwise, this value is `undefined`.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null` \\| `undefined`\\>\n\nThe data returned from your mutation. Can be `undefined` if `errorPolicy` is `all` or `ignore` and the server returns a GraphQL response with `errors` but not `data`, or a network error is returned.\n\n## 3. Network info\n\n### called\n\n> **called**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the mutation's mutate function has been called.\n\n***\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the mutation is currently in flight.\n\n## 4. Lifecycle\n\n### reset()\n\n> **reset**: () => `void`\n\nReset the mutation's result to its initial, uncalled state.\n\n#### Returns\n\n`void`\n\n## 5. Events\n\n### onDone\n\n> **onDone**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`MutateResult`](MutateResult.md)\\>\n\nEvent triggered when the mutation completes successfully.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when the mutation encounters an error.\n\n## 6. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being mutated.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md) \\| `undefined`\\>\n\nCurrent options.\n","packages/docs/api/composable/@vue/namespaces/useMutation/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ text: 'Hello' })\nuseMutation(mutation, { variables })\n\n// Object mapping individual variable names to refs/getters\nconst text = ref('Hello')\nuseMutation(mutation, { variables: { text } })\n```\n","packages/docs/api/composable/@vue/namespaces/useQuery/index.md":"[@vue/apollo-composable](../../../index.md) / useQuery\n\n# useQuery\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [FetchMoreOptions](interfaces/FetchMoreOptions.md)\n- [FetchMoreResult](interfaces/FetchMoreResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n- [SubscribeToMoreOptions](interfaces/SubscribeToMoreOptions.md)\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Current.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Current\n\n# Interface: Current\n\nCurrent state.\n\n## 1. Operation data\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nA single ErrorLike object describing the error that occurred during the latest\nquery execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: `boolean`\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### ~~partial~~\n\n> **partial**: `boolean`\n\nDescribes whether `result` is a complete or partial result. This flag is only\nset when `returnPartialData` is `true` in query options.\n\n#### Deprecated\n\nThis field will be removed in a future version of Apollo Client.\n\n***\n\n### result\n\n> **result**: `object` \\| `null` \\| `undefined`\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"` \\| `\"empty\"` \\| `\"streaming\"`\n\nDescribes the completeness of `result`.\n\n- `empty`: No data could be fulfilled from the cache or the result is\n  incomplete. `result` is `undefined`.\n- `partial`: Some data could be fulfilled from the cache but `result` is\n  incomplete. This is only possible when `returnPartialData` is `true`.\n- `streaming`: `result` is incomplete as a result of a deferred query and\n  the result is still streaming in.\n- `complete`: `result` is a fully satisfied query result fulfilled\n  either from the cache or network.\n\n## 2. Network info\n\n### loading\n\n> **loading**: `boolean`\n\nIf `true`, the query is busy. That covers a request in flight, new variables\nwaiting out the `debounce`/`throttle` timer, and the hand-over in between, where\nthe variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: `NetworkStatus`\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: `boolean`\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreOptions.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / FetchMoreOptions\n\n# Interface: FetchMoreOptions\n\nOptions for fetchMore.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### query?\n\n> `optional` **query**: `DocumentNode`\n\nA GraphQL query string parsed into an AST with the gql template literal.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Query methods\n\n### updateQuery()?\n\n> `optional` **updateQuery**: (`previousQueryResult`, `options`) => `object`\n\nA function which updates the query result with the new fetchMore result.\n\n#### Parameters\n\n##### previousQueryResult\n\n`object`\n\n##### options\n\n###### fetchMoreResult\n\n`object`\n\n###### variables\n\n`object`\n\n#### Returns\n\n`object`\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreResult.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / FetchMoreResult\n\n# Interface: FetchMoreResult\n\nFetchMore result with Vue-Apollo naming.\n\n## 1. Operation data\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nA single ErrorLike object describing the error that occurred during the latest\nquery execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### result\n\n> **result**: `object` \\| `null` \\| `undefined`\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useQuery.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### enabled?\n\n> `optional` **enabled**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`boolean` \\| `undefined`\\>\n\nReactive flag to enable/disable the query.\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useQuery.\n\n## Extended by\n\n- [`Result`](../../useLazyQuery/interfaces/Result.md)\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/SubscribeToMoreOptions.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / SubscribeToMoreOptions\n\n# Interface: SubscribeToMoreOptions\n\nOptions for subscribeToMore.\n\n## 1. Operation options\n\n### document\n\n> **document**: `DocumentNode`\n\nA GraphQL subscription document parsed into an AST with the gql template literal.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nAn object containing all of the GraphQL variables your subscription requires to execute.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Query methods\n\n### onError()?\n\n> `optional` **onError**: (`error`) => `void`\n\nA callback function that's called when the subscription encounters an error.\n\n#### Parameters\n\n##### error\n\n`Error`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQuery()?\n\n> `optional` **updateQuery**: (`unsafePreviousData`, `options`) => `object`\n\nA function that defines how incoming subscription data is merged with the existing query data.\n\n::: warning First argument is deprecated\n\nThe first argument (`unsafePreviousData`) is not type-safe and may contain partial data.\nIt will be removed in Apollo Client v5. Use `options.previousData` instead.\n\n:::\n\n#### Parameters\n\n##### unsafePreviousData\n\n`object`\n\n##### options\n\n###### previousData\n\n`object`\n\n###### subscriptionData\n\n\\{ `data`: `object`; \\}\n\n###### subscriptionData.data\n\n`object`\n\n#### Returns\n\n`object`\n","packages/docs/api/composable/@vue/namespaces/useQuery/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseQuery(query, { variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseQuery(query, { variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseQuery(query, { variables: () => ({ id }) })\n```\n","packages/docs/api/composable/@vue/namespaces/useSubscription/index.md":"[@vue/apollo-composable](../../../index.md) / useSubscription\n\n# useSubscription\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / Options\n\n# Interface: Options\n\nOptions for useSubscription.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies the `ErrorPolicy` to be used for this operation.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your subscription requires to execute.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nShared context between your component and your network interface (Apollo Link).\n\n***\n\n### extensions?\n\n> `optional` **extensions**: `Record`\\<`string`, `unknown`\\>\n\nExtensions to be passed to the subscription.\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `FetchPolicy`\n\nHow you want your component to interact with the Apollo cache.\n\n## 4. Vue-Apollo\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### enabled?\n\n> `optional` **enabled**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`boolean`\\>\n\nReactive flag to enable/disable the subscription.\n\n***\n\n### shouldResubscribe?\n\n> `optional` **shouldResubscribe**: `boolean` \\| (`options`) => `boolean`\n\nDetermines if your subscription should be unsubscribed and subscribed again when an input to the composable (such as `subscription` or `variables`) changes.\n\n#### Default\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n","packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useSubscription.\n\n## 1. Operation data\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA runtime error with `graphQLErrors` and `networkError` properties.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `undefined`\\>\n\nAn object containing the result of your GraphQL subscription. Defaults to `undefined`.\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nA boolean that indicates whether any initial data has been returned. `true` until the first subscription event is received.\n\n## 3. Lifecycle\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nDisconnect and reconnect the subscription.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the subscription. Has no effect if already active or `enabled` is false.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the subscription. Can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 4. Events\n\n### onComplete\n\n> **onComplete**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`void`\\>\n\nEvent triggered when the subscription completes.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a subscription error occurs.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when subscription data is received.\n\n## 5. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being subscribed to.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md) \\| `undefined`\\>\n\nCurrent options.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the subscription (after debounce/throttle).\n","packages/docs/api/composable/@vue/namespaces/useSubscription/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`unknown`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n","packages/docs/api/composable/functions/provideApolloClient.md":"[@vue/apollo-composable](../index.md) / provideApolloClient\n\n# Function: provideApolloClient()\n\n> **provideApolloClient**(`client`): [`Result`](../@vue/namespaces/provideApolloClient/type-aliases/Result.md)\n\nProvides an ApolloClient for use outside Vue's injection context.\n\n## Parameters\n\n### client\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance to provide.\n\n## Returns\n\n[`Result`](../@vue/namespaces/provideApolloClient/type-aliases/Result.md)\n\nA function that executes a callback with the client available.\n\n## Example\n\n```ts\nconst { current } = provideApolloClient(client)(() => {\n  return useQuery(MyQuery)\n})\n```\n","packages/docs/api/composable/functions/provideApolloClients.md":"[@vue/apollo-composable](../index.md) / provideApolloClients\n\n# Function: provideApolloClients()\n\n> **provideApolloClients**(`clients`): [`Result`](../@vue/namespaces/provideApolloClients/type-aliases/Result.md)\n\nProvides multiple named ApolloClient instances for use outside Vue's injection context.\n\n## Parameters\n\n### clients\n\n`useApolloClient.ClientDict`\n\nDictionary mapping client IDs to ApolloClient instances.\n\n## Returns\n\n[`Result`](../@vue/namespaces/provideApolloClients/type-aliases/Result.md)\n\nA function that executes a callback with the clients available.\n\n## Example\n\n```ts\nconst { current } = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  return useQuery(MyQuery, { clientId: 'analytics' })\n})\n```\n","packages/docs/api/composable/functions/useApolloClient.md":"[@vue/apollo-composable](../index.md) / useApolloClient\n\n# Function: useApolloClient()\n\n> **useApolloClient**(`clientId?`): [`Result`](../@vue/namespaces/useApolloClient/interfaces/Result.md)\n\nComposable to access ApolloClient instances.\n\nMust be provided using [DefaultApolloClient](../variables/DefaultApolloClient.md) or [ApolloClients](../variables/ApolloClients.md). Alternatively, can be used inside a [provideApolloClient](../@vue/namespaces/provideApolloClient/index.md) or [provideApolloClients](../@vue/namespaces/provideApolloClients/index.md) context.\n\n## Parameters\n\n### clientId?\n\n`string`\n\nClient ID to resolve. Defaults to the default client.\n\n## Returns\n\n[`Result`](../@vue/namespaces/useApolloClient/interfaces/Result.md)\n\nObject with `client` property.\n\n## Example\n\n```ts\n// Get the default client\nconst { client } = useApolloClient()\n\n// Get a named client\nconst { client } = useApolloClient('analytics')\n```\n","packages/docs/api/composable/functions/useFragment.md":"[@vue/apollo-composable](../index.md) / useFragment\n\n# Function: useFragment()\n\n> **useFragment**(`options`): [`Result`](../@vue/namespaces/useFragment/interfaces/Result.md)\n\nA composable for reading fragment data from the Apollo cache with full reactivity.\n\nWatches fragment data and automatically updates when the cache changes. Supports both single entities and arrays of entities.\n\n::: danger Note\n\nThis only works for data that can be identified by the cache via `cache.identify()`. Entities must have a unique cache ID (typically `__typename` + `id`).\n\n:::\n\n## Parameters\n\n### options\n\n[`Options`](../@vue/namespaces/useFragment/interfaces/Options.md)\n\nConfiguration options for the fragment.\n\n## Returns\n\n[`Result`](../@vue/namespaces/useFragment/interfaces/Result.md)\n\nFragment result object with reactive refs.\n\n## Example\n\n```ts\nconst { current } = useFragment({\n  fragment: gql`fragment UserFields on User { id name }`,\n  from: { __typename: 'User', id: '1' },\n})\n```\n\n## See\n\n - [Apollo Client watchFragment API](https://www.apollographql.com/docs/react/api/cache/InMemoryCache#watchfragment)\n - [Obtaining an object's cache ID](https://www.apollographql.com/docs/react/caching/cache-interaction#obtaining-an-objects-cache-id)\n","packages/docs/api/composable/functions/useGlobalMutationLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalMutationLoading.md -->","packages/docs/api/composable/functions/useGlobalQueryLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalQueryLoading.md -->","packages/docs/api/composable/functions/useGlobalSubscriptionLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalSubscriptionLoading.md -->","packages/docs/api/composable/functions/useLazyQuery.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseLazyQuery.md -->","packages/docs/api/composable/functions/useMutation.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseMutation.md -->","packages/docs/api/composable/functions/useMutationLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseMutationLoading.md -->","packages/docs/api/composable/functions/useQuery.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseQuery.md -->","packages/docs/api/composable/functions/useQueryLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseQueryLoading.md -->","packages/docs/api/composable/functions/useSubscription.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseSubscription.md -->","packages/docs/api/composable/functions/useSubscriptionLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseSubscriptionLoading.md -->","packages/docs/api/composable/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Findex.md -->","packages/docs/api/composable/typedoc-sidebar.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ftypedoc-sidebar.json -->","packages/docs/api/composable/variables/ApolloClients.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Fvariables%2FApolloClients.md -->","packages/docs/api/composable/variables/DefaultApolloClient.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Fvariables%2FDefaultApolloClient.md -->","packages/docs/api/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Findex.md -->","packages/docs/caching/cache-updates.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Fcache-updates.md -->","packages/docs/caching/interaction.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Finteraction.md -->","packages/docs/caching/optimistic-ui.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Foptimistic-ui.md -->","packages/docs/caching/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Foverview.md -->","packages/docs/data/data-masking.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fdata-masking.md -->","packages/docs/data/error-handling.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ferror-handling.md -->","packages/docs/data/fragments.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ffragments.md -->","packages/docs/data/mutations.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fmutations.md -->","packages/docs/data/queries.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fqueries.md -->","packages/docs/data/refetching.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Frefetching.md -->","packages/docs/data/subscriptions.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fsubscriptions.md -->","packages/docs/data/suspense.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fsuspense.md -->","packages/docs/data/typescript.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ftypescript.md -->","packages/docs/guide/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Findex.md -->","packages/docs/guide/installation.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Finstallation.md -->","packages/docs/guide/why-apollo.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Fwhy-apollo.md -->","packages/docs/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Findex.md -->","packages/docs/local-state/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Flocal-state%2Foverview.md -->","packages/docs/migration/compat.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fcompat.md -->","packages/docs/migration/components.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fcomponents.md -->","packages/docs/migration/guide.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fguide.md -->","packages/docs/migration/whats-changed.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fwhats-changed.md -->","packages/docs/networking/authentication.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fnetworking%2Fauthentication.md -->","packages/docs/networking/basic-http.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fnetworking%2Fbasic-http.md -->","packages/docs/package.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpackage.json -->","packages/docs/pagination/cursor-based.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Fcursor-based.md -->","packages/docs/pagination/offset-based.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Foffset-based.md -->","packages/docs/pagination/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Foverview.md -->","packages/docs/ssr/nuxt.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fssr%2Fnuxt.md -->","packages/docs/ssr/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fssr%2Foverview.md -->","packages/docs/tsconfig.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Ftsconfig.json -->","packages/docs/typedoc.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Ftypedoc.json -->","packages/vue-apollo-components/README.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fvue-apollo-components%2FREADME.md -->","packages/vue-apollo-composable/README.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fvue-apollo-composable%2FREADME.md -->",".cursorrules (react-graphql-apollo-client-cursorrules-prompt-file.mdc)":"---\ndescription: \"Cursor rules for GraphQL development with Apollo Client integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + GraphQL (Apollo Client) .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// GraphQL and Apollo Client best practices\n\nconst graphqlBestPractices = [\n  \"Use Apollo Client for state management and data fetching\",\n  \"Implement query components for data fetching\",\n  \"Utilize mutations for data modifications\",\n  \"Use fragments for reusable query parts\",\n  \"Implement proper error handling and loading states\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n  components/\n  graphql/\n    queries/\n    mutations/\n    fragments/\n  hooks/\n  pages/\n  utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use Apollo Provider at the root of your app\n2. Implement custom hooks for Apollo operations\n3. Use TypeScript for type safety with GraphQL operations\n4. Utilize Apollo Client's caching capabilities\n5. Implement proper error boundaries for GraphQL errors\n6. Use Apollo Client DevTools for debugging\n7. Follow naming conventions for queries, mutations, and fragments\n`;\n"},"files":{"packages/docs/advanced/lazy-queries.md":"# Lazy Queries\n\n[`useLazyQuery`](/api/composable/functions/useLazyQuery) is for queries where the variables are not known up front. Reach for it when a query should run in response to a user action (search submit, button click, modal open) rather than automatically on mount.\n\n:::: components-api\n::: warning Composition API only\nThere is no `<ApolloLazyQuery>`.\n:::\n::::\n\n## When to use lazy vs enabled\n\n| Situation | Tool |\n|-----------|------|\n| Variables come from a user action (search box submit, button click) | `useLazyQuery` |\n| Variables are known but you want to gate execution on a condition | `useQuery({ enabled })` |\n| Variables are known and the query should run on mount | `useQuery` |\n\n`useLazyQuery` starts disabled. It exposes a `load(variables?)` function that you call when ready. After the first `load`, the query behaves like a normal `useQuery`: variables become reactive, results update, and the query stops when the scope is disposed.\n\n## Basic usage\n\n```vue\n<script setup lang=\"ts\">\nconst SEARCH_USERS: TypedDocumentNode<{ users: { id: string, name: string }[] }, { term: string }>\n  = gql`\n    query SearchUsers($term: String!) {\n      users(search: $term) {\n        id\n        name\n      }\n    }\n  `\n\nconst term = ref('')\nconst { load, current } = useLazyQuery(SEARCH_USERS)\n\nasync function search() {\n  const result = await load({ term: term.value })\n  console.log('Found users:', result?.users)\n}\n</script>\n\n<template>\n  <form @submit.prevent=\"search\">\n    <input v-model=\"term\">\n    <button>Search</button>\n  </form>\n\n  <div v-if=\"current.loading\">\n    Searching...\n  </div>\n  <ul v-else-if=\"current.resultState === 'complete'\">\n    <li v-for=\"user in current.result.users\" :key=\"user.id\">\n      {{ user.name }}\n    </li>\n  </ul>\n</template>\n```\n\n`load(variables?)`:\n\n- Sets the variables for the query (merged with any variables already in options).\n- Starts the query.\n- Returns a promise that resolves with the result data when the query completes, or rejects with the error.\n\nThe result also lands in `current.result` and the individual refs (`result`, `loading`, `error`) just like `useQuery`.\n\n## Loading multiple times\n\nCalling `load` again with different variables re-runs the query:\n\n```ts\nconst { load } = useLazyQuery(SEARCH_USERS)\n\nawait load({ term: 'alice' }) // First search\nawait load({ term: 'bob' }) // New search\n```\n\nEach call merges new variables on top of the previously-loaded ones.\n\n## Options\n\n`useLazyQuery` accepts the same options as `useQuery` (variables, fetch policies, error handling, etc.), except `enabled` is not applicable (the query is always lazy until `load` is called).\n\nYou can still set reactive `variables` in options, which acts as the default for `load`:\n\n```ts\nconst term = ref('')\nconst limit = ref(10)\n\nconst { load } = useLazyQuery(SEARCH_USERS, {\n  variables: { term, limit },\n})\n\n// Uses the reactive variables from options\nasync function search() {\n  await load()\n}\n\n// Or override on the call\nasync function searchOne() {\n  await load({ term: term.value, limit: 1 })\n}\n```\n\nAfter the first `load`, changes to the reactive variables trigger re-execution like any normal `useQuery`.\n\n## Awaiting the result\n\n`load` returns a promise so you can use the result inline:\n\n```ts\nasync function fetchUser(id: string) {\n  try {\n    const data = await load({ id })\n    if (data) {\n      console.log('Loaded:', data.user)\n    }\n  }\n  catch (e) {\n    console.error('Failed to load:', e)\n  }\n}\n```\n\nThe promise resolves with the query data when the result is complete. If the query errors, it rejects with the error. The reactive refs (`current`, `result`, `error`) update either way.\n\n## Lazy queries during SSR\n\n`useLazyQuery` does not run on the server because there is no user action to trigger it. If a value needs to be available during SSR, use `useQuery` instead. See [SSR Overview](/ssr/overview).\n\n## Options and result reference\n\nFor every available option and method, see:\n\n- [`useLazyQuery.Options`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options)\n- [`useLazyQuery.Result`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result)\n\n## Next steps\n\n- [Queries](/data/queries) for the basic `useQuery` patterns.\n- [Refetching](/data/refetching) compares lazy loading with refetch and poll.\n- [Loading States](/advanced/loading-states) handles loading indicators across many queries.\n","packages/docs/advanced/loading-states.md":"# Loading States\n\nEvery operation exposes its own `loading` state, but real apps often want to combine them: a single indicator for the whole page, an app-wide loading bar, a \"saving\" toast that tracks every mutation. Vue Apollo ships six composables for aggregating loading state across multiple operations.\n\n| Scope | Queries | Mutations | Subscriptions |\n|-------|---------|-----------|---------------|\n| Current effect scope (usually a component) | `useQueryLoading` | `useMutationLoading` | `useSubscriptionLoading` |\n| Whole app | `useGlobalQueryLoading` | `useGlobalMutationLoading` | `useGlobalSubscriptionLoading` |\n\nThe per-scope composables track every `useQuery`/`useMutation`/`useSubscription` called within the current Vue effect scope (typically the component that calls them, plus anything they call recursively). The global composables track every operation in the entire app.\n\n:::: components-api\n::: warning Components have their own scope\n`<ApolloQuery>` runs its `useQuery` inside its *own* component instance, so a\n`useQueryLoading()` in the surrounding `<script setup>` will never see it. Reach for the\n**global** composables when the operations are declared as elements, or for the `loading`\nslot prop when you only care about one of them.\n\nEverything on this page is written in the composables because these six *are* composables:\nthere is no component form of an aggregate counter. They work the same in a file that\notherwise uses only components.\n:::\n::::\n\n## Per-scope loading\n\n```vue\n<script setup lang=\"ts\">\nconst { current: users } = useQuery(GET_USERS)\nconst { current: posts } = useQuery(GET_POSTS)\n\n// True while any query in this component is loading\nconst loading = useQueryLoading()\n</script>\n\n<template>\n  <div v-if=\"loading\">\n    Loading...\n  </div>\n  <div v-else>\n    <!-- Render data -->\n  </div>\n</template>\n```\n\n`useQueryLoading` returns a computed ref that is `true` while at least one query in the current scope is in flight. It is reactive: as queries finish, the ref flips back to `false`.\n\nUse the same shape for mutations and subscriptions:\n\n```ts\nconst { mutate: updateUser } = useMutation(UPDATE_USER)\nconst saving = useMutationLoading()\n```\n\nPer-scope tracking is automatically scoped to the component that calls these composables. The same composable in a sibling component does not affect this scope.\n\n## Global loading\n\n`useGlobalQueryLoading`, `useGlobalMutationLoading`, and `useGlobalSubscriptionLoading` track every operation in the entire app. Useful for app-shell loading indicators:\n\n```vue\n<script setup lang=\"ts\">\nimport { useGlobalQueryLoading } from '@vue/apollo-composable'\n\nconst loading = useGlobalQueryLoading()\n</script>\n\n<template>\n  <header>\n    <div v-if=\"loading\" class=\"loading-bar\" />\n  </header>\n  <main>\n    <slot />\n  </main>\n</template>\n```\n\nUnlike the per-scope variants, the global composables can be called anywhere, including outside a component setup.\n\n## Restrictions\n\n- The per-scope composables must be called inside an effect scope (typically a `<script setup>` block, a Vue plugin, or anywhere `getCurrentScope()` returns a scope). They throw outside.\n- The global composables have no such restriction.\n\n## When to choose which\n\n| Goal | Composable |\n|------|------------|\n| Loading indicator for a specific component or section | Per-scope: `useQueryLoading`, etc. |\n| App-wide top loading bar | Global: `useGlobalQueryLoading` |\n| Disable a button while a specific mutation is in flight | The `loading` of that mutation alone |\n| Combine queries and mutations into one indicator | Two refs, combined with `computed(() => queries.value || saving.value)` |\n\nFor the \"indicator for one specific operation\" case, do not reach for these composables.\n\n:::: composition-api\nUse the `loading` ref the original composable returned:\n\n```ts\nconst { mutate: save, loading } = useMutation(SAVE)\n// `loading` is true while this specific save is running\n```\n::::\n\n:::: components-api\nUse the `loading` slot prop, which is scoped to that one element:\n\n```vue-html\n<ApolloMutation v-slot=\"{ mutate, loading }\" :mutation=\"Save\" @error=\"console.error\">\n  <button :disabled=\"loading\" @click=\"mutate()\">\n    Save\n  </button>\n</ApolloMutation>\n```\n::::\n\n## Combining categories\n\nWant a single indicator that flips on while any operation is running? Compose them:\n\n```ts\nconst queries = useGlobalQueryLoading()\nconst mutations = useGlobalMutationLoading()\nconst subscriptions = useGlobalSubscriptionLoading()\n\nconst anyLoading = computed(\n  () => queries.value || mutations.value || subscriptions.value,\n)\n```\n\n## SSR\n\nThe global composables avoid cross-request contamination during SSR. You can safely use them in components that render on the server.\n\nThe per-scope composables are also SSR-safe, but the counters are scoped to the current request's effect scope.\n\n## Next steps\n\n- [Queries](/data/queries) for the `loading` ref on individual `useQuery` calls.\n- [Mutations](/data/mutations) for the `loading` ref on `useMutation`.\n- [Suspense](/data/suspense) for a different approach to coarse-grained loading.\n","packages/docs/advanced/multiple-clients.md":"# Multiple Clients\n\nVue Apollo supports multiple `ApolloClient` instances in the same app. The canonical use case is talking to different backends: a primary GraphQL API and an analytics service, each with its own schema, endpoint, and link chain.\n\nThis page covers the recommended pattern: provide a dictionary of named clients, then pick the right one per call with the `clientId` option.\n\n## Setting up named clients\n\nCreate each client as you would a single client. Provide them as a dictionary through the `ApolloClients` injection key:\n\n```ts\n// src/apollo.ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\n\nexport const mainClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n\nexport const analyticsClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://analytics.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n```\n\n```ts\n// src/main.ts\nimport { ApolloClients } from '@vue/apollo-composable'\nimport { createApp } from 'vue'\nimport { analyticsClient, mainClient } from './apollo'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.provide(ApolloClients, {\n  default: mainClient,\n  analytics: analyticsClient,\n})\napp.mount('#app')\n```\n\nThe dictionary must contain a `default` entry. That is the client used when no `clientId` is specified.\n\n## Using a specific client\n\n:::: composition-api\nPass `clientId` in the composable options:\n\n```vue\n<script setup lang=\"ts\">\nconst PAGE_VIEWS: TypedDocumentNode<{ pageViews: number }, {}>\n  = gql`\n    query PageViews {\n      pageViews\n    }\n  `\n\nconst { current } = useQuery(PAGE_VIEWS, {\n  clientId: 'analytics',\n})\n</script>\n```\n\nThe same option works on [`useMutation`](/data/mutations), [`useSubscription`](/data/subscriptions), [`useLazyQuery`](/advanced/lazy-queries), and [`useFragment`](/data/fragments).\n::::\n\n:::: components-api\nSet the `clientId` prop:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery :query=\"PageViews\" clientId=\"analytics\">\n    <template #data=\"{ data }\">\n      {{ data.pageViews }} views\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n[`<ApolloMutation>`](/api/components/ApolloMutation),\n[`<ApolloSubscription>`](/api/components/ApolloSubscription) and\n[`<ApolloFragment>`](/api/components/ApolloFragment) take the same prop.\n[`<ApolloSubscribeToMore>`](/api/components/ApolloSubscribeToMore) always uses whichever\nclient its enclosing `<ApolloQuery>` picked.\n\nBecause the prop is a normal binding, a client can be chosen per element without any of the\nplumbing a composable would need:\n\n```vue-html\n<ApolloQuery :query=\"PageViews\" :clientId=\"isPreview ? 'staging' : 'default'\">\n```\n::::\n\n## Resolving clients imperatively\n\nFor code that runs outside a composable call (event handlers, stores, route guards), use `useApolloClient` to resolve a client by id:\n\n```ts\nimport { useApolloClient } from '@vue/apollo-composable'\n\nconst { resolveClient } = useApolloClient()\n\nconst analytics = resolveClient('analytics')\n\nawait analytics.mutate({\n  mutation: TRACK_EVENT,\n  variables: { event: 'page_view' },\n})\n```\n\n`resolveClient()` with no argument returns the default client.\n\n:::: components-api\nThis is for code, not templates. An element that already picks its client with `clientId`\nnever needs to resolve one by hand, so reach for `useApolloClient` only where the call\nhappens outside the template: a store action, a route guard, an event handler that talks to\nthe client directly.\n::::\n\n## Switching clients reactively\n\n`clientId` is read each time the underlying observable is created. You can vary it based on a ref to switch clients at runtime, but the query is re-created whenever it changes, which means the previous result is lost and a new fetch starts.\n\n:::: composition-api\n```ts\nconst env = ref<'default' | 'staging'>('default')\n\nconst { current } = useQuery(QUERY, () => ({\n  clientId: env.value,\n}))\n```\n::::\n\n:::: components-api\n```vue-html\n<ApolloQuery :query=\"Query\" :clientId=\"env\">\n```\n::::\n\nThis is fine for occasional switches (an admin tool toggling between staging and prod). For per-feature splits, prefer setting `clientId` once per component or per query, not reactively.\n\n## Mixing with `provideApolloClient` / `provideApolloClients`\n\nFor non-component contexts (Vue Router guards, top-level scripts), use [`provideApolloClients`](/advanced/outside-components) to make named clients available the same way:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\n\nconst cleanup = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})\n\nconst result = cleanup(() => {\n  // useQuery calls in here can use clientId\n  // ...\n})\n```\n\nSee [Outside Components](/advanced/outside-components) for the full pattern.\n\n:::: components-api\n::: warning Composition API only\n`provideApolloClients` exists to give composables an injection context they would otherwise\nlack. Components run inside a template, so they always have one and resolve `clientId`\nagainst the `ApolloClients` map the app provided.\n:::\n::::\n\n## When to reach for multiple clients\n\n| Situation | Pattern |\n|-----------|---------|\n| One API, different auth states (anonymous vs logged in) | One client, set auth headers per request through context |\n| One API, different cache policies in different parts of the app | One client, vary fetch policies per query |\n| Separate backends with their own schemas | Multiple clients |\n| Same backend, different versions or federated subgraphs reached separately | Multiple clients |\n\nMultiple clients have real costs: each has its own cache, so queries against one cannot see updates to the other. If two parts of your app talk to the same entities, keep them on one client.\n\n## Next steps\n\n- [Outside Components](/advanced/outside-components) covers `provideApolloClient` / `provideApolloClients`.\n- [Authentication](/networking/authentication) for per-request auth that does not need a separate client.\n- The [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the full resolution API.\n","packages/docs/advanced/outside-components.md":"# Outside Components\n\nVue Apollo's composables rely on Vue's injection system to find the Apollo client. Inside a component's `<script setup>` (or any code that runs in a component's effect scope) the client is found through `inject(DefaultApolloClient)` automatically.\n\nOutside of that context, `useQuery` and friends have no way to resolve a client. [`provideApolloClient`](/api/composable/functions/provideApolloClient) and [`provideApolloClients`](/api/composable/functions/provideApolloClients) bridge that gap for the duration of a callback.\n\n:::: components-api\n::: warning Composition API only\nThis page is about calling composables outside a component setup: Pinia stores, route\nguards, plain modules. Components only exist inside a template, so they always have the\ninjection context and never need this.\n\nUse the `clientId` prop to pick a non-default client from a template; see\n[Multiple Clients](/advanced/multiple-clients).\n:::\n::::\n\n## When you need this\n\nYou need `provideApolloClient` when calling Vue Apollo composables from code that is **not** a component setup:\n\n- Vue Router navigation guards (`beforeEach`, `beforeEnter`).\n- Standalone scripts, utility functions, or workers.\n- Test setup code that runs outside of `mount()`.\n\nYou generally do **not** need it for:\n\n- Pinia stores. Call `useSomeStore()` from inside a component setup. The store can then use `useQuery`/`useMutation` directly because injection has already been resolved.\n- Composables called from inside a component. Injection works through nested composables.\n- Watch callbacks inside components. The component's effect scope is still active.\n\n## The pattern\n\n`provideApolloClient(client)` returns a function that runs your callback with the client available:\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nconst result = provideApolloClient(apolloClient)(() => {\n  return useQuery(gql`\n    query Me {\n      me { id name }\n    }\n  `)\n})\n```\n\n## Vue Router guards\n\nThe canonical use case: a route guard that prefetches data before navigation.\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { createRouter } from 'vue-router'\nimport { apolloClient } from './apollo'\n\nconst router = createRouter({\n  // ...routes\n})\n\nrouter.beforeEach(async (to) => {\n  if (to.meta.requiresAuth) {\n    const { current, onResult, onError } = provideApolloClient(apolloClient)(() => {\n      return useQuery(gql`\n        query CurrentUser {\n          me { id role }\n        }\n      `, {\n        fetchPolicy: 'cache-first',\n      })\n    })\n\n    // Wait for the query to complete\n    await new Promise<void>((resolve) => {\n      onResult(() => resolve())\n      onError(() => resolve())\n    })\n\n    if (!current.value.result?.me) {\n      return '/login'\n    }\n  }\n})\n```\n\n::: warning Cleanup matters\nGuards run outside any component's lifecycle, so the query has no scope to clean up against. If you start a long-running query (especially with `pollInterval` or a non-default `fetchPolicy`), it will leak.\n\nFor one-shot lookups, prefer `client.query()` directly:\n\n```ts\nconst { data } = await apolloClient.query({\n  query: CURRENT_USER,\n  fetchPolicy: 'cache-first',\n})\n```\n\n`client.query` does not subscribe and has nothing to leak. Reach for `provideApolloClient` + `useQuery` only when you need the reactive `current` ref, or when you specifically want the cache-update behavior.\n:::\n\n## Standalone helpers\n\nFor utility functions outside any Vue context (CLI tools, server scripts, workers):\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nexport function getUserOnce(id: string) {\n  return provideApolloClient(apolloClient)(() => {\n    const { onResult, onError } = useQuery(gql`\n      query User($id: ID!) {\n        user(id: $id) { id name }\n      }\n    `, {\n      variables: { id },\n    })\n\n    return new Promise<any>((resolve, reject) => {\n      onResult(data => resolve(data))\n      onError(reject)\n    })\n  })\n}\n```\n\nFor most one-off queries, `apolloClient.query(...)` directly is simpler.\n\n## Multiple clients\n\n`provideApolloClients` is the dictionary variant:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\nimport { analyticsClient, mainClient } from './apollo'\n\nprovideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  // useQuery, useMutation, etc. can resolve by clientId in here\n})\n```\n\nSee [Multiple Clients](/advanced/multiple-clients) for the full pattern.\n\n## How it works\n\n`provideApolloClient` writes the client into a module-level variable, runs your callback, then clears it. Vue Apollo's `useApolloClient` checks Vue's injection first; if there is no injection context (because you are not in a component), it falls back to the module-level variable.\n\nThis means:\n\n- The client only lives for the duration of the callback.\n- Nested calls work: if you call `provideApolloClient` inside `provideApolloClient`, the inner call wins until its callback returns.\n- It is not thread-safe across concurrent async work, because module state is shared. Do not start two independent `provideApolloClient` blocks in parallel; chain them or use a single block.\n\n## Next steps\n\n- [Multiple Clients](/advanced/multiple-clients) for the named-clients pattern.\n- [SSR Overview](/ssr/overview) for the SSR equivalent (cache extract/restore on the server).\n- [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the resolution API.\n","packages/docs/advanced/streaming.md":"# Streaming & @defer\n\nThe `@defer` and `@stream` directives let a GraphQL server deliver a single response in multiple chunks. The client renders the first chunk immediately and updates as later chunks arrive.\n\nVue Apollo surfaces this through the `current.resultState` discriminator: while data is arriving, `resultState` is `'streaming'`; when the server finishes, it becomes `'complete'`.\n\n## When to use streaming\n\n`@defer` is useful when a query has fast and slow fields and you want to render the fast ones first:\n\n```graphql\nquery Profile($id: ID!) {\n  user(id: $id) {\n    id\n    name        # Fast: from the user table\n    ... @defer {\n      activity  # Slow: aggregates from other services\n    }\n  }\n}\n```\n\nThe browser receives `name` immediately and `activity` when it is ready. Without `@defer`, the whole query is held until every field resolves.\n\n`@stream` works the same way for lists: items arrive incrementally instead of all at once.\n\n## Configuring the client\n\n`@defer` and `@stream` need an incremental delivery handler on your Apollo Client instance. Without one, using either directive throws an error.\n\n```ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\nimport { Defer20220824Handler } from '@apollo/client/incremental'\n\nconst apolloClient = new ApolloClient({\n  cache: new InMemoryCache(),\n  link: new HttpLink({ uri: '/graphql' }),\n  incrementalHandler: new Defer20220824Handler(),\n})\n```\n\nApollo Client ships several handlers, each implementing a different incremental delivery protocol:\n\n| Handler | Protocol |\n|---------|----------|\n| `Defer20220824Handler` | Used by Apollo Router and earlier `graphql-yoga` versions |\n| `GraphQL17Alpha2Handler` | Alias for `Defer20220824Handler` |\n| `GraphQL17Alpha9Handler` | Newer `graphql` 17 alpha format |\n| `NotImplementedHandler` | Default; throws on `@defer`/`@stream` |\n\nPick the one your server supports. See [Apollo's @defer docs](https://www.apollographql.com/docs/react/data/defer) for protocol details.\n\n## Reading a streaming query\n\n:::: composition-api\n```vue\n<script setup lang=\"ts\">\nconst PROFILE: TypedDocumentNode<{ user: { id: string, name: string, activity?: Array<{ id: string, kind: string }> } }, { id: string }>\n  = gql`\n    query Profile($id: ID!) {\n      user(id: $id) {\n        id\n        name\n        ... @defer {\n          activity {\n            id\n            kind\n          }\n        }\n      }\n    }\n  `\n\nconst { current } = useQuery(PROFILE, { variables: { id: '1' } })\n</script>\n\n<template>\n  <div v-if=\"current.resultState === 'empty'\">\n    Loading...\n  </div>\n\n  <div v-else>\n    <!-- `name` is available as soon as the first chunk arrives -->\n    <h1>{{ current.result?.user.name }}</h1>\n\n    <!-- `activity` is available once the deferred chunk arrives -->\n    <div v-if=\"current.result?.user.activity\">\n      <h2>Recent activity</h2>\n      <ul>\n        <li v-for=\"entry in current.result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </div>\n    <div v-else>\n      Loading activity...\n    </div>\n  </div>\n</template>\n```\n::::\n\n:::: components-api\n`#data` renders from the first chunk onwards, so the non-deferred fields appear immediately\nand the deferred ones fill in underneath as they land:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery\n    :query=\"gql`\n      query Profile($id: ID!) {\n        user(id: $id) {\n          id\n          name\n          ... @defer {\n            activity {\n              id\n              kind\n            }\n          }\n        }\n      }\n    `\"\n    :variables=\"{ id: '1' }\"\n  >\n    <template #loading>\n      Loading...\n    </template>\n    <template #data=\"{ data }\">\n      <!-- `name` is available as soon as the first chunk arrives -->\n      <h1>{{ data.user.name }}</h1>\n\n      <!-- `activity` is available once the deferred chunk arrives -->\n      <div v-if=\"data.user.activity\">\n        <h2>Recent activity</h2>\n        <ul>\n          <li v-for=\"entry in data.user.activity\" :key=\"entry.id\">\n            {{ entry.kind }}\n          </li>\n        </ul>\n      </div>\n      <div v-else>\n        Loading activity...\n      </div>\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n`#loading` covers only the gap before the first chunk. From there `#data` stays mounted\nfor the rest of the stream.\n\nListen for `@streamingResult` if you want each chunk imperatively, and use the default\nslot when you need `resultState` itself to tell `'streaming'` from `'complete'`.\n::::\n\nThe `resultState` lifecycle for a `@defer` query:\n\n1. `'empty'` while no data has arrived.\n2. `'streaming'` after the first chunk lands. `current.result` contains the non-deferred fields. Deferred fields are still `undefined`.\n3. `'streaming'` continues to fire as more deferred chunks arrive. Fields appear as their chunks land.\n4. `'complete'` once the server signals the response is finished. All fields are populated.\n\n`loading` stays `true` through `streaming` and only becomes `false` at `complete`. `networkStatus` transitions from `loading` to `streaming` to `ready`.\n\n## Type narrowing for streaming\n\nBecause deferred fields may be absent during `streaming`, their TypeScript types should reflect that. With GraphQL Codegen, this happens automatically through the `Incremental` / `Streaming` type helpers. With manual `TypedDocumentNode`, mark deferred fields as optional in your `TData` type.\n\n:::: composition-api\nInside your component:\n\n```ts\nif (current.value.resultState === 'streaming' || current.value.resultState === 'complete') {\n  // current.value.result is defined\n  console.log(current.value.result.user.name)\n}\n```\n\nOr be more specific:\n\n```ts\nif (current.value.resultState === 'complete') {\n  // All fields, including deferred ones, are present\n  console.log(current.value.result.user.activity)\n}\n```\n::::\n\n:::: components-api\nThe default slot hands you the same discriminated union, so `resultState` narrows `result`\nin the template exactly as it does in script. See\n[Two ways to read the result](/data/queries#two-ways-to-read-the-result) for how the two\nrendering modes differ:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery v-slot=\"{ result, resultState }\" :query=\"Profile\" :variables=\"{ id: '1' }\">\n    <template v-if=\"resultState === 'streaming' || resultState === 'complete'\">\n      <!-- Non-deferred fields are there from the first chunk -->\n      <h1>{{ result.user.name }}</h1>\n\n      <!-- Deferred fields are only guaranteed once the state reaches `complete` -->\n      <ul v-if=\"resultState === 'complete' && result.user.activity\">\n        <li v-for=\"entry in result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </template>\n  </ApolloQuery>\n</template>\n```\n::::\n\n## Combining with Suspense\n\nBy default, `await useQuery()` resolves as soon as the first chunk lands. The component renders with partial data, then re-renders as more arrives.\n\nIf you want Suspense to wait for the entire stream to complete (so the first render has all the data), set `awaitComplete: true`:\n\n```vue\n<script setup lang=\"ts\">\nimport { gql } from '@apollo/client'\nimport { useQuery } from '@vue/apollo-composable'\n\nconst { current } = await useQuery(PROFILE_QUERY, {\n  variables: { id: '1' },\n  awaitComplete: true, // Wait for `resultState === 'complete'`\n})\n</script>\n```\n\nUse this carefully: it negates the latency benefit of `@defer`. Most of the time, you want the default (render fast, fill in slow) and only opt into `awaitComplete` for screens where partial data would be misleading.\n\n:::: components-api\n`awaitComplete` reaches the component through `options`, and it still governs SSR prefetch\nthere, so the server waits for the whole response before rendering:\n\n```vue-html\n<ApolloQuery :query=\"GetProfile\" :options=\"{ awaitComplete: true }\">\n```\n\nOn the client it has nothing to act on, because `<ApolloQuery>` cannot suspend. The slots\nrender as chunks land either way. See [Suspense](/data/suspense) for why.\n::::\n\n## Refetching a streaming query\n\nRefetching a `@defer` query goes through the streaming lifecycle again. The previous `result` stays available while the new response streams in. `networkStatus` reports `refetch` initially, then `streaming`, then `ready`.\n\nSee [Apollo's data merging tables](https://www.apollographql.com/docs/react/data/defer#loading-networkstatus-datastate-and-data-merging) for the exact transitions during refetch.\n\n## `@stream` for lists\n\n`@stream` works on list fields:\n\n```graphql\nquery Alphabet {\n  letters @stream(initialCount: 0)\n}\n```\n\n:::: composition-api\nThe server can send letters one by one. `current.result.letters` grows as items arrive:\n\n```ts\nconst { current } = useQuery(ALPHABET)\n\nwatch(() => current.value.result?.letters, (letters) => {\n  console.log(letters) // ['a'], ['a', 'b'], ['a', 'b', 'c'], ...\n})\n```\n::::\n\n:::: components-api\nThe list grows in place, so a `v-for` inside `#data` simply re-renders as each chunk lands.\n::::\n\n`@stream` shares the same `resultState` transitions as `@defer`.\n\n## Next steps\n\n- [Suspense](/data/suspense) covers `awaitComplete` and the SSR interaction.\n- [Queries](/data/queries) covers the basics of `useQuery` and `resultState`.\n- Apollo's [@defer reference](https://www.apollographql.com/docs/react/data/defer) covers the full protocol.\n","packages/docs/api/components/ApolloFragment.md":"# ApolloFragment\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `fragment` *(required)* | `DocumentNode \\| TypedDocumentNode<TData, TVariables>` | &nbsp; | A GraphQL fragment document. |\n| `from` *(required)* | `NonNullable<useFragment.FromValue<TData>>` | &nbsp; | Cache identifiable entity to read the fragment from.<br><br>Accepts a masked object from a parent query, a `{ __ref }` reference, or a cache ID string. |\n| `fragmentName` | `string \\| undefined` | &nbsp; | Name of the fragment to use, when the document declares more than one. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables used when reading the fragment. |\n| `optimistic` | `boolean \\| undefined` | &nbsp; | Read from optimistic cache data. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useFragment.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useFragment` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `nextState` | `[state: RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` has every field.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n\n### `#incomplete`\n\nShown while fields are still missing from the cache. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `DeepPartial<TData>` |\n| `missing` | `MissingTree \\| undefined` |\n\n### `#default`\n\nRaw mode. Receives the flattened fragment state.\n\nRendered in both modes, so nested children still mount.\n\nReceives `RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">`.\n\n## Exposed\n\nA template ref receives the full [`useFragment.Result`](/api/composable/@vue/namespaces/useFragment/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloFragment ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/ApolloMutation.md":"# ApolloMutation\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `mutation` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The mutation document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables applied to every call, unless overridden in `mutate()`. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useMutation.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useMutation` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n| `done` | `[result: ApolloClient.MutateResult<MaybeMasked<TData>>]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `mutate` | `useMutation.MutateFunction<TData, TVariables>` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `called` | `boolean` |\n| `result` | `TData \\| null \\| undefined` |\n| `reset` | `() => void` |\n\n## Exposed\n\nA template ref receives the full [`useMutation.Result`](/api/composable/@vue/namespaces/useMutation/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloMutation ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/ApolloQuery.md":"# ApolloQuery\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `query` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The query document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the query. |\n| `disabled` | `boolean \\| undefined` | `false` | Skip execution until a condition is met. |\n| `fetchPolicy` | `useQuery.Options<TData, TVariables>[\"fetchPolicy\"] \\| undefined` | &nbsp; | How the query reads from and writes to the cache. |\n| `pollInterval` | `number \\| undefined` | &nbsp; | Refetch every N milliseconds. |\n| `debounce` | `number \\| undefined` | &nbsp; | Delay variable updates (ms). `loading` covers the window. |\n| `throttle` | `number \\| undefined` | &nbsp; | Throttle variable updates (ms). `loading` covers the window. |\n| `keepPreviousResult` | `boolean \\| undefined` | &nbsp; | Keep the previous result on screen while new variables are in flight.<br><br>Off by default, as in `useQuery`. Opt in for search and pagination, where clearing the list on every change flickers. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `empty` | `((data: TData) => boolean) \\| undefined` | &nbsp; | Decides whether a result counts as empty, selecting the `#empty` slot.<br><br>Without it `#empty` is never used, so `#data` handles the empty case itself. |\n| `options` | `useQuery.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useQuery` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `completeResult` | `[data: TData]` |\n| `partialResult` | `[data: TData]` |\n| `streamingResult` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `nextState` | `[state: useQuery.Current<TData, \"empty\" \\| \"complete\" \\| \"streaming\" \\| \"partial\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` is never undefined.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n| `error` | `ErrorLike \\| undefined` |\n| `isPreviousResult` | `boolean` |\n| `loading` | `boolean` |\n| `pending` | `boolean` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n| `fetchMore` | `<TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(options: ObservableQuery.FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<RenameKey<ApolloClient.QueryResult<TFetchData>, \"data\", \"result\">> \\| undefined` |\n\n### `#loading`\n\nShown while the first result is loading. Opinionated mode only.\n\nNo slot props.\n\n### `#error`\n\nShown when the query failed and there is nothing to display. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `error` | `ErrorLike` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n\n### `#empty`\n\nShown when the `empty` prop returns `true`, and as the last branch when the query\nsettles with nothing to show. Without the `empty` prop, `#data` owns the empty result.\n\nNo slot props.\n\n### `#default`\n\nRaw mode. Receives the flattened query state and its methods.\n\nRendered in both modes, so nested renderless children still mount.\n\nReceives `useQuery.Current<MaybeMasked<TData>> & Pick<Query, 'refetch' \\| 'fetchMore' \\| 'updateQuery' \\| 'subscribeToMore' \\| 'start' \\| 'stop' \\| 'restart'>`.\n\nEvery field of [`useQuery.Current`](/api/composable/@vue/namespaces/useQuery/interfaces/Current) is present, so `resultState` narrows `result` here exactly as it does in script.\n\n## Exposed\n\nA template ref receives the full [`useQuery.Result`](/api/composable/@vue/namespaces/useQuery/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloQuery ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/ApolloSubscribeToMore.md":"# ApolloSubscribeToMore\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `document` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `updateQuery` | `SubscribeToMoreUpdateQueryFn<any, any, TData> \\| undefined` | &nbsp; | Merges incoming subscription data into the parent query's result. |\n| `context` | `DefaultContext \\| undefined` | &nbsp; | Context passed to the link chain for this subscription. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n","packages/docs/api/components/ApolloSubscription.md":"# ApolloSubscription\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `subscription` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `disabled` | `boolean \\| undefined` | `false` | Stop the subscription. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useSubscription.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useSubscription` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `complete` | `[]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `result` | `TData \\| undefined` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `start` | `() => void` |\n| `stop` | `() => void` |\n| `restart` | `() => Promise<void>` |\n\n## Exposed\n\nA template ref receives the full [`useSubscription.Result`](/api/composable/@vue/namespaces/useSubscription/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloSubscription ref=\"apollo\" ... />\n</template>\n```\n","packages/docs/api/components/index.md":"# Components API\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n- [ApolloQuery](./ApolloQuery)\n- [ApolloMutation](./ApolloMutation)\n- [ApolloSubscription](./ApolloSubscription)\n- [ApolloSubscribeToMore](./ApolloSubscribeToMore)\n- [ApolloFragment](./ApolloFragment)\n","packages/docs/api/composable/@vue/namespaces/provideApolloClient/index.md":"[@vue/apollo-composable](../../../index.md) / provideApolloClient\n\n# provideApolloClient\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n","packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Callback.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Result.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/provideApolloClients/index.md":"[@vue/apollo-composable](../../../index.md) / provideApolloClients\n\n# provideApolloClients\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n","packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Callback.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Result.md":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n","packages/docs/api/composable/@vue/namespaces/useApolloClient/index.md":"[@vue/apollo-composable](../../../index.md) / useApolloClient\n\n# useApolloClient\n\n## Interfaces\n\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useApolloClient/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useApolloClient](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useApolloClient.\n\n## Properties\n\n### client\n\n> `readonly` **client**: [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance.\n\n***\n\n### resolveClient()\n\n> **resolveClient**: (`clientId?`) => [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nResolves an ApolloClient by ID.\n\n#### Parameters\n\n##### clientId?\n\n`string`\n\nThe client ID to resolve. If omitted, resolves the default client.\n\n#### Returns\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\n","packages/docs/api/composable/@vue/namespaces/useFragment/index.md":"[@vue/apollo-composable](../../../index.md) / useFragment\n\n# useFragment\n\n## Type Aliases\n\n- [FromValue](type-aliases/FromValue.md)\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Current.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Current\n\n# Interface: Current\n\nCurrent state\n\n## 1. Operation data\n\n### complete\n\n> **complete**: `boolean`\n\nWhether the fragment data is complete.\n\n***\n\n### missing?\n\n> `optional` **missing**: `MissingTree`\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: `object` \\| `object`[]\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"`\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Options\n\n# Interface: Options\n\nOptions for useFragment.\n\n## 1. Fragment\n\n### fragment\n\n> **fragment**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`DocumentNode`\\>\n\nA GraphQL fragment document.\n\n***\n\n### fragmentName?\n\n> `optional` **fragmentName**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`string`\\>\n\nName of the fragment to use if document contains multiple fragments.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\\>\n\nVariables for the fragment.\n\n## 2. Data Source\n\n### from\n\n> **from**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`FromValue`](../type-aliases/FromValue.md) \\| [`FromValue`](../type-aliases/FromValue.md)[]\\>\n\nCache identifiable entity to read the fragment from.\n\n## 3. Configuration\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use.\n\n***\n\n### optimistic?\n\n> `optional` **optimistic**: `boolean`\n\nRead from optimistic cache data.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n","packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useFragment.\n\n## 1. Operation data\n\n### complete\n\n> **complete**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nWhether the fragment data is complete.\n\n***\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### missing\n\n> **missing**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`MissingTree`\\>\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `object`[]\\>\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`\"complete\"` \\| `\"partial\"`\\>\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n\n## 2. Events\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when fragment data changes.\n","packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/FromValue.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / FromValue\n\n# Type Alias: FromValue\n\n> **FromValue** = `object` \\| `string` \\| `null`\n\nCache identifier: object with `__typename`/`id`, `{ __ref }` reference, or string ID.\n","packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseFragment({ fragment, from, variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseFragment({ fragment, from, variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseFragment({ fragment, from, variables: () => ({ id }) })\n```\n","packages/docs/api/composable/@vue/namespaces/useLazyQuery/index.md":"[@vue/apollo-composable](../../../index.md) / useLazyQuery\n\n# useLazyQuery\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useLazyQuery - same as useQuery but `enabled` is not applicable.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../../useQuery/type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n","packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useLazyQuery - extends useQuery.Result with `load` function.\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](../../useQuery/interfaces/Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### load()\n\n> **load**: (`variables?`) => `Promise`\\<`object` \\| `undefined`\\>\n\nLoad the query. Starts the query if not already started.\n\nUnlike `useQuery`, which executes immediately, `useLazyQuery` waits until `load()` is called. After loading, the query behaves like a normal `useQuery`.\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this load. If provided, these will be merged with any variables from options.\n\n#### Returns\n\n`Promise`\\<`object` \\| `undefined`\\>\n\nPromise resolving to the query result data when complete.\n\n#### Example\n\n```ts\nconst { load, result, loading } = useLazyQuery(GetUser)\n\n// Query doesn't execute until load() is called\nasync function fetchUser(id: string) {\n  const data = await load({ id })\n  console.log('User loaded:', data)\n}\n```\n\n***\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](../../useQuery/interfaces/FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](../../useQuery/interfaces/SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n\n","packages/docs/api/composable/@vue/namespaces/useMutation/index.md":"[@vue/apollo-composable](../../../index.md) / useMutation\n\n# useMutation\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [MutateOptions](interfaces/MutateOptions.md)\n- [MutateResult](interfaces/MutateResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateOptions.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateOptions\n\n# Interface: MutateOptions\n\nOptions when calling the mutate function.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nVariables for this mutation call.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext` \\| (`composableContext`) => `DefaultContext`\n\nContext can be a callback or object.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateResult.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateResult\n\n# Interface: MutateResult\n\nMutation result returned from mutate().\n\n## Properties\n\n### data\n\n> **data**: `object` \\| `undefined`\n\nThe mutation result data.\n\n***\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nError if mutation failed.\n\n***\n\n### extensions?\n\n> `optional` **extensions**: `Record`\\<`string`, `unknown`\\>\n\nCustom extensions returned from the GraphQL server.\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / Options\n\n# Interface: Options\n\nOptions for useMutation.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your mutation requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\nSupports reactive variables - provide a ref, getter, or object with reactive properties.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n## 4. Vue-Apollo\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### throws?\n\n> `optional` **throws**: `\"auto\"` \\| `\"always\"` \\| `\"never\"`\n\nControls error throwing behavior.\n\n- `'auto'` (default): Throws if no `onError` handler is registered\n\n- `'always'`: Always throws errors\n\n- `'never'`: Never throws errors\n\n#### Default\n\n```ts\n'auto'\n```\n","packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useMutation.\n\n## 1. Mutation\n\n### mutate()\n\n> **mutate**: (`options?`) => `Promise`\\<[`MutateResult`](MutateResult.md)\\>\n\nCall the mutation with optional variables and override options.\n\n#### Parameters\n\n##### options?\n\n[`MutateOptions`](MutateOptions.md)\n\nVariables and options for this mutation call.\n\n#### Returns\n\n`Promise`\\<[`MutateResult`](MutateResult.md)\\>\n\nPromise resolving to the mutation result.\n\n#### Example\n\n```ts\nconst { mutate } = useMutation(AddTodo)\n\n// Call with variables\nconst result = await mutate({ variables: { text: 'New todo' } })\n\n// With optimistic response\nawait mutate({\n  variables: { text: 'New todo' },\n  optimisticResponse: {\n    addTodo: { __typename: 'Todo', id: 'temp', text: 'New todo', completed: false }\n  }\n})\n```\n\n## 2. Operation data\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nIf the mutation produces one or more errors, this object contains either an array of `graphQLErrors` or a single `networkError`. Otherwise, this value is `undefined`.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null` \\| `undefined`\\>\n\nThe data returned from your mutation. Can be `undefined` if `errorPolicy` is `all` or `ignore` and the server returns a GraphQL response with `errors` but not `data`, or a network error is returned.\n\n## 3. Network info\n\n### called\n\n> **called**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the mutation's mutate function has been called.\n\n***\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the mutation is currently in flight.\n\n## 4. Lifecycle\n\n### reset()\n\n> **reset**: () => `void`\n\nReset the mutation's result to its initial, uncalled state.\n\n#### Returns\n\n`void`\n\n## 5. Events\n\n### onDone\n\n> **onDone**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`MutateResult`](MutateResult.md)\\>\n\nEvent triggered when the mutation completes successfully.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when the mutation encounters an error.\n\n## 6. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being mutated.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md) \\| `undefined`\\>\n\nCurrent options.\n","packages/docs/api/composable/@vue/namespaces/useMutation/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ text: 'Hello' })\nuseMutation(mutation, { variables })\n\n// Object mapping individual variable names to refs/getters\nconst text = ref('Hello')\nuseMutation(mutation, { variables: { text } })\n```\n","packages/docs/api/composable/@vue/namespaces/useQuery/index.md":"[@vue/apollo-composable](../../../index.md) / useQuery\n\n# useQuery\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [FetchMoreOptions](interfaces/FetchMoreOptions.md)\n- [FetchMoreResult](interfaces/FetchMoreResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n- [SubscribeToMoreOptions](interfaces/SubscribeToMoreOptions.md)\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Current.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Current\n\n# Interface: Current\n\nCurrent state.\n\n## 1. Operation data\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nA single ErrorLike object describing the error that occurred during the latest\nquery execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: `boolean`\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### ~~partial~~\n\n> **partial**: `boolean`\n\nDescribes whether `result` is a complete or partial result. This flag is only\nset when `returnPartialData` is `true` in query options.\n\n#### Deprecated\n\nThis field will be removed in a future version of Apollo Client.\n\n***\n\n### result\n\n> **result**: `object` \\| `null` \\| `undefined`\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"` \\| `\"empty\"` \\| `\"streaming\"`\n\nDescribes the completeness of `result`.\n\n- `empty`: No data could be fulfilled from the cache or the result is\n  incomplete. `result` is `undefined`.\n- `partial`: Some data could be fulfilled from the cache but `result` is\n  incomplete. This is only possible when `returnPartialData` is `true`.\n- `streaming`: `result` is incomplete as a result of a deferred query and\n  the result is still streaming in.\n- `complete`: `result` is a fully satisfied query result fulfilled\n  either from the cache or network.\n\n## 2. Network info\n\n### loading\n\n> **loading**: `boolean`\n\nIf `true`, the query is busy. That covers a request in flight, new variables\nwaiting out the `debounce`/`throttle` timer, and the hand-over in between, where\nthe variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: `NetworkStatus`\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: `boolean`\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreOptions.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / FetchMoreOptions\n\n# Interface: FetchMoreOptions\n\nOptions for fetchMore.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### query?\n\n> `optional` **query**: `DocumentNode`\n\nA GraphQL query string parsed into an AST with the gql template literal.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Query methods\n\n### updateQuery()?\n\n> `optional` **updateQuery**: (`previousQueryResult`, `options`) => `object`\n\nA function which updates the query result with the new fetchMore result.\n\n#### Parameters\n\n##### previousQueryResult\n\n`object`\n\n##### options\n\n###### fetchMoreResult\n\n`object`\n\n###### variables\n\n`object`\n\n#### Returns\n\n`object`\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreResult.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / FetchMoreResult\n\n# Interface: FetchMoreResult\n\nFetchMore result with Vue-Apollo naming.\n\n## 1. Operation data\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nA single ErrorLike object describing the error that occurred during the latest\nquery execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### result\n\n> **result**: `object` \\| `null` \\| `undefined`\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useQuery.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### enabled?\n\n> `optional` **enabled**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`boolean` \\| `undefined`\\>\n\nReactive flag to enable/disable the query.\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useQuery.\n\n## Extended by\n\n- [`Result`](../../useLazyQuery/interfaces/Result.md)\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n","packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/SubscribeToMoreOptions.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / SubscribeToMoreOptions\n\n# Interface: SubscribeToMoreOptions\n\nOptions for subscribeToMore.\n\n## 1. Operation options\n\n### document\n\n> **document**: `DocumentNode`\n\nA GraphQL subscription document parsed into an AST with the gql template literal.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nAn object containing all of the GraphQL variables your subscription requires to execute.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Query methods\n\n### onError()?\n\n> `optional` **onError**: (`error`) => `void`\n\nA callback function that's called when the subscription encounters an error.\n\n#### Parameters\n\n##### error\n\n`Error`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQuery()?\n\n> `optional` **updateQuery**: (`unsafePreviousData`, `options`) => `object`\n\nA function that defines how incoming subscription data is merged with the existing query data.\n\n::: warning First argument is deprecated\n\nThe first argument (`unsafePreviousData`) is not type-safe and may contain partial data.\nIt will be removed in Apollo Client v5. Use `options.previousData` instead.\n\n:::\n\n#### Parameters\n\n##### unsafePreviousData\n\n`object`\n\n##### options\n\n###### previousData\n\n`object`\n\n###### subscriptionData\n\n\\{ `data`: `object`; \\}\n\n###### subscriptionData.data\n\n`object`\n\n#### Returns\n\n`object`\n","packages/docs/api/composable/@vue/namespaces/useQuery/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseQuery(query, { variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseQuery(query, { variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseQuery(query, { variables: () => ({ id }) })\n```\n","packages/docs/api/composable/@vue/namespaces/useSubscription/index.md":"[@vue/apollo-composable](../../../index.md) / useSubscription\n\n# useSubscription\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Options.md":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / Options\n\n# Interface: Options\n\nOptions for useSubscription.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies the `ErrorPolicy` to be used for this operation.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your subscription requires to execute.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nShared context between your component and your network interface (Apollo Link).\n\n***\n\n### extensions?\n\n> `optional` **extensions**: `Record`\\<`string`, `unknown`\\>\n\nExtensions to be passed to the subscription.\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `FetchPolicy`\n\nHow you want your component to interact with the Apollo cache.\n\n## 4. Vue-Apollo\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### enabled?\n\n> `optional` **enabled**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`boolean`\\>\n\nReactive flag to enable/disable the subscription.\n\n***\n\n### shouldResubscribe?\n\n> `optional` **shouldResubscribe**: `boolean` \\| (`options`) => `boolean`\n\nDetermines if your subscription should be unsubscribed and subscribed again when an input to the composable (such as `subscription` or `variables`) changes.\n\n#### Default\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n","packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Result.md":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useSubscription.\n\n## 1. Operation data\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA runtime error with `graphQLErrors` and `networkError` properties.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `undefined`\\>\n\nAn object containing the result of your GraphQL subscription. Defaults to `undefined`.\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nA boolean that indicates whether any initial data has been returned. `true` until the first subscription event is received.\n\n## 3. Lifecycle\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nDisconnect and reconnect the subscription.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the subscription. Has no effect if already active or `enabled` is false.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the subscription. Can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 4. Events\n\n### onComplete\n\n> **onComplete**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`void`\\>\n\nEvent triggered when the subscription completes.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a subscription error occurs.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when subscription data is received.\n\n## 5. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being subscribed to.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md) \\| `undefined`\\>\n\nCurrent options.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the subscription (after debounce/throttle).\n","packages/docs/api/composable/@vue/namespaces/useSubscription/type-aliases/ReactiveVariablesParameter.md":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`unknown`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n","packages/docs/api/composable/functions/provideApolloClient.md":"[@vue/apollo-composable](../index.md) / provideApolloClient\n\n# Function: provideApolloClient()\n\n> **provideApolloClient**(`client`): [`Result`](../@vue/namespaces/provideApolloClient/type-aliases/Result.md)\n\nProvides an ApolloClient for use outside Vue's injection context.\n\n## Parameters\n\n### client\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance to provide.\n\n## Returns\n\n[`Result`](../@vue/namespaces/provideApolloClient/type-aliases/Result.md)\n\nA function that executes a callback with the client available.\n\n## Example\n\n```ts\nconst { current } = provideApolloClient(client)(() => {\n  return useQuery(MyQuery)\n})\n```\n","packages/docs/api/composable/functions/provideApolloClients.md":"[@vue/apollo-composable](../index.md) / provideApolloClients\n\n# Function: provideApolloClients()\n\n> **provideApolloClients**(`clients`): [`Result`](../@vue/namespaces/provideApolloClients/type-aliases/Result.md)\n\nProvides multiple named ApolloClient instances for use outside Vue's injection context.\n\n## Parameters\n\n### clients\n\n`useApolloClient.ClientDict`\n\nDictionary mapping client IDs to ApolloClient instances.\n\n## Returns\n\n[`Result`](../@vue/namespaces/provideApolloClients/type-aliases/Result.md)\n\nA function that executes a callback with the clients available.\n\n## Example\n\n```ts\nconst { current } = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  return useQuery(MyQuery, { clientId: 'analytics' })\n})\n```\n","packages/docs/api/composable/functions/useApolloClient.md":"[@vue/apollo-composable](../index.md) / useApolloClient\n\n# Function: useApolloClient()\n\n> **useApolloClient**(`clientId?`): [`Result`](../@vue/namespaces/useApolloClient/interfaces/Result.md)\n\nComposable to access ApolloClient instances.\n\nMust be provided using [DefaultApolloClient](../variables/DefaultApolloClient.md) or [ApolloClients](../variables/ApolloClients.md). Alternatively, can be used inside a [provideApolloClient](../@vue/namespaces/provideApolloClient/index.md) or [provideApolloClients](../@vue/namespaces/provideApolloClients/index.md) context.\n\n## Parameters\n\n### clientId?\n\n`string`\n\nClient ID to resolve. Defaults to the default client.\n\n## Returns\n\n[`Result`](../@vue/namespaces/useApolloClient/interfaces/Result.md)\n\nObject with `client` property.\n\n## Example\n\n```ts\n// Get the default client\nconst { client } = useApolloClient()\n\n// Get a named client\nconst { client } = useApolloClient('analytics')\n```\n","packages/docs/api/composable/functions/useFragment.md":"[@vue/apollo-composable](../index.md) / useFragment\n\n# Function: useFragment()\n\n> **useFragment**(`options`): [`Result`](../@vue/namespaces/useFragment/interfaces/Result.md)\n\nA composable for reading fragment data from the Apollo cache with full reactivity.\n\nWatches fragment data and automatically updates when the cache changes. Supports both single entities and arrays of entities.\n\n::: danger Note\n\nThis only works for data that can be identified by the cache via `cache.identify()`. Entities must have a unique cache ID (typically `__typename` + `id`).\n\n:::\n\n## Parameters\n\n### options\n\n[`Options`](../@vue/namespaces/useFragment/interfaces/Options.md)\n\nConfiguration options for the fragment.\n\n## Returns\n\n[`Result`](../@vue/namespaces/useFragment/interfaces/Result.md)\n\nFragment result object with reactive refs.\n\n## Example\n\n```ts\nconst { current } = useFragment({\n  fragment: gql`fragment UserFields on User { id name }`,\n  from: { __typename: 'User', id: '1' },\n})\n```\n\n## See\n\n - [Apollo Client watchFragment API](https://www.apollographql.com/docs/react/api/cache/InMemoryCache#watchfragment)\n - [Obtaining an object's cache ID](https://www.apollographql.com/docs/react/caching/cache-interaction#obtaining-an-objects-cache-id)\n","packages/docs/api/composable/functions/useGlobalMutationLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalMutationLoading.md -->","packages/docs/api/composable/functions/useGlobalQueryLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalQueryLoading.md -->","packages/docs/api/composable/functions/useGlobalSubscriptionLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalSubscriptionLoading.md -->","packages/docs/api/composable/functions/useLazyQuery.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseLazyQuery.md -->","packages/docs/api/composable/functions/useMutation.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseMutation.md -->","packages/docs/api/composable/functions/useMutationLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseMutationLoading.md -->","packages/docs/api/composable/functions/useQuery.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseQuery.md -->","packages/docs/api/composable/functions/useQueryLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseQueryLoading.md -->","packages/docs/api/composable/functions/useSubscription.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseSubscription.md -->","packages/docs/api/composable/functions/useSubscriptionLoading.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseSubscriptionLoading.md -->","packages/docs/api/composable/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Findex.md -->","packages/docs/api/composable/typedoc-sidebar.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ftypedoc-sidebar.json -->","packages/docs/api/composable/variables/ApolloClients.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Fvariables%2FApolloClients.md -->","packages/docs/api/composable/variables/DefaultApolloClient.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Fvariables%2FDefaultApolloClient.md -->","packages/docs/api/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Findex.md -->","packages/docs/caching/cache-updates.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Fcache-updates.md -->","packages/docs/caching/interaction.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Finteraction.md -->","packages/docs/caching/optimistic-ui.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Foptimistic-ui.md -->","packages/docs/caching/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Foverview.md -->","packages/docs/data/data-masking.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fdata-masking.md -->","packages/docs/data/error-handling.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ferror-handling.md -->","packages/docs/data/fragments.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ffragments.md -->","packages/docs/data/mutations.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fmutations.md -->","packages/docs/data/queries.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fqueries.md -->","packages/docs/data/refetching.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Frefetching.md -->","packages/docs/data/subscriptions.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fsubscriptions.md -->","packages/docs/data/suspense.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fsuspense.md -->","packages/docs/data/typescript.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ftypescript.md -->","packages/docs/guide/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Findex.md -->","packages/docs/guide/installation.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Finstallation.md -->","packages/docs/guide/why-apollo.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Fwhy-apollo.md -->","packages/docs/index.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Findex.md -->","packages/docs/local-state/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Flocal-state%2Foverview.md -->","packages/docs/migration/compat.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fcompat.md -->","packages/docs/migration/components.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fcomponents.md -->","packages/docs/migration/guide.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fguide.md -->","packages/docs/migration/whats-changed.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fwhats-changed.md -->","packages/docs/networking/authentication.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fnetworking%2Fauthentication.md -->","packages/docs/networking/basic-http.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fnetworking%2Fbasic-http.md -->","packages/docs/package.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpackage.json -->","packages/docs/pagination/cursor-based.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Fcursor-based.md -->","packages/docs/pagination/offset-based.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Foffset-based.md -->","packages/docs/pagination/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Foverview.md -->","packages/docs/ssr/nuxt.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fssr%2Fnuxt.md -->","packages/docs/ssr/overview.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fssr%2Foverview.md -->","packages/docs/tsconfig.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Ftsconfig.json -->","packages/docs/typedoc.json":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Ftypedoc.json -->","packages/vue-apollo-components/README.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fvue-apollo-components%2FREADME.md -->","packages/vue-apollo-composable/README.md":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fvue-apollo-composable%2FREADME.md -->",".cursorrules (react-graphql-apollo-client-cursorrules-prompt-file.mdc)":"---\ndescription: \"Cursor rules for GraphQL development with Apollo Client integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + GraphQL (Apollo Client) .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// GraphQL and Apollo Client best practices\n\nconst graphqlBestPractices = [\n  \"Use Apollo Client for state management and data fetching\",\n  \"Implement query components for data fetching\",\n  \"Utilize mutations for data modifications\",\n  \"Use fragments for reusable query parts\",\n  \"Implement proper error handling and loading states\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n  components/\n  graphql/\n    queries/\n    mutations/\n    fragments/\n  hooks/\n  pages/\n  utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use Apollo Provider at the root of your app\n2. Implement custom hooks for Apollo operations\n3. Use TypeScript for type safety with GraphQL operations\n4. Utilize Apollo Client's caching capabilities\n5. Implement proper error boundaries for GraphQL errors\n6. Use Apollo Client DevTools for debugging\n7. Follow naming conventions for queries, mutations, and fragments\n`;\n"},"items":[{"name":"lazy-queries.md","path":"packages/docs/advanced/lazy-queries.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/advanced/lazy-queries.md","title":"Advanced Skill","category":"anthropic-skill","format":"markdown","content":"# Lazy Queries\n\n[`useLazyQuery`](/api/composable/functions/useLazyQuery) is for queries where the variables are not known up front. Reach for it when a query should run in response to a user action (search submit, button click, modal open) rather than automatically on mount.\n\n:::: components-api\n::: warning Composition API only\nThere is no `<ApolloLazyQuery>`.\n:::\n::::\n\n## When to use lazy vs enabled\n\n| Situation | Tool |\n|-----------|------|\n| Variables come from a user action (search box submit, button click) | `useLazyQuery` |\n| Variables are known but you want to gate execution on a condition | `useQuery({ enabled })` |\n| Variables are known and the query should run on mount | `useQuery` |\n\n`useLazyQuery` starts disabled. It exposes a `load(variables?)` function that you call when ready. After the first `load`, the query behaves like a normal `useQuery`: variables become reactive, results update, and the query stops when the scope is disposed.\n\n## Basic usage\n\n```vue\n<script setup lang=\"ts\">\nconst SEARCH_USERS: TypedDocumentNode<{ users: { id: string, name: string }[] }, { term: string }>\n  = gql`\n    query SearchUsers($term: String!) {\n      users(search: $term) {\n        id\n        name\n      }\n    }\n  `\n\nconst term = ref('')\nconst { load, current } = useLazyQuery(SEARCH_USERS)\n\nasync function search() {\n  const result = await load({ term: term.value })\n  console.log('Found users:', result?.users)\n}\n</script>\n\n<template>\n  <form @submit.prevent=\"search\">\n    <input v-model=\"term\">\n    <button>Search</button>\n  </form>\n\n  <div v-if=\"current.loading\">\n    Searching...\n  </div>\n  <ul v-else-if=\"current.resultState === 'complete'\">\n    <li v-for=\"user in current.result.users\" :key=\"user.id\">\n      {{ user.name }}\n    </li>\n  </ul>\n</template>\n```\n\n`load(variables?)`:\n\n- Sets the variables for the query (merged with any variables already in options).\n- Starts the query.\n- Returns a promise that resolves with the result data when the query completes, or rejects with the error.\n\nThe result also lands in `current.result` and the individual refs (`result`, `loading`, `error`) just like `useQuery`.\n\n## Loading multiple times\n\nCalling `load` again with different variables re-runs the query:\n\n```ts\nconst { load } = useLazyQuery(SEARCH_USERS)\n\nawait load({ term: 'alice' }) // First search\nawait load({ term: 'bob' }) // New search\n```\n\nEach call merges new variables on top of the previously-loaded ones.\n\n## Options\n\n`useLazyQuery` accepts the same options as `useQuery` (variables, fetch policies, error handling, etc.), except `enabled` is not applicable (the query is always lazy until `load` is called).\n\nYou can still set reactive `variables` in options, which acts as the default for `load`:\n\n```ts\nconst term = ref('')\nconst limit = ref(10)\n\nconst { load } = useLazyQuery(SEARCH_USERS, {\n  variables: { term, limit },\n})\n\n// Uses the reactive variables from options\nasync function search() {\n  await load()\n}\n\n// Or override on the call\nasync function searchOne() {\n  await load({ term: term.value, limit: 1 })\n}\n```\n\nAfter the first `load`, changes to the reactive variables trigger re-execution like any normal `useQuery`.\n\n## Awaiting the result\n\n`load` returns a promise so you can use the result inline:\n\n```ts\nasync function fetchUser(id: string) {\n  try {\n    const data = await load({ id })\n    if (data) {\n      console.log('Loaded:', data.user)\n    }\n  }\n  catch (e) {\n    console.error('Failed to load:', e)\n  }\n}\n```\n\nThe promise resolves with the query data when the result is complete. If the query errors, it rejects with the error. The reactive refs (`current`, `result`, `error`) update either way.\n\n## Lazy queries during SSR\n\n`useLazyQuery` does not run on the server because there is no user action to trigger it. If a value needs to be available during SSR, use `useQuery` instead. See [SSR Overview](/ssr/overview).\n\n## Options and result reference\n\nFor every available option and method, see:\n\n- [`useLazyQuery.Options`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options)\n- [`useLazyQuery.Result`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result)\n\n## Next steps\n\n- [Queries](/data/queries) for the basic `useQuery` patterns.\n- [Refetching](/data/refetching) compares lazy loading with refetch and poll.\n- [Loading States](/advanced/loading-states) handles loading indicators across many queries.\n","isInternal":false,"tokens":1074,"sizeBytes":4390},{"name":"loading-states.md","path":"packages/docs/advanced/loading-states.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/advanced/loading-states.md","title":"Advanced Skill","category":"anthropic-skill","format":"markdown","content":"# Loading States\n\nEvery operation exposes its own `loading` state, but real apps often want to combine them: a single indicator for the whole page, an app-wide loading bar, a \"saving\" toast that tracks every mutation. Vue Apollo ships six composables for aggregating loading state across multiple operations.\n\n| Scope | Queries | Mutations | Subscriptions |\n|-------|---------|-----------|---------------|\n| Current effect scope (usually a component) | `useQueryLoading` | `useMutationLoading` | `useSubscriptionLoading` |\n| Whole app | `useGlobalQueryLoading` | `useGlobalMutationLoading` | `useGlobalSubscriptionLoading` |\n\nThe per-scope composables track every `useQuery`/`useMutation`/`useSubscription` called within the current Vue effect scope (typically the component that calls them, plus anything they call recursively). The global composables track every operation in the entire app.\n\n:::: components-api\n::: warning Components have their own scope\n`<ApolloQuery>` runs its `useQuery` inside its *own* component instance, so a\n`useQueryLoading()` in the surrounding `<script setup>` will never see it. Reach for the\n**global** composables when the operations are declared as elements, or for the `loading`\nslot prop when you only care about one of them.\n\nEverything on this page is written in the composables because these six *are* composables:\nthere is no component form of an aggregate counter. They work the same in a file that\notherwise uses only components.\n:::\n::::\n\n## Per-scope loading\n\n```vue\n<script setup lang=\"ts\">\nconst { current: users } = useQuery(GET_USERS)\nconst { current: posts } = useQuery(GET_POSTS)\n\n// True while any query in this component is loading\nconst loading = useQueryLoading()\n</script>\n\n<template>\n  <div v-if=\"loading\">\n    Loading...\n  </div>\n  <div v-else>\n    <!-- Render data -->\n  </div>\n</template>\n```\n\n`useQueryLoading` returns a computed ref that is `true` while at least one query in the current scope is in flight. It is reactive: as queries finish, the ref flips back to `false`.\n\nUse the same shape for mutations and subscriptions:\n\n```ts\nconst { mutate: updateUser } = useMutation(UPDATE_USER)\nconst saving = useMutationLoading()\n```\n\nPer-scope tracking is automatically scoped to the component that calls these composables. The same composable in a sibling component does not affect this scope.\n\n## Global loading\n\n`useGlobalQueryLoading`, `useGlobalMutationLoading`, and `useGlobalSubscriptionLoading` track every operation in the entire app. Useful for app-shell loading indicators:\n\n```vue\n<script setup lang=\"ts\">\nimport { useGlobalQueryLoading } from '@vue/apollo-composable'\n\nconst loading = useGlobalQueryLoading()\n</script>\n\n<template>\n  <header>\n    <div v-if=\"loading\" class=\"loading-bar\" />\n  </header>\n  <main>\n    <slot />\n  </main>\n</template>\n```\n\nUnlike the per-scope variants, the global composables can be called anywhere, including outside a component setup.\n\n## Restrictions\n\n- The per-scope composables must be called inside an effect scope (typically a `<script setup>` block, a Vue plugin, or anywhere `getCurrentScope()` returns a scope). They throw outside.\n- The global composables have no such restriction.\n\n## When to choose which\n\n| Goal | Composable |\n|------|------------|\n| Loading indicator for a specific component or section | Per-scope: `useQueryLoading`, etc. |\n| App-wide top loading bar | Global: `useGlobalQueryLoading` |\n| Disable a button while a specific mutation is in flight | The `loading` of that mutation alone |\n| Combine queries and mutations into one indicator | Two refs, combined with `computed(() => queries.value || saving.value)` |\n\nFor the \"indicator for one specific operation\" case, do not reach for these composables.\n\n:::: composition-api\nUse the `loading` ref the original composable returned:\n\n```ts\nconst { mutate: save, loading } = useMutation(SAVE)\n// `loading` is true while this specific save is running\n```\n::::\n\n:::: components-api\nUse the `loading` slot prop, which is scoped to that one element:\n\n```vue-html\n<ApolloMutation v-slot=\"{ mutate, loading }\" :mutation=\"Save\" @error=\"console.error\">\n  <button :disabled=\"loading\" @click=\"mutate()\">\n    Save\n  </button>\n</ApolloMutation>\n```\n::::\n\n## Combining categories\n\nWant a single indicator that flips on while any operation is running? Compose them:\n\n```ts\nconst queries = useGlobalQueryLoading()\nconst mutations = useGlobalMutationLoading()\nconst subscriptions = useGlobalSubscriptionLoading()\n\nconst anyLoading = computed(\n  () => queries.value || mutations.value || subscriptions.value,\n)\n```\n\n## SSR\n\nThe global composables avoid cross-request contamination during SSR. You can safely use them in components that render on the server.\n\nThe per-scope composables are also SSR-safe, but the counters are scoped to the current request's effect scope.\n\n## Next steps\n\n- [Queries](/data/queries) for the `loading` ref on individual `useQuery` calls.\n- [Mutations](/data/mutations) for the `loading` ref on `useMutation`.\n- [Suspense](/data/suspense) for a different approach to coarse-grained loading.\n","isInternal":false,"tokens":1156,"sizeBytes":5085},{"name":"multiple-clients.md","path":"packages/docs/advanced/multiple-clients.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/advanced/multiple-clients.md","title":"Advanced Skill","category":"anthropic-skill","format":"markdown","content":"# Multiple Clients\n\nVue Apollo supports multiple `ApolloClient` instances in the same app. The canonical use case is talking to different backends: a primary GraphQL API and an analytics service, each with its own schema, endpoint, and link chain.\n\nThis page covers the recommended pattern: provide a dictionary of named clients, then pick the right one per call with the `clientId` option.\n\n## Setting up named clients\n\nCreate each client as you would a single client. Provide them as a dictionary through the `ApolloClients` injection key:\n\n```ts\n// src/apollo.ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\n\nexport const mainClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n\nexport const analyticsClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://analytics.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n```\n\n```ts\n// src/main.ts\nimport { ApolloClients } from '@vue/apollo-composable'\nimport { createApp } from 'vue'\nimport { analyticsClient, mainClient } from './apollo'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.provide(ApolloClients, {\n  default: mainClient,\n  analytics: analyticsClient,\n})\napp.mount('#app')\n```\n\nThe dictionary must contain a `default` entry. That is the client used when no `clientId` is specified.\n\n## Using a specific client\n\n:::: composition-api\nPass `clientId` in the composable options:\n\n```vue\n<script setup lang=\"ts\">\nconst PAGE_VIEWS: TypedDocumentNode<{ pageViews: number }, {}>\n  = gql`\n    query PageViews {\n      pageViews\n    }\n  `\n\nconst { current } = useQuery(PAGE_VIEWS, {\n  clientId: 'analytics',\n})\n</script>\n```\n\nThe same option works on [`useMutation`](/data/mutations), [`useSubscription`](/data/subscriptions), [`useLazyQuery`](/advanced/lazy-queries), and [`useFragment`](/data/fragments).\n::::\n\n:::: components-api\nSet the `clientId` prop:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery :query=\"PageViews\" clientId=\"analytics\">\n    <template #data=\"{ data }\">\n      {{ data.pageViews }} views\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n[`<ApolloMutation>`](/api/components/ApolloMutation),\n[`<ApolloSubscription>`](/api/components/ApolloSubscription) and\n[`<ApolloFragment>`](/api/components/ApolloFragment) take the same prop.\n[`<ApolloSubscribeToMore>`](/api/components/ApolloSubscribeToMore) always uses whichever\nclient its enclosing `<ApolloQuery>` picked.\n\nBecause the prop is a normal binding, a client can be chosen per element without any of the\nplumbing a composable would need:\n\n```vue-html\n<ApolloQuery :query=\"PageViews\" :clientId=\"isPreview ? 'staging' : 'default'\">\n```\n::::\n\n## Resolving clients imperatively\n\nFor code that runs outside a composable call (event handlers, stores, route guards), use `useApolloClient` to resolve a client by id:\n\n```ts\nimport { useApolloClient } from '@vue/apollo-composable'\n\nconst { resolveClient } = useApolloClient()\n\nconst analytics = resolveClient('analytics')\n\nawait analytics.mutate({\n  mutation: TRACK_EVENT,\n  variables: { event: 'page_view' },\n})\n```\n\n`resolveClient()` with no argument returns the default client.\n\n:::: components-api\nThis is for code, not templates. An element that already picks its client with `clientId`\nnever needs to resolve one by hand, so reach for `useApolloClient` only where the call\nhappens outside the template: a store action, a route guard, an event handler that talks to\nthe client directly.\n::::\n\n## Switching clients reactively\n\n`clientId` is read each time the underlying observable is created. You can vary it based on a ref to switch clients at runtime, but the query is re-created whenever it changes, which means the previous result is lost and a new fetch starts.\n\n:::: composition-api\n```ts\nconst env = ref<'default' | 'staging'>('default')\n\nconst { current } = useQuery(QUERY, () => ({\n  clientId: env.value,\n}))\n```\n::::\n\n:::: components-api\n```vue-html\n<ApolloQuery :query=\"Query\" :clientId=\"env\">\n```\n::::\n\nThis is fine for occasional switches (an admin tool toggling between staging and prod). For per-feature splits, prefer setting `clientId` once per component or per query, not reactively.\n\n## Mixing with `provideApolloClient` / `provideApolloClients`\n\nFor non-component contexts (Vue Router guards, top-level scripts), use [`provideApolloClients`](/advanced/outside-components) to make named clients available the same way:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\n\nconst cleanup = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})\n\nconst result = cleanup(() => {\n  // useQuery calls in here can use clientId\n  // ...\n})\n```\n\nSee [Outside Components](/advanced/outside-components) for the full pattern.\n\n:::: components-api\n::: warning Composition API only\n`provideApolloClients` exists to give composables an injection context they would otherwise\nlack. Components run inside a template, so they always have one and resolve `clientId`\nagainst the `ApolloClients` map the app provided.\n:::\n::::\n\n## When to reach for multiple clients\n\n| Situation | Pattern |\n|-----------|---------|\n| One API, different auth states (anonymous vs logged in) | One client, set auth headers per request through context |\n| One API, different cache policies in different parts of the app | One client, vary fetch policies per query |\n| Separate backends with their own schemas | Multiple clients |\n| Same backend, different versions or federated subgraphs reached separately | Multiple clients |\n\nMultiple clients have real costs: each has its own cache, so queries against one cannot see updates to the other. If two parts of your app talk to the same entities, keep them on one client.\n\n## Next steps\n\n- [Outside Components](/advanced/outside-components) covers `provideApolloClient` / `provideApolloClients`.\n- [Authentication](/networking/authentication) for per-request auth that does not need a separate client.\n- The [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the full resolution API.\n","isInternal":false,"tokens":1414,"sizeBytes":6157},{"name":"outside-components.md","path":"packages/docs/advanced/outside-components.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/advanced/outside-components.md","title":"Advanced Skill","category":"anthropic-skill","format":"markdown","content":"# Outside Components\n\nVue Apollo's composables rely on Vue's injection system to find the Apollo client. Inside a component's `<script setup>` (or any code that runs in a component's effect scope) the client is found through `inject(DefaultApolloClient)` automatically.\n\nOutside of that context, `useQuery` and friends have no way to resolve a client. [`provideApolloClient`](/api/composable/functions/provideApolloClient) and [`provideApolloClients`](/api/composable/functions/provideApolloClients) bridge that gap for the duration of a callback.\n\n:::: components-api\n::: warning Composition API only\nThis page is about calling composables outside a component setup: Pinia stores, route\nguards, plain modules. Components only exist inside a template, so they always have the\ninjection context and never need this.\n\nUse the `clientId` prop to pick a non-default client from a template; see\n[Multiple Clients](/advanced/multiple-clients).\n:::\n::::\n\n## When you need this\n\nYou need `provideApolloClient` when calling Vue Apollo composables from code that is **not** a component setup:\n\n- Vue Router navigation guards (`beforeEach`, `beforeEnter`).\n- Standalone scripts, utility functions, or workers.\n- Test setup code that runs outside of `mount()`.\n\nYou generally do **not** need it for:\n\n- Pinia stores. Call `useSomeStore()` from inside a component setup. The store can then use `useQuery`/`useMutation` directly because injection has already been resolved.\n- Composables called from inside a component. Injection works through nested composables.\n- Watch callbacks inside components. The component's effect scope is still active.\n\n## The pattern\n\n`provideApolloClient(client)` returns a function that runs your callback with the client available:\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nconst result = provideApolloClient(apolloClient)(() => {\n  return useQuery(gql`\n    query Me {\n      me { id name }\n    }\n  `)\n})\n```\n\n## Vue Router guards\n\nThe canonical use case: a route guard that prefetches data before navigation.\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { createRouter } from 'vue-router'\nimport { apolloClient } from './apollo'\n\nconst router = createRouter({\n  // ...routes\n})\n\nrouter.beforeEach(async (to) => {\n  if (to.meta.requiresAuth) {\n    const { current, onResult, onError } = provideApolloClient(apolloClient)(() => {\n      return useQuery(gql`\n        query CurrentUser {\n          me { id role }\n        }\n      `, {\n        fetchPolicy: 'cache-first',\n      })\n    })\n\n    // Wait for the query to complete\n    await new Promise<void>((resolve) => {\n      onResult(() => resolve())\n      onError(() => resolve())\n    })\n\n    if (!current.value.result?.me) {\n      return '/login'\n    }\n  }\n})\n```\n\n::: warning Cleanup matters\nGuards run outside any component's lifecycle, so the query has no scope to clean up against. If you start a long-running query (especially with `pollInterval` or a non-default `fetchPolicy`), it will leak.\n\nFor one-shot lookups, prefer `client.query()` directly:\n\n```ts\nconst { data } = await apolloClient.query({\n  query: CURRENT_USER,\n  fetchPolicy: 'cache-first',\n})\n```\n\n`client.query` does not subscribe and has nothing to leak. Reach for `provideApolloClient` + `useQuery` only when you need the reactive `current` ref, or when you specifically want the cache-update behavior.\n:::\n\n## Standalone helpers\n\nFor utility functions outside any Vue context (CLI tools, server scripts, workers):\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nexport function getUserOnce(id: string) {\n  return provideApolloClient(apolloClient)(() => {\n    const { onResult, onError } = useQuery(gql`\n      query User($id: ID!) {\n        user(id: $id) { id name }\n      }\n    `, {\n      variables: { id },\n    })\n\n    return new Promise<any>((resolve, reject) => {\n      onResult(data => resolve(data))\n      onError(reject)\n    })\n  })\n}\n```\n\nFor most one-off queries, `apolloClient.query(...)` directly is simpler.\n\n## Multiple clients\n\n`provideApolloClients` is the dictionary variant:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\nimport { analyticsClient, mainClient } from './apollo'\n\nprovideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  // useQuery, useMutation, etc. can resolve by clientId in here\n})\n```\n\nSee [Multiple Clients](/advanced/multiple-clients) for the full pattern.\n\n## How it works\n\n`provideApolloClient` writes the client into a module-level variable, runs your callback, then clears it. Vue Apollo's `useApolloClient` checks Vue's injection first; if there is no injection context (because you are not in a component), it falls back to the module-level variable.\n\nThis means:\n\n- The client only lives for the duration of the callback.\n- Nested calls work: if you call `provideApolloClient` inside `provideApolloClient`, the inner call wins until its callback returns.\n- It is not thread-safe across concurrent async work, because module state is shared. Do not start two independent `provideApolloClient` blocks in parallel; chain them or use a single block.\n\n## Next steps\n\n- [Multiple Clients](/advanced/multiple-clients) for the named-clients pattern.\n- [SSR Overview](/ssr/overview) for the SSR equivalent (cache extract/restore on the server).\n- [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the resolution API.\n","isInternal":false,"tokens":1298,"sizeBytes":5671},{"name":"streaming.md","path":"packages/docs/advanced/streaming.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/advanced/streaming.md","title":"Advanced Skill","category":"anthropic-skill","format":"markdown","content":"# Streaming & @defer\n\nThe `@defer` and `@stream` directives let a GraphQL server deliver a single response in multiple chunks. The client renders the first chunk immediately and updates as later chunks arrive.\n\nVue Apollo surfaces this through the `current.resultState` discriminator: while data is arriving, `resultState` is `'streaming'`; when the server finishes, it becomes `'complete'`.\n\n## When to use streaming\n\n`@defer` is useful when a query has fast and slow fields and you want to render the fast ones first:\n\n```graphql\nquery Profile($id: ID!) {\n  user(id: $id) {\n    id\n    name        # Fast: from the user table\n    ... @defer {\n      activity  # Slow: aggregates from other services\n    }\n  }\n}\n```\n\nThe browser receives `name` immediately and `activity` when it is ready. Without `@defer`, the whole query is held until every field resolves.\n\n`@stream` works the same way for lists: items arrive incrementally instead of all at once.\n\n## Configuring the client\n\n`@defer` and `@stream` need an incremental delivery handler on your Apollo Client instance. Without one, using either directive throws an error.\n\n```ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\nimport { Defer20220824Handler } from '@apollo/client/incremental'\n\nconst apolloClient = new ApolloClient({\n  cache: new InMemoryCache(),\n  link: new HttpLink({ uri: '/graphql' }),\n  incrementalHandler: new Defer20220824Handler(),\n})\n```\n\nApollo Client ships several handlers, each implementing a different incremental delivery protocol:\n\n| Handler | Protocol |\n|---------|----------|\n| `Defer20220824Handler` | Used by Apollo Router and earlier `graphql-yoga` versions |\n| `GraphQL17Alpha2Handler` | Alias for `Defer20220824Handler` |\n| `GraphQL17Alpha9Handler` | Newer `graphql` 17 alpha format |\n| `NotImplementedHandler` | Default; throws on `@defer`/`@stream` |\n\nPick the one your server supports. See [Apollo's @defer docs](https://www.apollographql.com/docs/react/data/defer) for protocol details.\n\n## Reading a streaming query\n\n:::: composition-api\n```vue\n<script setup lang=\"ts\">\nconst PROFILE: TypedDocumentNode<{ user: { id: string, name: string, activity?: Array<{ id: string, kind: string }> } }, { id: string }>\n  = gql`\n    query Profile($id: ID!) {\n      user(id: $id) {\n        id\n        name\n        ... @defer {\n          activity {\n            id\n            kind\n          }\n        }\n      }\n    }\n  `\n\nconst { current } = useQuery(PROFILE, { variables: { id: '1' } })\n</script>\n\n<template>\n  <div v-if=\"current.resultState === 'empty'\">\n    Loading...\n  </div>\n\n  <div v-else>\n    <!-- `name` is available as soon as the first chunk arrives -->\n    <h1>{{ current.result?.user.name }}</h1>\n\n    <!-- `activity` is available once the deferred chunk arrives -->\n    <div v-if=\"current.result?.user.activity\">\n      <h2>Recent activity</h2>\n      <ul>\n        <li v-for=\"entry in current.result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </div>\n    <div v-else>\n      Loading activity...\n    </div>\n  </div>\n</template>\n```\n::::\n\n:::: components-api\n`#data` renders from the first chunk onwards, so the non-deferred fields appear immediately\nand the deferred ones fill in underneath as they land:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery\n    :query=\"gql`\n      query Profile($id: ID!) {\n        user(id: $id) {\n          id\n          name\n          ... @defer {\n            activity {\n              id\n              kind\n            }\n          }\n        }\n      }\n    `\"\n    :variables=\"{ id: '1' }\"\n  >\n    <template #loading>\n      Loading...\n    </template>\n    <template #data=\"{ data }\">\n      <!-- `name` is available as soon as the first chunk arrives -->\n      <h1>{{ data.user.name }}</h1>\n\n      <!-- `activity` is available once the deferred chunk arrives -->\n      <div v-if=\"data.user.activity\">\n        <h2>Recent activity</h2>\n        <ul>\n          <li v-for=\"entry in data.user.activity\" :key=\"entry.id\">\n            {{ entry.kind }}\n          </li>\n        </ul>\n      </div>\n      <div v-else>\n        Loading activity...\n      </div>\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n`#loading` covers only the gap before the first chunk. From there `#data` stays mounted\nfor the rest of the stream.\n\nListen for `@streamingResult` if you want each chunk imperatively, and use the default\nslot when you need `resultState` itself to tell `'streaming'` from `'complete'`.\n::::\n\nThe `resultState` lifecycle for a `@defer` query:\n\n1. `'empty'` while no data has arrived.\n2. `'streaming'` after the first chunk lands. `current.result` contains the non-deferred fields. Deferred fields are still `undefined`.\n3. `'streaming'` continues to fire as more deferred chunks arrive. Fields appear as their chunks land.\n4. `'complete'` once the server signals the response is finished. All fields are populated.\n\n`loading` stays `true` through `streaming` and only becomes `false` at `complete`. `networkStatus` transitions from `loading` to `streaming` to `ready`.\n\n## Type narrowing for streaming\n\nBecause deferred fields may be absent during `streaming`, their TypeScript types should reflect that. With GraphQL Codegen, this happens automatically through the `Incremental` / `Streaming` type helpers. With manual `TypedDocumentNode`, mark deferred fields as optional in your `TData` type.\n\n:::: composition-api\nInside your component:\n\n```ts\nif (current.value.resultState === 'streaming' || current.value.resultState === 'complete') {\n  // current.value.result is defined\n  console.log(current.value.result.user.name)\n}\n```\n\nOr be more specific:\n\n```ts\nif (current.value.resultState === 'complete') {\n  // All fields, including deferred ones, are present\n  console.log(current.value.result.user.activity)\n}\n```\n::::\n\n:::: components-api\nThe default slot hands you the same discriminated union, so `resultState` narrows `result`\nin the template exactly as it does in script. See\n[Two ways to read the result](/data/queries#two-ways-to-read-the-result) for how the two\nrendering modes differ:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery v-slot=\"{ result, resultState }\" :query=\"Profile\" :variables=\"{ id: '1' }\">\n    <template v-if=\"resultState === 'streaming' || resultState === 'complete'\">\n      <!-- Non-deferred fields are there from the first chunk -->\n      <h1>{{ result.user.name }}</h1>\n\n      <!-- Deferred fields are only guaranteed once the state reaches `complete` -->\n      <ul v-if=\"resultState === 'complete' && result.user.activity\">\n        <li v-for=\"entry in result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </template>\n  </ApolloQuery>\n</template>\n```\n::::\n\n## Combining with Suspense\n\nBy default, `await useQuery()` resolves as soon as the first chunk lands. The component renders with partial data, then re-renders as more arrives.\n\nIf you want Suspense to wait for the entire stream to complete (so the first render has all the data), set `awaitComplete: true`:\n\n```vue\n<script setup lang=\"ts\">\nimport { gql } from '@apollo/client'\nimport { useQuery } from '@vue/apollo-composable'\n\nconst { current } = await useQuery(PROFILE_QUERY, {\n  variables: { id: '1' },\n  awaitComplete: true, // Wait for `resultState === 'complete'`\n})\n</script>\n```\n\nUse this carefully: it negates the latency benefit of `@defer`. Most of the time, you want the default (render fast, fill in slow) and only opt into `awaitComplete` for screens where partial data would be misleading.\n\n:::: components-api\n`awaitComplete` reaches the component through `options`, and it still governs SSR prefetch\nthere, so the server waits for the whole response before rendering:\n\n```vue-html\n<ApolloQuery :query=\"GetProfile\" :options=\"{ awaitComplete: true }\">\n```\n\nOn the client it has nothing to act on, because `<ApolloQuery>` cannot suspend. The slots\nrender as chunks land either way. See [Suspense](/data/suspense) for why.\n::::\n\n## Refetching a streaming query\n\nRefetching a `@defer` query goes through the streaming lifecycle again. The previous `result` stays available while the new response streams in. `networkStatus` reports `refetch` initially, then `streaming`, then `ready`.\n\nSee [Apollo's data merging tables](https://www.apollographql.com/docs/react/data/defer#loading-networkstatus-datastate-and-data-merging) for the exact transitions during refetch.\n\n## `@stream` for lists\n\n`@stream` works on list fields:\n\n```graphql\nquery Alphabet {\n  letters @stream(initialCount: 0)\n}\n```\n\n:::: composition-api\nThe server can send letters one by one. `current.result.letters` grows as items arrive:\n\n```ts\nconst { current } = useQuery(ALPHABET)\n\nwatch(() => current.value.result?.letters, (letters) => {\n  console.log(letters) // ['a'], ['a', 'b'], ['a', 'b', 'c'], ...\n})\n```\n::::\n\n:::: components-api\nThe list grows in place, so a `v-for` inside `#data` simply re-renders as each chunk lands.\n::::\n\n`@stream` shares the same `resultState` transitions as `@defer`.\n\n## Next steps\n\n- [Suspense](/data/suspense) covers `awaitComplete` and the SSR interaction.\n- [Queries](/data/queries) covers the basics of `useQuery` and `resultState`.\n- Apollo's [@defer reference](https://www.apollographql.com/docs/react/data/defer) covers the full protocol.\n","isInternal":false,"tokens":2330,"sizeBytes":9424},{"name":"ApolloFragment.md","path":"packages/docs/api/components/ApolloFragment.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/components/ApolloFragment.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"# ApolloFragment\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `fragment` *(required)* | `DocumentNode \\| TypedDocumentNode<TData, TVariables>` | &nbsp; | A GraphQL fragment document. |\n| `from` *(required)* | `NonNullable<useFragment.FromValue<TData>>` | &nbsp; | Cache identifiable entity to read the fragment from.<br><br>Accepts a masked object from a parent query, a `{ __ref }` reference, or a cache ID string. |\n| `fragmentName` | `string \\| undefined` | &nbsp; | Name of the fragment to use, when the document declares more than one. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables used when reading the fragment. |\n| `optimistic` | `boolean \\| undefined` | &nbsp; | Read from optimistic cache data. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useFragment.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useFragment` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `nextState` | `[state: RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` has every field.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n\n### `#incomplete`\n\nShown while fields are still missing from the cache. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `DeepPartial<TData>` |\n| `missing` | `MissingTree \\| undefined` |\n\n### `#default`\n\nRaw mode. Receives the flattened fragment state.\n\nRendered in both modes, so nested children still mount.\n\nReceives `RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">`.\n\n## Exposed\n\nA template ref receives the full [`useFragment.Result`](/api/composable/@vue/namespaces/useFragment/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloFragment ref=\"apollo\" ... />\n</template>\n```\n","isInternal":false,"tokens":562,"sizeBytes":2100},{"name":"ApolloMutation.md","path":"packages/docs/api/components/ApolloMutation.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/components/ApolloMutation.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"# ApolloMutation\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `mutation` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The mutation document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables applied to every call, unless overridden in `mutate()`. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useMutation.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useMutation` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n| `done` | `[result: ApolloClient.MutateResult<MaybeMasked<TData>>]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `mutate` | `useMutation.MutateFunction<TData, TVariables>` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `called` | `boolean` |\n| `result` | `TData \\| null \\| undefined` |\n| `reset` | `() => void` |\n\n## Exposed\n\nA template ref receives the full [`useMutation.Result`](/api/composable/@vue/namespaces/useMutation/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloMutation ref=\"apollo\" ... />\n</template>\n```\n","isInternal":false,"tokens":370,"sizeBytes":1303},{"name":"ApolloQuery.md","path":"packages/docs/api/components/ApolloQuery.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/components/ApolloQuery.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"# ApolloQuery\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `query` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The query document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the query. |\n| `disabled` | `boolean \\| undefined` | `false` | Skip execution until a condition is met. |\n| `fetchPolicy` | `useQuery.Options<TData, TVariables>[\"fetchPolicy\"] \\| undefined` | &nbsp; | How the query reads from and writes to the cache. |\n| `pollInterval` | `number \\| undefined` | &nbsp; | Refetch every N milliseconds. |\n| `debounce` | `number \\| undefined` | &nbsp; | Delay variable updates (ms). `loading` covers the window. |\n| `throttle` | `number \\| undefined` | &nbsp; | Throttle variable updates (ms). `loading` covers the window. |\n| `keepPreviousResult` | `boolean \\| undefined` | &nbsp; | Keep the previous result on screen while new variables are in flight.<br><br>Off by default, as in `useQuery`. Opt in for search and pagination, where clearing the list on every change flickers. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `empty` | `((data: TData) => boolean) \\| undefined` | &nbsp; | Decides whether a result counts as empty, selecting the `#empty` slot.<br><br>Without it `#empty` is never used, so `#data` handles the empty case itself. |\n| `options` | `useQuery.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useQuery` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `completeResult` | `[data: TData]` |\n| `partialResult` | `[data: TData]` |\n| `streamingResult` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `nextState` | `[state: useQuery.Current<TData, \"empty\" \\| \"complete\" \\| \"streaming\" \\| \"partial\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` is never undefined.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n| `error` | `ErrorLike \\| undefined` |\n| `isPreviousResult` | `boolean` |\n| `loading` | `boolean` |\n| `pending` | `boolean` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n| `fetchMore` | `<TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(options: ObservableQuery.FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<RenameKey<ApolloClient.QueryResult<TFetchData>, \"data\", \"result\">> \\| undefined` |\n\n### `#loading`\n\nShown while the first result is loading. Opinionated mode only.\n\nNo slot props.\n\n### `#error`\n\nShown when the query failed and there is nothing to display. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `error` | `ErrorLike` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n\n### `#empty`\n\nShown when the `empty` prop returns `true`, and as the last branch when the query\nsettles with nothing to show. Without the `empty` prop, `#data` owns the empty result.\n\nNo slot props.\n\n### `#default`\n\nRaw mode. Receives the flattened query state and its methods.\n\nRendered in both modes, so nested renderless children still mount.\n\nReceives `useQuery.Current<MaybeMasked<TData>> & Pick<Query, 'refetch' \\| 'fetchMore' \\| 'updateQuery' \\| 'subscribeToMore' \\| 'start' \\| 'stop' \\| 'restart'>`.\n\nEvery field of [`useQuery.Current`](/api/composable/@vue/namespaces/useQuery/interfaces/Current) is present, so `resultState` narrows `result` here exactly as it does in script.\n\n## Exposed\n\nA template ref receives the full [`useQuery.Result`](/api/composable/@vue/namespaces/useQuery/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloQuery ref=\"apollo\" ... />\n</template>\n```\n","isInternal":false,"tokens":1087,"sizeBytes":3942},{"name":"ApolloSubscribeToMore.md","path":"packages/docs/api/components/ApolloSubscribeToMore.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/components/ApolloSubscribeToMore.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"# ApolloSubscribeToMore\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `document` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `updateQuery` | `SubscribeToMoreUpdateQueryFn<any, any, TData> \\| undefined` | &nbsp; | Merges incoming subscription data into the parent query's result. |\n| `context` | `DefaultContext \\| undefined` | &nbsp; | Context passed to the link chain for this subscription. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n","isInternal":false,"tokens":189,"sizeBytes":713},{"name":"ApolloSubscription.md","path":"packages/docs/api/components/ApolloSubscription.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/components/ApolloSubscription.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"# ApolloSubscription\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `subscription` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `disabled` | `boolean \\| undefined` | `false` | Stop the subscription. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useSubscription.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useSubscription` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `complete` | `[]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `result` | `TData \\| undefined` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `start` | `() => void` |\n| `stop` | `() => void` |\n| `restart` | `() => Promise<void>` |\n\n## Exposed\n\nA template ref receives the full [`useSubscription.Result`](/api/composable/@vue/namespaces/useSubscription/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloSubscription ref=\"apollo\" ... />\n</template>\n```\n","isInternal":false,"tokens":371,"sizeBytes":1326},{"name":"index.md","path":"packages/docs/api/components/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/components/index.md","title":"Components Skill","category":"anthropic-skill","format":"markdown","content":"# Components API\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n- [ApolloQuery](./ApolloQuery)\n- [ApolloMutation](./ApolloMutation)\n- [ApolloSubscription](./ApolloSubscription)\n- [ApolloSubscribeToMore](./ApolloSubscribeToMore)\n- [ApolloFragment](./ApolloFragment)\n","isInternal":false,"tokens":70,"sizeBytes":286},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/provideApolloClient/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/provideApolloClient/index.md","title":"ProvideApolloClient Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / provideApolloClient\n\n# provideApolloClient\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n","isInternal":false,"tokens":48,"sizeBytes":181},{"name":"Callback.md","path":"packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Callback.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Callback.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Returns\n\n`any`\n","isInternal":false,"tokens":62,"sizeBytes":257},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Result.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n","isInternal":false,"tokens":77,"sizeBytes":312},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/provideApolloClients/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/provideApolloClients/index.md","title":"ProvideApolloClients Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / provideApolloClients\n\n# provideApolloClients\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n","isInternal":false,"tokens":48,"sizeBytes":183},{"name":"Callback.md","path":"packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Callback.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Callback.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Returns\n\n`any`\n","isInternal":false,"tokens":62,"sizeBytes":260},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Result.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n","isInternal":false,"tokens":77,"sizeBytes":315},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/useApolloClient/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useApolloClient/index.md","title":"UseApolloClient Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / useApolloClient\n\n# useApolloClient\n\n## Interfaces\n\n- [Result](interfaces/Result.md)\n","isInternal":false,"tokens":33,"sizeBytes":130},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/useApolloClient/interfaces/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useApolloClient/interfaces/Result.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useApolloClient](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useApolloClient.\n\n## Properties\n\n### client\n\n> `readonly` **client**: [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance.\n\n***\n\n### resolveClient()\n\n> **resolveClient**: (`clientId?`) => [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nResolves an ApolloClient by ID.\n\n#### Parameters\n\n##### clientId?\n\n`string`\n\nThe client ID to resolve. If omitted, resolves the default client.\n\n#### Returns\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\n","isInternal":false,"tokens":166,"sizeBytes":697},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/useFragment/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useFragment/index.md","title":"UseFragment Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / useFragment\n\n# useFragment\n\n## Type Aliases\n\n- [FromValue](type-aliases/FromValue.md)\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","isInternal":false,"tokens":84,"sizeBytes":326},{"name":"Current.md","path":"packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Current.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Current.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Current\n\n# Interface: Current\n\nCurrent state\n\n## 1. Operation data\n\n### complete\n\n> **complete**: `boolean`\n\nWhether the fragment data is complete.\n\n***\n\n### missing?\n\n> `optional` **missing**: `MissingTree`\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: `object` \\| `object`[]\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"`\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n","isInternal":false,"tokens":192,"sizeBytes":839},{"name":"Options.md","path":"packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Options.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Options.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Options\n\n# Interface: Options\n\nOptions for useFragment.\n\n## 1. Fragment\n\n### fragment\n\n> **fragment**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`DocumentNode`\\>\n\nA GraphQL fragment document.\n\n***\n\n### fragmentName?\n\n> `optional` **fragmentName**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`string`\\>\n\nName of the fragment to use if document contains multiple fragments.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\\>\n\nVariables for the fragment.\n\n## 2. Data Source\n\n### from\n\n> **from**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`FromValue`](../type-aliases/FromValue.md) \\| [`FromValue`](../type-aliases/FromValue.md)[]\\>\n\nCache identifiable entity to read the fragment from.\n\n## 3. Configuration\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use.\n\n***\n\n### optimistic?\n\n> `optional` **optimistic**: `boolean`\n\nRead from optimistic cache data.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n","isInternal":false,"tokens":316,"sizeBytes":1282},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Result.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useFragment.\n\n## 1. Operation data\n\n### complete\n\n> **complete**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nWhether the fragment data is complete.\n\n***\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### missing\n\n> **missing**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`MissingTree`\\>\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `object`[]\\>\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`\"complete\"` \\| `\"partial\"`\\>\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n\n## 2. Events\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when fragment data changes.\n","isInternal":false,"tokens":351,"sizeBytes":1443},{"name":"FromValue.md","path":"packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/FromValue.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/FromValue.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / FromValue\n\n# Type Alias: FromValue\n\n> **FromValue** = `object` \\| `string` \\| `null`\n\nCache identifier: object with `__typename`/`id`, `{ __ref }` reference, or string ID.\n","isInternal":false,"tokens":72,"sizeBytes":250},{"name":"ReactiveVariablesParameter.md","path":"packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/ReactiveVariablesParameter.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/ReactiveVariablesParameter.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseFragment({ fragment, from, variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseFragment({ fragment, from, variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseFragment({ fragment, from, variables: () => ({ id }) })\n```\n","isInternal":false,"tokens":236,"sizeBytes":974},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/useLazyQuery/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useLazyQuery/index.md","title":"UseLazyQuery Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / useLazyQuery\n\n# useLazyQuery\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","isInternal":false,"tokens":42,"sizeBytes":159},{"name":"Options.md","path":"packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useLazyQuery - same as useQuery but `enabled` is not applicable.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../../useQuery/type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n","isInternal":false,"tokens":1019,"sizeBytes":4511},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useLazyQuery - extends useQuery.Result with `load` function.\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](../../useQuery/interfaces/Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### load()\n\n> **load**: (`variables?`) => `Promise`\\<`object` \\| `undefined`\\>\n\nLoad the query. Starts the query if not already started.\n\nUnlike `useQuery`, which executes immediately, `useLazyQuery` waits until `load()` is called. After loading, the query behaves like a normal `useQuery`.\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this load. If provided, these will be merged with any variables from options.\n\n#### Returns\n\n`Promise`\\<`object` \\| `undefined`\\>\n\nPromise resolving to the query result data when complete.\n\n#### Example\n\n```ts\nconst { load, result, loading } = useLazyQuery(GetUser)\n\n// Query doesn't execute until load() is called\nasync function fetchUser(id: string) {\n  const data = await load({ id })\n  console.log('User loaded:', data)\n}\n```\n\n***\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](../../useQuery/interfaces/FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](../../useQuery/interfaces/SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n\n","isInternal":false,"tokens":2817,"sizeBytes":11909},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/useMutation/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useMutation/index.md","title":"UseMutation Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / useMutation\n\n# useMutation\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [MutateOptions](interfaces/MutateOptions.md)\n- [MutateResult](interfaces/MutateResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","isInternal":false,"tokens":88,"sizeBytes":342},{"name":"MutateOptions.md","path":"packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateOptions.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateOptions.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateOptions\n\n# Interface: MutateOptions\n\nOptions when calling the mutate function.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nVariables for this mutation call.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext` \\| (`composableContext`) => `DefaultContext`\n\nContext can be a callback or object.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n","isInternal":false,"tokens":817,"sizeBytes":3623},{"name":"MutateResult.md","path":"packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateResult.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateResult.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateResult\n\n# Interface: MutateResult\n\nMutation result returned from mutate().\n\n## Properties\n\n### data\n\n> **data**: `object` \\| `undefined`\n\nThe mutation result data.\n\n***\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nError if mutation failed.\n\n***\n\n### extensions?\n\n> `optional` **extensions**: `Record`\\<`string`, `unknown`\\>\n\nCustom extensions returned from the GraphQL server.\n","isInternal":false,"tokens":111,"sizeBytes":466},{"name":"Options.md","path":"packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Options.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Options.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / Options\n\n# Interface: Options\n\nOptions for useMutation.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your mutation requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\nSupports reactive variables - provide a ref, getter, or object with reactive properties.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n## 4. Vue-Apollo\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### throws?\n\n> `optional` **throws**: `\"auto\"` \\| `\"always\"` \\| `\"never\"`\n\nControls error throwing behavior.\n\n- `'auto'` (default): Throws if no `onError` handler is registered\n\n- `'always'`: Always throws errors\n\n- `'never'`: Never throws errors\n\n#### Default\n\n```ts\n'auto'\n```\n","isInternal":false,"tokens":1006,"sizeBytes":4426},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/Result.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useMutation.\n\n## 1. Mutation\n\n### mutate()\n\n> **mutate**: (`options?`) => `Promise`\\<[`MutateResult`](MutateResult.md)\\>\n\nCall the mutation with optional variables and override options.\n\n#### Parameters\n\n##### options?\n\n[`MutateOptions`](MutateOptions.md)\n\nVariables and options for this mutation call.\n\n#### Returns\n\n`Promise`\\<[`MutateResult`](MutateResult.md)\\>\n\nPromise resolving to the mutation result.\n\n#### Example\n\n```ts\nconst { mutate } = useMutation(AddTodo)\n\n// Call with variables\nconst result = await mutate({ variables: { text: 'New todo' } })\n\n// With optimistic response\nawait mutate({\n  variables: { text: 'New todo' },\n  optimisticResponse: {\n    addTodo: { __typename: 'Todo', id: 'temp', text: 'New todo', completed: false }\n  }\n})\n```\n\n## 2. Operation data\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nIf the mutation produces one or more errors, this object contains either an array of `graphQLErrors` or a single `networkError`. Otherwise, this value is `undefined`.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null` \\| `undefined`\\>\n\nThe data returned from your mutation. Can be `undefined` if `errorPolicy` is `all` or `ignore` and the server returns a GraphQL response with `errors` but not `data`, or a network error is returned.\n\n## 3. Network info\n\n### called\n\n> **called**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the mutation's mutate function has been called.\n\n***\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the mutation is currently in flight.\n\n## 4. Lifecycle\n\n### reset()\n\n> **reset**: () => `void`\n\nReset the mutation's result to its initial, uncalled state.\n\n#### Returns\n\n`void`\n\n## 5. Events\n\n### onDone\n\n> **onDone**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`MutateResult`](MutateResult.md)\\>\n\nEvent triggered when the mutation completes successfully.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when the mutation encounters an error.\n\n## 6. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being mutated.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md) \\| `undefined`\\>\n\nCurrent options.\n","isInternal":false,"tokens":679,"sizeBytes":2678},{"name":"ReactiveVariablesParameter.md","path":"packages/docs/api/composable/@vue/namespaces/useMutation/type-aliases/ReactiveVariablesParameter.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useMutation/type-aliases/ReactiveVariablesParameter.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ text: 'Hello' })\nuseMutation(mutation, { variables })\n\n// Object mapping individual variable names to refs/getters\nconst text = ref('Hello')\nuseMutation(mutation, { variables: { text } })\n```\n","isInternal":false,"tokens":199,"sizeBytes":838},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/index.md","title":"UseQuery Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / useQuery\n\n# useQuery\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [FetchMoreOptions](interfaces/FetchMoreOptions.md)\n- [FetchMoreResult](interfaces/FetchMoreResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n- [SubscribeToMoreOptions](interfaces/SubscribeToMoreOptions.md)\n","isInternal":false,"tokens":112,"sizeBytes":448},{"name":"Current.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Current.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Current.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Current\n\n# Interface: Current\n\nCurrent state.\n\n## 1. Operation data\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nA single ErrorLike object describing the error that occurred during the latest\nquery execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: `boolean`\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### ~~partial~~\n\n> **partial**: `boolean`\n\nDescribes whether `result` is a complete or partial result. This flag is only\nset when `returnPartialData` is `true` in query options.\n\n#### Deprecated\n\nThis field will be removed in a future version of Apollo Client.\n\n***\n\n### result\n\n> **result**: `object` \\| `null` \\| `undefined`\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"` \\| `\"empty\"` \\| `\"streaming\"`\n\nDescribes the completeness of `result`.\n\n- `empty`: No data could be fulfilled from the cache or the result is\n  incomplete. `result` is `undefined`.\n- `partial`: Some data could be fulfilled from the cache but `result` is\n  incomplete. This is only possible when `returnPartialData` is `true`.\n- `streaming`: `result` is incomplete as a result of a deferred query and\n  the result is still streaming in.\n- `complete`: `result` is a fully satisfied query result fulfilled\n  either from the cache or network.\n\n## 2. Network info\n\n### loading\n\n> **loading**: `boolean`\n\nIf `true`, the query is busy. That covers a request in flight, new variables\nwaiting out the `debounce`/`throttle` timer, and the hand-over in between, where\nthe variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: `NetworkStatus`\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: `boolean`\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n","isInternal":false,"tokens":745,"sizeBytes":3112},{"name":"FetchMoreOptions.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreOptions.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreOptions.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / FetchMoreOptions\n\n# Interface: FetchMoreOptions\n\nOptions for fetchMore.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### query?\n\n> `optional` **query**: `DocumentNode`\n\nA GraphQL query string parsed into an AST with the gql template literal.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Query methods\n\n### updateQuery()?\n\n> `optional` **updateQuery**: (`previousQueryResult`, `options`) => `object`\n\nA function which updates the query result with the new fetchMore result.\n\n#### Parameters\n\n##### previousQueryResult\n\n`object`\n\n##### options\n\n###### fetchMoreResult\n\n`object`\n\n###### variables\n\n`object`\n\n#### Returns\n\n`object`\n","isInternal":false,"tokens":352,"sizeBytes":1591},{"name":"FetchMoreResult.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreResult.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/FetchMoreResult.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / FetchMoreResult\n\n# Interface: FetchMoreResult\n\nFetchMore result with Vue-Apollo naming.\n\n## 1. Operation data\n\n### error?\n\n> `optional` **error**: `ErrorLike`\n\nA single ErrorLike object describing the error that occurred during the latest\nquery execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### result\n\n> **result**: `object` \\| `null` \\| `undefined`\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n","isInternal":false,"tokens":165,"sizeBytes":707},{"name":"Options.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Options.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Options.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useQuery.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### enabled?\n\n> `optional` **enabled**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`boolean` \\| `undefined`\\>\n\nReactive flag to enable/disable the query.\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n","isInternal":false,"tokens":1052,"sizeBytes":4638},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/Result.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useQuery.\n\n## Extended by\n\n- [`Result`](../../useLazyQuery/interfaces/Result.md)\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n","isInternal":false,"tokens":2597,"sizeBytes":10927},{"name":"SubscribeToMoreOptions.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/SubscribeToMoreOptions.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/interfaces/SubscribeToMoreOptions.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / SubscribeToMoreOptions\n\n# Interface: SubscribeToMoreOptions\n\nOptions for subscribeToMore.\n\n## 1. Operation options\n\n### document\n\n> **document**: `DocumentNode`\n\nA GraphQL subscription document parsed into an AST with the gql template literal.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nAn object containing all of the GraphQL variables your subscription requires to execute.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n## 3. Query methods\n\n### onError()?\n\n> `optional` **onError**: (`error`) => `void`\n\nA callback function that's called when the subscription encounters an error.\n\n#### Parameters\n\n##### error\n\n`Error`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQuery()?\n\n> `optional` **updateQuery**: (`unsafePreviousData`, `options`) => `object`\n\nA function that defines how incoming subscription data is merged with the existing query data.\n\n::: warning First argument is deprecated\n\nThe first argument (`unsafePreviousData`) is not type-safe and may contain partial data.\nIt will be removed in Apollo Client v5. Use `options.previousData` instead.\n\n:::\n\n#### Parameters\n\n##### unsafePreviousData\n\n`object`\n\n##### options\n\n###### previousData\n\n`object`\n\n###### subscriptionData\n\n\\{ `data`: `object`; \\}\n\n###### subscriptionData.data\n\n`object`\n\n#### Returns\n\n`object`\n","isInternal":false,"tokens":358,"sizeBytes":1602},{"name":"ReactiveVariablesParameter.md","path":"packages/docs/api/composable/@vue/namespaces/useQuery/type-aliases/ReactiveVariablesParameter.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useQuery/type-aliases/ReactiveVariablesParameter.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useQuery](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseQuery(query, { variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseQuery(query, { variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseQuery(query, { variables: () => ({ id }) })\n```\n","isInternal":false,"tokens":230,"sizeBytes":935},{"name":"index.md","path":"packages/docs/api/composable/@vue/namespaces/useSubscription/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useSubscription/index.md","title":"UseSubscription Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../index.md) / useSubscription\n\n# useSubscription\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n","isInternal":false,"tokens":62,"sizeBytes":258},{"name":"Options.md","path":"packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Options.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Options.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / Options\n\n# Interface: Options\n\nOptions for useSubscription.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies the `ErrorPolicy` to be used for this operation.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your subscription requires to execute.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nShared context between your component and your network interface (Apollo Link).\n\n***\n\n### extensions?\n\n> `optional` **extensions**: `Record`\\<`string`, `unknown`\\>\n\nExtensions to be passed to the subscription.\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `FetchPolicy`\n\nHow you want your component to interact with the Apollo cache.\n\n## 4. Vue-Apollo\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### enabled?\n\n> `optional` **enabled**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`boolean`\\>\n\nReactive flag to enable/disable the subscription.\n\n***\n\n### shouldResubscribe?\n\n> `optional` **shouldResubscribe**: `boolean` \\| (`options`) => `boolean`\n\nDetermines if your subscription should be unsubscribed and subscribed again when an input to the composable (such as `subscription` or `variables`) changes.\n\n#### Default\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n","isInternal":false,"tokens":403,"sizeBytes":1745},{"name":"Result.md","path":"packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Result.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useSubscription/interfaces/Result.md","title":"Interfaces Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useSubscription.\n\n## 1. Operation data\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA runtime error with `graphQLErrors` and `networkError` properties.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `undefined`\\>\n\nAn object containing the result of your GraphQL subscription. Defaults to `undefined`.\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nA boolean that indicates whether any initial data has been returned. `true` until the first subscription event is received.\n\n## 3. Lifecycle\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nDisconnect and reconnect the subscription.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the subscription. Has no effect if already active or `enabled` is false.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the subscription. Can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 4. Events\n\n### onComplete\n\n> **onComplete**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`void`\\>\n\nEvent triggered when the subscription completes.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a subscription error occurs.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when subscription data is received.\n\n## 5. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being subscribed to.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](Options.md) \\| `undefined`\\>\n\nCurrent options.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the subscription (after debounce/throttle).\n","isInternal":false,"tokens":553,"sizeBytes":2278},{"name":"ReactiveVariablesParameter.md","path":"packages/docs/api/composable/@vue/namespaces/useSubscription/type-aliases/ReactiveVariablesParameter.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/@vue/namespaces/useSubscription/type-aliases/ReactiveVariablesParameter.md","title":"Type-aliases Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../../../../index.md) / [useSubscription](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`unknown`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n","isInternal":false,"tokens":133,"sizeBytes":567},{"name":"provideApolloClient.md","path":"packages/docs/api/composable/functions/provideApolloClient.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/provideApolloClient.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../index.md) / provideApolloClient\n\n# Function: provideApolloClient()\n\n> **provideApolloClient**(`client`): [`Result`](../@vue/namespaces/provideApolloClient/type-aliases/Result.md)\n\nProvides an ApolloClient for use outside Vue's injection context.\n\n## Parameters\n\n### client\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance to provide.\n\n## Returns\n\n[`Result`](../@vue/namespaces/provideApolloClient/type-aliases/Result.md)\n\nA function that executes a callback with the client available.\n\n## Example\n\n```ts\nconst { current } = provideApolloClient(client)(() => {\n  return useQuery(MyQuery)\n})\n```\n","isInternal":false,"tokens":162,"sizeBytes":682},{"name":"provideApolloClients.md","path":"packages/docs/api/composable/functions/provideApolloClients.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/provideApolloClients.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../index.md) / provideApolloClients\n\n# Function: provideApolloClients()\n\n> **provideApolloClients**(`clients`): [`Result`](../@vue/namespaces/provideApolloClients/type-aliases/Result.md)\n\nProvides multiple named ApolloClient instances for use outside Vue's injection context.\n\n## Parameters\n\n### clients\n\n`useApolloClient.ClientDict`\n\nDictionary mapping client IDs to ApolloClient instances.\n\n## Returns\n\n[`Result`](../@vue/namespaces/provideApolloClients/type-aliases/Result.md)\n\nA function that executes a callback with the clients available.\n\n## Example\n\n```ts\nconst { current } = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  return useQuery(MyQuery, { clientId: 'analytics' })\n})\n```\n","isInternal":false,"tokens":171,"sizeBytes":757},{"name":"useApolloClient.md","path":"packages/docs/api/composable/functions/useApolloClient.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useApolloClient.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../index.md) / useApolloClient\n\n# Function: useApolloClient()\n\n> **useApolloClient**(`clientId?`): [`Result`](../@vue/namespaces/useApolloClient/interfaces/Result.md)\n\nComposable to access ApolloClient instances.\n\nMust be provided using [DefaultApolloClient](../variables/DefaultApolloClient.md) or [ApolloClients](../variables/ApolloClients.md). Alternatively, can be used inside a [provideApolloClient](../@vue/namespaces/provideApolloClient/index.md) or [provideApolloClients](../@vue/namespaces/provideApolloClients/index.md) context.\n\n## Parameters\n\n### clientId?\n\n`string`\n\nClient ID to resolve. Defaults to the default client.\n\n## Returns\n\n[`Result`](../@vue/namespaces/useApolloClient/interfaces/Result.md)\n\nObject with `client` property.\n\n## Example\n\n```ts\n// Get the default client\nconst { client } = useApolloClient()\n\n// Get a named client\nconst { client } = useApolloClient('analytics')\n```\n","isInternal":false,"tokens":221,"sizeBytes":929},{"name":"useFragment.md","path":"packages/docs/api/composable/functions/useFragment.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useFragment.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"[@vue/apollo-composable](../index.md) / useFragment\n\n# Function: useFragment()\n\n> **useFragment**(`options`): [`Result`](../@vue/namespaces/useFragment/interfaces/Result.md)\n\nA composable for reading fragment data from the Apollo cache with full reactivity.\n\nWatches fragment data and automatically updates when the cache changes. Supports both single entities and arrays of entities.\n\n::: danger Note\n\nThis only works for data that can be identified by the cache via `cache.identify()`. Entities must have a unique cache ID (typically `__typename` + `id`).\n\n:::\n\n## Parameters\n\n### options\n\n[`Options`](../@vue/namespaces/useFragment/interfaces/Options.md)\n\nConfiguration options for the fragment.\n\n## Returns\n\n[`Result`](../@vue/namespaces/useFragment/interfaces/Result.md)\n\nFragment result object with reactive refs.\n\n## Example\n\n```ts\nconst { current } = useFragment({\n  fragment: gql`fragment UserFields on User { id name }`,\n  from: { __typename: 'User', id: '1' },\n})\n```\n\n## See\n\n - [Apollo Client watchFragment API](https://www.apollographql.com/docs/react/api/cache/InMemoryCache#watchfragment)\n - [Obtaining an object's cache ID](https://www.apollographql.com/docs/react/caching/cache-interaction#obtaining-an-objects-cache-id)\n","isInternal":false,"tokens":298,"sizeBytes":1239},{"name":"useGlobalMutationLoading.md","path":"packages/docs/api/composable/functions/useGlobalMutationLoading.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useGlobalMutationLoading.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalMutationLoading.md -->","isInternal":false,"tokens":96,"sizeBytes":421},{"name":"useGlobalQueryLoading.md","path":"packages/docs/api/composable/functions/useGlobalQueryLoading.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useGlobalQueryLoading.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalQueryLoading.md -->","isInternal":false,"tokens":183,"sizeBytes":750},{"name":"useGlobalSubscriptionLoading.md","path":"packages/docs/api/composable/functions/useGlobalSubscriptionLoading.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useGlobalSubscriptionLoading.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseGlobalSubscriptionLoading.md -->","isInternal":false,"tokens":96,"sizeBytes":444},{"name":"useLazyQuery.md","path":"packages/docs/api/composable/functions/useLazyQuery.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useLazyQuery.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseLazyQuery.md -->","isInternal":false,"tokens":408,"sizeBytes":1601},{"name":"useMutation.md","path":"packages/docs/api/composable/functions/useMutation.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useMutation.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseMutation.md -->","isInternal":false,"tokens":370,"sizeBytes":1461},{"name":"useMutationLoading.md","path":"packages/docs/api/composable/functions/useMutationLoading.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useMutationLoading.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseMutationLoading.md -->","isInternal":false,"tokens":183,"sizeBytes":771},{"name":"useQuery.md","path":"packages/docs/api/composable/functions/useQuery.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useQuery.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseQuery.md -->","isInternal":false,"tokens":352,"sizeBytes":1318},{"name":"useQueryLoading.md","path":"packages/docs/api/composable/functions/useQueryLoading.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useQueryLoading.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseQueryLoading.md -->","isInternal":false,"tokens":216,"sizeBytes":855},{"name":"useSubscription.md","path":"packages/docs/api/composable/functions/useSubscription.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useSubscription.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseSubscription.md -->","isInternal":false,"tokens":353,"sizeBytes":1454},{"name":"useSubscriptionLoading.md","path":"packages/docs/api/composable/functions/useSubscriptionLoading.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/functions/useSubscriptionLoading.md","title":"Functions Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ffunctions%2FuseSubscriptionLoading.md -->","isInternal":false,"tokens":173,"sizeBytes":788},{"name":"index.md","path":"packages/docs/api/composable/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/index.md","title":"Composable Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Findex.md -->","isInternal":false,"tokens":366,"sizeBytes":1545},{"name":"typedoc-sidebar.json","path":"packages/docs/api/composable/typedoc-sidebar.json","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/typedoc-sidebar.json","title":"Composable Skill","category":"anthropic-skill","format":"json","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Ftypedoc-sidebar.json -->","isInternal":false,"tokens":1373,"sizeBytes":5983},{"name":"ApolloClients.md","path":"packages/docs/api/composable/variables/ApolloClients.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/variables/ApolloClients.md","title":"Variables Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Fvariables%2FApolloClients.md -->","isInternal":false,"tokens":120,"sizeBytes":503},{"name":"DefaultApolloClient.md","path":"packages/docs/api/composable/variables/DefaultApolloClient.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/composable/variables/DefaultApolloClient.md","title":"Variables Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Fcomposable%2Fvariables%2FDefaultApolloClient.md -->","isInternal":false,"tokens":103,"sizeBytes":442},{"name":"index.md","path":"packages/docs/api/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/api/index.md","title":"Api Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fapi%2Findex.md -->","isInternal":false,"tokens":708,"sizeBytes":2862},{"name":"cache-updates.md","path":"packages/docs/caching/cache-updates.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/caching/cache-updates.md","title":"Caching Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Fcache-updates.md -->","isInternal":false,"tokens":1804,"sizeBytes":7768},{"name":"interaction.md","path":"packages/docs/caching/interaction.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/caching/interaction.md","title":"Caching Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Finteraction.md -->","isInternal":false,"tokens":1568,"sizeBytes":6603},{"name":"optimistic-ui.md","path":"packages/docs/caching/optimistic-ui.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/caching/optimistic-ui.md","title":"Caching Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Foptimistic-ui.md -->","isInternal":false,"tokens":1351,"sizeBytes":6013},{"name":"overview.md","path":"packages/docs/caching/overview.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/caching/overview.md","title":"Caching Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fcaching%2Foverview.md -->","isInternal":false,"tokens":1831,"sizeBytes":7729},{"name":"data-masking.md","path":"packages/docs/data/data-masking.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/data-masking.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fdata-masking.md -->","isInternal":false,"tokens":1904,"sizeBytes":7957},{"name":"error-handling.md","path":"packages/docs/data/error-handling.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/error-handling.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ferror-handling.md -->","isInternal":false,"tokens":4502,"sizeBytes":18130},{"name":"fragments.md","path":"packages/docs/data/fragments.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/fragments.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ffragments.md -->","isInternal":false,"tokens":2822,"sizeBytes":11508},{"name":"mutations.md","path":"packages/docs/data/mutations.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/mutations.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fmutations.md -->","isInternal":false,"tokens":4998,"sizeBytes":20054},{"name":"queries.md","path":"packages/docs/data/queries.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/queries.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fqueries.md -->","isInternal":false,"tokens":8771,"sizeBytes":35140},{"name":"refetching.md","path":"packages/docs/data/refetching.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/refetching.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Frefetching.md -->","isInternal":false,"tokens":3396,"sizeBytes":13522},{"name":"subscriptions.md","path":"packages/docs/data/subscriptions.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/subscriptions.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fsubscriptions.md -->","isInternal":false,"tokens":4782,"sizeBytes":20188},{"name":"suspense.md","path":"packages/docs/data/suspense.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/suspense.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Fsuspense.md -->","isInternal":false,"tokens":1325,"sizeBytes":5416},{"name":"typescript.md","path":"packages/docs/data/typescript.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/data/typescript.md","title":"Data Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fdata%2Ftypescript.md -->","isInternal":false,"tokens":3418,"sizeBytes":13655},{"name":"index.md","path":"packages/docs/guide/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/guide/index.md","title":"Guide Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Findex.md -->","isInternal":false,"tokens":941,"sizeBytes":3699},{"name":"installation.md","path":"packages/docs/guide/installation.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/guide/installation.md","title":"Guide Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Finstallation.md -->","isInternal":false,"tokens":1300,"sizeBytes":5041},{"name":"why-apollo.md","path":"packages/docs/guide/why-apollo.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/guide/why-apollo.md","title":"Guide Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fguide%2Fwhy-apollo.md -->","isInternal":false,"tokens":1303,"sizeBytes":5428},{"name":"index.md","path":"packages/docs/index.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/index.md","title":"Docs Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Findex.md -->","frontmatter":{"layout":"home","hero":{"name":"Vue Apollo","text":"GraphQL","tagline":"Effortless GraphQL in your Vue app!","image":{"src":"/hero.svg","alt":"Vue Apollo"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/"},{"theme":"alt","text":"API Reference","link":"/api/"}]},"features":[{"title":"Automatic updates","details":"Don't think about updating the UI or refetching the queries!","icon":"✨"},{"title":"Composables or components","details":"useQuery in script, or ApolloQuery in the template. Same client, same cache.","icon":"🧩"},{"title":"SSR-ready","details":"Run your queries on the server before rendering the page HTML","icon":"🌐"}]},"isInternal":false,"tokens":256,"sizeBytes":892},{"name":"overview.md","path":"packages/docs/local-state/overview.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/local-state/overview.md","title":"Local-state Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Flocal-state%2Foverview.md -->","isInternal":false,"tokens":1168,"sizeBytes":5159},{"name":"compat.md","path":"packages/docs/migration/compat.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/migration/compat.md","title":"Migration Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fcompat.md -->","isInternal":false,"tokens":2523,"sizeBytes":10087},{"name":"components.md","path":"packages/docs/migration/components.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/migration/components.md","title":"Migration Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fcomponents.md -->","isInternal":false,"tokens":3163,"sizeBytes":12068},{"name":"guide.md","path":"packages/docs/migration/guide.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/migration/guide.md","title":"Migration Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fguide.md -->","isInternal":false,"tokens":2922,"sizeBytes":11472},{"name":"whats-changed.md","path":"packages/docs/migration/whats-changed.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/migration/whats-changed.md","title":"Migration Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fmigration%2Fwhats-changed.md -->","isInternal":false,"tokens":2066,"sizeBytes":7664},{"name":"authentication.md","path":"packages/docs/networking/authentication.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/networking/authentication.md","title":"Networking Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fnetworking%2Fauthentication.md -->","isInternal":false,"tokens":1337,"sizeBytes":5823},{"name":"basic-http.md","path":"packages/docs/networking/basic-http.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/networking/basic-http.md","title":"Networking Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fnetworking%2Fbasic-http.md -->","isInternal":false,"tokens":1297,"sizeBytes":5403},{"name":"package.json","path":"packages/docs/package.json","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/package.json","title":"private-vue-apollo-docs","category":"anthropic-skill","format":"json","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpackage.json -->","frontmatter":{"name":"private-vue-apollo-docs","type":"module","version":"0.0.0","private":true,"scripts":{"api:components":"node scripts/generateComponentApi.ts","api:generate":"typedoc && pnpm run api:components","check:flavors":"node scripts/checkApiFlavors.ts","build":"pnpm run check:flavors && pnpm run api:generate && vitepress build","dev":"vitepress dev","preview":"vitepress preview"},"dependencies":{"@vue/apollo-components":"workspace:*","@vue/apollo-composable":"workspace:*","vue-github-button":"catalog:"},"devDependencies":{"@apollo/client":"catalog:","@graphql-codegen/cli":"catalog:","@shikijs/vitepress-twoslash":"catalog:","@types/markdown-it-container":"catalog:","@vueuse/core":"catalog:","graphql":"catalog:","graphql-sse":"catalog:","graphql-tag":"catalog:","markdown-it-container":"catalog:","typedoc":"catalog:","typedoc-plugin-markdown":"catalog:","typedoc-vitepress-theme":"catalog:","vitepress":"catalog:","vue":"catalog:","vue-component-meta":"catalog:"}},"isInternal":false,"tokens":328,"sizeBytes":1155},{"name":"cursor-based.md","path":"packages/docs/pagination/cursor-based.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/pagination/cursor-based.md","title":"Pagination Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Fcursor-based.md -->","isInternal":false,"tokens":2032,"sizeBytes":8585},{"name":"offset-based.md","path":"packages/docs/pagination/offset-based.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/pagination/offset-based.md","title":"Pagination Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Foffset-based.md -->","isInternal":false,"tokens":1595,"sizeBytes":6296},{"name":"overview.md","path":"packages/docs/pagination/overview.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/pagination/overview.md","title":"Pagination Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fpagination%2Foverview.md -->","isInternal":false,"tokens":1935,"sizeBytes":7915},{"name":"nuxt.md","path":"packages/docs/ssr/nuxt.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/ssr/nuxt.md","title":"Ssr Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fssr%2Fnuxt.md -->","isInternal":false,"tokens":1926,"sizeBytes":7879},{"name":"overview.md","path":"packages/docs/ssr/overview.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/ssr/overview.md","title":"Ssr Skill","category":"anthropic-skill","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Fssr%2Foverview.md -->","isInternal":false,"tokens":2414,"sizeBytes":10208},{"name":"tsconfig.json","path":"packages/docs/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/tsconfig.json","title":"Docs Skill","category":"anthropic-skill","format":"json","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Ftsconfig.json -->","frontmatter":{"extends":"../vue-apollo-composable/tsconfig.lib.json","include":["api-types.d.ts","../vue-apollo-composable/dist/**/*.d.ts"]},"isInternal":false,"tokens":38,"sizeBytes":138},{"name":"typedoc.json","path":"packages/docs/typedoc.json","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/docs/typedoc.json","title":"@vue/apollo-composable","category":"anthropic-skill","format":"json","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fdocs%2Ftypedoc.json -->","frontmatter":{"$schema":"https://typedoc.org/schema.json","name":"@vue/apollo-composable","entryPoints":["./api-types.d.ts"],"tsconfig":"./tsconfig.json","out":"./api/composable","plugin":["typedoc-plugin-markdown","typedoc-vitepress-theme","./typedoc-plugin-hide-inheritance.ts"],"readme":"none","excludePrivate":true,"excludeInternal":true,"includeVersion":false,"disableSources":true,"categorizeByGroup":true,"categoryOrder":["Functions","Namespaces","Variables","Types","*"],"groupOrder":["Functions","Namespaces","Variables","Type Aliases","*"],"externalSymbolLinkMappings":{"@apollo/client":{"ApolloClient":"https://www.apollographql.com/docs/react/api/core/ApolloClient"},"@vue/reactivity":{"MaybeRefOrGetter":"https://vuejs.org/api/utility-types.html#maybereforgetter","Ref":"https://vuejs.org/api/reactivity-core.html#ref"},"@vueuse/core":{"EventHookOn":"https://vueuse.org/shared/createEventHook/#type-declarations"},"@vueuse/shared":{"EventHookOn":"https://vueuse.org/shared/createEventHook/#type-declarations"}}},"isInternal":false,"tokens":324,"sizeBytes":1170},{"name":"README.md","path":"packages/vue-apollo-components/README.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/vue-apollo-components/README.md","title":"vue-apollo-components Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fvue-apollo-components%2FREADME.md -->","isInternal":false,"tokens":975,"sizeBytes":3667},{"name":"README.md","path":"packages/vue-apollo-composable/README.md","rawUrl":"https://raw.githubusercontent.com/vuejs/apollo/HEAD/packages/vue-apollo-composable/README.md","title":"vue-apollo-composable Documentation","category":"plugin-manifest","format":"markdown","content":"<!-- Skill available on-demand via /api/skills/vuejs/apollo?path=packages%2Fvue-apollo-composable%2FREADME.md -->","isInternal":false,"tokens":423,"sizeBytes":1345},{"name":".cursorrules","path":".cursorrules (react-graphql-apollo-client-cursorrules-prompt-file.mdc)","rawUrl":"https://raw.githubusercontent.com/PatrickJS/awesome-cursorrules/main/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdc","title":"Awesome Cursorrules: react graphql apollo client","category":"cursor-rule","format":"markdown","content":"---\ndescription: \"Cursor rules for GraphQL development with Apollo Client integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + GraphQL (Apollo Client) .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// GraphQL and Apollo Client best practices\n\nconst graphqlBestPractices = [\n  \"Use Apollo Client for state management and data fetching\",\n  \"Implement query components for data fetching\",\n  \"Utilize mutations for data modifications\",\n  \"Use fragments for reusable query parts\",\n  \"Implement proper error handling and loading states\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n  components/\n  graphql/\n    queries/\n    mutations/\n    fragments/\n  hooks/\n  pages/\n  utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use Apollo Provider at the root of your app\n2. Implement custom hooks for Apollo operations\n3. Use TypeScript for type safety with GraphQL operations\n4. Utilize Apollo Client's caching capabilities\n5. Implement proper error boundaries for GraphQL errors\n6. Use Apollo Client DevTools for debugging\n7. Follow naming conventions for queries, mutations, and fragments\n`;\n","tokens":237,"sizeBytes":1179}],"systemPromptSnippet":"<yakaai_skills repo=\"vuejs/apollo\">\n<!-- File: packages/docs/advanced/lazy-queries.md (Tokens: ~1074 | Category: anthropic-skill) -->\n# Lazy Queries\n\n[`useLazyQuery`](/api/composable/functions/useLazyQuery) is for queries where the variables are not known up front. Reach for it when a query should run in response to a user action (search submit, button click, modal open) rather than automatically on mount.\n\n:::: components-api\n::: warning Composition API only\nThere is no `<ApolloLazyQuery>`.\n:::\n::::\n\n## When to use lazy vs enabled\n\n| Situation | Tool |\n|-----------|------|\n| Variables come from a user action (search box submit, button click) | `useLazyQuery` |\n| Variables are known but you want to gate execution on a condition | `useQuery({ enabled })` |\n| Variables are known and the query should run on mount | `useQuery` |\n\n`useLazyQuery` starts disabled. It exposes a `load(variables?)` function that you call when ready. After the first `load`, the query behaves like a normal `useQuery`: variables become reactive, results update, and the query stops when the scope is disposed.\n\n## Basic usage\n\n```vue\n<script setup lang=\"ts\">\nconst SEARCH_USERS: TypedDocumentNode<{ users: { id: string, name: string }[] }, { term: string }>\n  = gql`\n    query SearchUsers($term: String!) {\n      users(search: $term) {\n        id\n        name\n      }\n    }\n  `\n\nconst term = ref('')\nconst { load, current } = useLazyQuery(SEARCH_USERS)\n\nasync function search() {\n  const result = await load({ term: term.value })\n  console.log('Found users:', result?.users)\n}\n</script>\n\n<template>\n  <form @submit.prevent=\"search\">\n    <input v-model=\"term\">\n    <button>Search</button>\n  </form>\n\n  <div v-if=\"current.loading\">\n    Searching...\n  </div>\n  <ul v-else-if=\"current.resultState === 'complete'\">\n    <li v-for=\"user in current.result.users\" :key=\"user.id\">\n      {{ user.name }}\n    </li>\n  </ul>\n</template>\n```\n\n`load(variables?)`:\n\n- Sets the variables for the query (merged with any variables already in options).\n- Starts the query.\n- Returns a promise that resolves with the result data when the query completes, or rejects with the error.\n\nThe result also lands in `current.result` and the individual refs (`result`, `loading`, `error`) just like `useQuery`.\n\n## Loading multiple times\n\nCalling `load` again with different variables re-runs the query:\n\n```ts\nconst { load } = useLazyQuery(SEARCH_USERS)\n\nawait load({ term: 'alice' }) // First search\nawait load({ term: 'bob' }) // New search\n```\n\nEach call merges new variables on top of the previously-loaded ones.\n\n## Options\n\n`useLazyQuery` accepts the same options as `useQuery` (variables, fetch policies, error handling, etc.), except `enabled` is not applicable (the query is always lazy until `load` is called).\n\nYou can still set reactive `variables` in options, which acts as the default for `load`:\n\n```ts\nconst term = ref('')\nconst limit = ref(10)\n\nconst { load } = useLazyQuery(SEARCH_USERS, {\n  variables: { term, limit },\n})\n\n// Uses the reactive variables from options\nasync function search() {\n  await load()\n}\n\n// Or override on the call\nasync function searchOne() {\n  await load({ term: term.value, limit: 1 })\n}\n```\n\nAfter the first `load`, changes to the reactive variables trigger re-execution like any normal `useQuery`.\n\n## Awaiting the result\n\n`load` returns a promise so you can use the result inline:\n\n```ts\nasync function fetchUser(id: string) {\n  try {\n    const data = await load({ id })\n    if (data) {\n      console.log('Loaded:', data.user)\n    }\n  }\n  catch (e) {\n    console.error('Failed to load:', e)\n  }\n}\n```\n\nThe promise resolves with the query data when the result is complete. If the query errors, it rejects with the error. The reactive refs (`current`, `result`, `error`) update either way.\n\n## Lazy queries during SSR\n\n`useLazyQuery` does not run on the server because there is no user action to trigger it. If a value needs to be available during SSR, use `useQuery` instead. See [SSR Overview](/ssr/overview).\n\n## Options and result reference\n\nFor every available option and method, see:\n\n- [`useLazyQuery.Options`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options)\n- [`useLazyQuery.Result`](/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result)\n\n## Next steps\n\n- [Queries](/data/queries) for the basic `useQuery` patterns.\n- [Refetching](/data/refetching) compares lazy loading with refetch and poll.\n- [Loading States](/advanced/loading-states) handles loading indicators across many queries.\n\n<!-- File: packages/docs/advanced/loading-states.md (Tokens: ~1156 | Category: anthropic-skill) -->\n# Loading States\n\nEvery operation exposes its own `loading` state, but real apps often want to combine them: a single indicator for the whole page, an app-wide loading bar, a \"saving\" toast that tracks every mutation. Vue Apollo ships six composables for aggregating loading state across multiple operations.\n\n| Scope | Queries | Mutations | Subscriptions |\n|-------|---------|-----------|---------------|\n| Current effect scope (usually a component) | `useQueryLoading` | `useMutationLoading` | `useSubscriptionLoading` |\n| Whole app | `useGlobalQueryLoading` | `useGlobalMutationLoading` | `useGlobalSubscriptionLoading` |\n\nThe per-scope composables track every `useQuery`/`useMutation`/`useSubscription` called within the current Vue effect scope (typically the component that calls them, plus anything they call recursively). The global composables track every operation in the entire app.\n\n:::: components-api\n::: warning Components have their own scope\n`<ApolloQuery>` runs its `useQuery` inside its *own* component instance, so a\n`useQueryLoading()` in the surrounding `<script setup>` will never see it. Reach for the\n**global** composables when the operations are declared as elements, or for the `loading`\nslot prop when you only care about one of them.\n\nEverything on this page is written in the composables because these six *are* composables:\nthere is no component form of an aggregate counter. They work the same in a file that\notherwise uses only components.\n:::\n::::\n\n## Per-scope loading\n\n```vue\n<script setup lang=\"ts\">\nconst { current: users } = useQuery(GET_USERS)\nconst { current: posts } = useQuery(GET_POSTS)\n\n// True while any query in this component is loading\nconst loading = useQueryLoading()\n</script>\n\n<template>\n  <div v-if=\"loading\">\n    Loading...\n  </div>\n  <div v-else>\n    <!-- Render data -->\n  </div>\n</template>\n```\n\n`useQueryLoading` returns a computed ref that is `true` while at least one query in the current scope is in flight. It is reactive: as queries finish, the ref flips back to `false`.\n\nUse the same shape for mutations and subscriptions:\n\n```ts\nconst { mutate: updateUser } = useMutation(UPDATE_USER)\nconst saving = useMutationLoading()\n```\n\nPer-scope tracking is automatically scoped to the component that calls these composables. The same composable in a sibling component does not affect this scope.\n\n## Global loading\n\n`useGlobalQueryLoading`, `useGlobalMutationLoading`, and `useGlobalSubscriptionLoading` track every operation in the entire app. Useful for app-shell loading indicators:\n\n```vue\n<script setup lang=\"ts\">\nimport { useGlobalQueryLoading } from '@vue/apollo-composable'\n\nconst loading = useGlobalQueryLoading()\n</script>\n\n<template>\n  <header>\n    <div v-if=\"loading\" class=\"loading-bar\" />\n  </header>\n  <main>\n    <slot />\n  </main>\n</template>\n```\n\nUnlike the per-scope variants, the global composables can be called anywhere, including outside a component setup.\n\n## Restrictions\n\n- The per-scope composables must be called inside an effect scope (typically a `<script setup>` block, a Vue plugin, or anywhere `getCurrentScope()` returns a scope). They throw outside.\n- The global composables have no such restriction.\n\n## When to choose which\n\n| Goal | Composable |\n|------|------------|\n| Loading indicator for a specific component or section | Per-scope: `useQueryLoading`, etc. |\n| App-wide top loading bar | Global: `useGlobalQueryLoading` |\n| Disable a button while a specific mutation is in flight | The `loading` of that mutation alone |\n| Combine queries and mutations into one indicator | Two refs, combined with `computed(() => queries.value || saving.value)` |\n\nFor the \"indicator for one specific operation\" case, do not reach for these composables.\n\n:::: composition-api\nUse the `loading` ref the original composable returned:\n\n```ts\nconst { mutate: save, loading } = useMutation(SAVE)\n// `loading` is true while this specific save is running\n```\n::::\n\n:::: components-api\nUse the `loading` slot prop, which is scoped to that one element:\n\n```vue-html\n<ApolloMutation v-slot=\"{ mutate, loading }\" :mutation=\"Save\" @error=\"console.error\">\n  <button :disabled=\"loading\" @click=\"mutate()\">\n    Save\n  </button>\n</ApolloMutation>\n```\n::::\n\n## Combining categories\n\nWant a single indicator that flips on while any operation is running? Compose them:\n\n```ts\nconst queries = useGlobalQueryLoading()\nconst mutations = useGlobalMutationLoading()\nconst subscriptions = useGlobalSubscriptionLoading()\n\nconst anyLoading = computed(\n  () => queries.value || mutations.value || subscriptions.value,\n)\n```\n\n## SSR\n\nThe global composables avoid cross-request contamination during SSR. You can safely use them in components that render on the server.\n\nThe per-scope composables are also SSR-safe, but the counters are scoped to the current request's effect scope.\n\n## Next steps\n\n- [Queries](/data/queries) for the `loading` ref on individual `useQuery` calls.\n- [Mutations](/data/mutations) for the `loading` ref on `useMutation`.\n- [Suspense](/data/suspense) for a different approach to coarse-grained loading.\n\n<!-- File: packages/docs/advanced/multiple-clients.md (Tokens: ~1414 | Category: anthropic-skill) -->\n# Multiple Clients\n\nVue Apollo supports multiple `ApolloClient` instances in the same app. The canonical use case is talking to different backends: a primary GraphQL API and an analytics service, each with its own schema, endpoint, and link chain.\n\nThis page covers the recommended pattern: provide a dictionary of named clients, then pick the right one per call with the `clientId` option.\n\n## Setting up named clients\n\nCreate each client as you would a single client. Provide them as a dictionary through the `ApolloClients` injection key:\n\n```ts\n// src/apollo.ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\n\nexport const mainClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://api.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n\nexport const analyticsClient = new ApolloClient({\n  link: new HttpLink({ uri: 'https://analytics.example.com/graphql' }),\n  cache: new InMemoryCache(),\n})\n```\n\n```ts\n// src/main.ts\nimport { ApolloClients } from '@vue/apollo-composable'\nimport { createApp } from 'vue'\nimport { analyticsClient, mainClient } from './apollo'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.provide(ApolloClients, {\n  default: mainClient,\n  analytics: analyticsClient,\n})\napp.mount('#app')\n```\n\nThe dictionary must contain a `default` entry. That is the client used when no `clientId` is specified.\n\n## Using a specific client\n\n:::: composition-api\nPass `clientId` in the composable options:\n\n```vue\n<script setup lang=\"ts\">\nconst PAGE_VIEWS: TypedDocumentNode<{ pageViews: number }, {}>\n  = gql`\n    query PageViews {\n      pageViews\n    }\n  `\n\nconst { current } = useQuery(PAGE_VIEWS, {\n  clientId: 'analytics',\n})\n</script>\n```\n\nThe same option works on [`useMutation`](/data/mutations), [`useSubscription`](/data/subscriptions), [`useLazyQuery`](/advanced/lazy-queries), and [`useFragment`](/data/fragments).\n::::\n\n:::: components-api\nSet the `clientId` prop:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery :query=\"PageViews\" clientId=\"analytics\">\n    <template #data=\"{ data }\">\n      {{ data.pageViews }} views\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n[`<ApolloMutation>`](/api/components/ApolloMutation),\n[`<ApolloSubscription>`](/api/components/ApolloSubscription) and\n[`<ApolloFragment>`](/api/components/ApolloFragment) take the same prop.\n[`<ApolloSubscribeToMore>`](/api/components/ApolloSubscribeToMore) always uses whichever\nclient its enclosing `<ApolloQuery>` picked.\n\nBecause the prop is a normal binding, a client can be chosen per element without any of the\nplumbing a composable would need:\n\n```vue-html\n<ApolloQuery :query=\"PageViews\" :clientId=\"isPreview ? 'staging' : 'default'\">\n```\n::::\n\n## Resolving clients imperatively\n\nFor code that runs outside a composable call (event handlers, stores, route guards), use `useApolloClient` to resolve a client by id:\n\n```ts\nimport { useApolloClient } from '@vue/apollo-composable'\n\nconst { resolveClient } = useApolloClient()\n\nconst analytics = resolveClient('analytics')\n\nawait analytics.mutate({\n  mutation: TRACK_EVENT,\n  variables: { event: 'page_view' },\n})\n```\n\n`resolveClient()` with no argument returns the default client.\n\n:::: components-api\nThis is for code, not templates. An element that already picks its client with `clientId`\nnever needs to resolve one by hand, so reach for `useApolloClient` only where the call\nhappens outside the template: a store action, a route guard, an event handler that talks to\nthe client directly.\n::::\n\n## Switching clients reactively\n\n`clientId` is read each time the underlying observable is created. You can vary it based on a ref to switch clients at runtime, but the query is re-created whenever it changes, which means the previous result is lost and a new fetch starts.\n\n:::: composition-api\n```ts\nconst env = ref<'default' | 'staging'>('default')\n\nconst { current } = useQuery(QUERY, () => ({\n  clientId: env.value,\n}))\n```\n::::\n\n:::: components-api\n```vue-html\n<ApolloQuery :query=\"Query\" :clientId=\"env\">\n```\n::::\n\nThis is fine for occasional switches (an admin tool toggling between staging and prod). For per-feature splits, prefer setting `clientId` once per component or per query, not reactively.\n\n## Mixing with `provideApolloClient` / `provideApolloClients`\n\nFor non-component contexts (Vue Router guards, top-level scripts), use [`provideApolloClients`](/advanced/outside-components) to make named clients available the same way:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\n\nconst cleanup = provideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})\n\nconst result = cleanup(() => {\n  // useQuery calls in here can use clientId\n  // ...\n})\n```\n\nSee [Outside Components](/advanced/outside-components) for the full pattern.\n\n:::: components-api\n::: warning Composition API only\n`provideApolloClients` exists to give composables an injection context they would otherwise\nlack. Components run inside a template, so they always have one and resolve `clientId`\nagainst the `ApolloClients` map the app provided.\n:::\n::::\n\n## When to reach for multiple clients\n\n| Situation | Pattern |\n|-----------|---------|\n| One API, different auth states (anonymous vs logged in) | One client, set auth headers per request through context |\n| One API, different cache policies in different parts of the app | One client, vary fetch policies per query |\n| Separate backends with their own schemas | Multiple clients |\n| Same backend, different versions or federated subgraphs reached separately | Multiple clients |\n\nMultiple clients have real costs: each has its own cache, so queries against one cannot see updates to the other. If two parts of your app talk to the same entities, keep them on one client.\n\n## Next steps\n\n- [Outside Components](/advanced/outside-components) covers `provideApolloClient` / `provideApolloClients`.\n- [Authentication](/networking/authentication) for per-request auth that does not need a separate client.\n- The [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the full resolution API.\n\n<!-- File: packages/docs/advanced/outside-components.md (Tokens: ~1298 | Category: anthropic-skill) -->\n# Outside Components\n\nVue Apollo's composables rely on Vue's injection system to find the Apollo client. Inside a component's `<script setup>` (or any code that runs in a component's effect scope) the client is found through `inject(DefaultApolloClient)` automatically.\n\nOutside of that context, `useQuery` and friends have no way to resolve a client. [`provideApolloClient`](/api/composable/functions/provideApolloClient) and [`provideApolloClients`](/api/composable/functions/provideApolloClients) bridge that gap for the duration of a callback.\n\n:::: components-api\n::: warning Composition API only\nThis page is about calling composables outside a component setup: Pinia stores, route\nguards, plain modules. Components only exist inside a template, so they always have the\ninjection context and never need this.\n\nUse the `clientId` prop to pick a non-default client from a template; see\n[Multiple Clients](/advanced/multiple-clients).\n:::\n::::\n\n## When you need this\n\nYou need `provideApolloClient` when calling Vue Apollo composables from code that is **not** a component setup:\n\n- Vue Router navigation guards (`beforeEach`, `beforeEnter`).\n- Standalone scripts, utility functions, or workers.\n- Test setup code that runs outside of `mount()`.\n\nYou generally do **not** need it for:\n\n- Pinia stores. Call `useSomeStore()` from inside a component setup. The store can then use `useQuery`/`useMutation` directly because injection has already been resolved.\n- Composables called from inside a component. Injection works through nested composables.\n- Watch callbacks inside components. The component's effect scope is still active.\n\n## The pattern\n\n`provideApolloClient(client)` returns a function that runs your callback with the client available:\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nconst result = provideApolloClient(apolloClient)(() => {\n  return useQuery(gql`\n    query Me {\n      me { id name }\n    }\n  `)\n})\n```\n\n## Vue Router guards\n\nThe canonical use case: a route guard that prefetches data before navigation.\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { createRouter } from 'vue-router'\nimport { apolloClient } from './apollo'\n\nconst router = createRouter({\n  // ...routes\n})\n\nrouter.beforeEach(async (to) => {\n  if (to.meta.requiresAuth) {\n    const { current, onResult, onError } = provideApolloClient(apolloClient)(() => {\n      return useQuery(gql`\n        query CurrentUser {\n          me { id role }\n        }\n      `, {\n        fetchPolicy: 'cache-first',\n      })\n    })\n\n    // Wait for the query to complete\n    await new Promise<void>((resolve) => {\n      onResult(() => resolve())\n      onError(() => resolve())\n    })\n\n    if (!current.value.result?.me) {\n      return '/login'\n    }\n  }\n})\n```\n\n::: warning Cleanup matters\nGuards run outside any component's lifecycle, so the query has no scope to clean up against. If you start a long-running query (especially with `pollInterval` or a non-default `fetchPolicy`), it will leak.\n\nFor one-shot lookups, prefer `client.query()` directly:\n\n```ts\nconst { data } = await apolloClient.query({\n  query: CURRENT_USER,\n  fetchPolicy: 'cache-first',\n})\n```\n\n`client.query` does not subscribe and has nothing to leak. Reach for `provideApolloClient` + `useQuery` only when you need the reactive `current` ref, or when you specifically want the cache-update behavior.\n:::\n\n## Standalone helpers\n\nFor utility functions outside any Vue context (CLI tools, server scripts, workers):\n\n```ts\nimport { gql } from '@apollo/client'\nimport { provideApolloClient, useQuery } from '@vue/apollo-composable'\nimport { apolloClient } from './apollo'\n\nexport function getUserOnce(id: string) {\n  return provideApolloClient(apolloClient)(() => {\n    const { onResult, onError } = useQuery(gql`\n      query User($id: ID!) {\n        user(id: $id) { id name }\n      }\n    `, {\n      variables: { id },\n    })\n\n    return new Promise<any>((resolve, reject) => {\n      onResult(data => resolve(data))\n      onError(reject)\n    })\n  })\n}\n```\n\nFor most one-off queries, `apolloClient.query(...)` directly is simpler.\n\n## Multiple clients\n\n`provideApolloClients` is the dictionary variant:\n\n```ts\nimport { provideApolloClients } from '@vue/apollo-composable'\nimport { analyticsClient, mainClient } from './apollo'\n\nprovideApolloClients({\n  default: mainClient,\n  analytics: analyticsClient,\n})(() => {\n  // useQuery, useMutation, etc. can resolve by clientId in here\n})\n```\n\nSee [Multiple Clients](/advanced/multiple-clients) for the full pattern.\n\n## How it works\n\n`provideApolloClient` writes the client into a module-level variable, runs your callback, then clears it. Vue Apollo's `useApolloClient` checks Vue's injection first; if there is no injection context (because you are not in a component), it falls back to the module-level variable.\n\nThis means:\n\n- The client only lives for the duration of the callback.\n- Nested calls work: if you call `provideApolloClient` inside `provideApolloClient`, the inner call wins until its callback returns.\n- It is not thread-safe across concurrent async work, because module state is shared. Do not start two independent `provideApolloClient` blocks in parallel; chain them or use a single block.\n\n## Next steps\n\n- [Multiple Clients](/advanced/multiple-clients) for the named-clients pattern.\n- [SSR Overview](/ssr/overview) for the SSR equivalent (cache extract/restore on the server).\n- [`useApolloClient` reference](/api/composable/functions/useApolloClient) for the resolution API.\n\n<!-- File: packages/docs/advanced/streaming.md (Tokens: ~2330 | Category: anthropic-skill) -->\n# Streaming & @defer\n\nThe `@defer` and `@stream` directives let a GraphQL server deliver a single response in multiple chunks. The client renders the first chunk immediately and updates as later chunks arrive.\n\nVue Apollo surfaces this through the `current.resultState` discriminator: while data is arriving, `resultState` is `'streaming'`; when the server finishes, it becomes `'complete'`.\n\n## When to use streaming\n\n`@defer` is useful when a query has fast and slow fields and you want to render the fast ones first:\n\n```graphql\nquery Profile($id: ID!) {\n  user(id: $id) {\n    id\n    name        # Fast: from the user table\n    ... @defer {\n      activity  # Slow: aggregates from other services\n    }\n  }\n}\n```\n\nThe browser receives `name` immediately and `activity` when it is ready. Without `@defer`, the whole query is held until every field resolves.\n\n`@stream` works the same way for lists: items arrive incrementally instead of all at once.\n\n## Configuring the client\n\n`@defer` and `@stream` need an incremental delivery handler on your Apollo Client instance. Without one, using either directive throws an error.\n\n```ts\nimport { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client'\nimport { Defer20220824Handler } from '@apollo/client/incremental'\n\nconst apolloClient = new ApolloClient({\n  cache: new InMemoryCache(),\n  link: new HttpLink({ uri: '/graphql' }),\n  incrementalHandler: new Defer20220824Handler(),\n})\n```\n\nApollo Client ships several handlers, each implementing a different incremental delivery protocol:\n\n| Handler | Protocol |\n|---------|----------|\n| `Defer20220824Handler` | Used by Apollo Router and earlier `graphql-yoga` versions |\n| `GraphQL17Alpha2Handler` | Alias for `Defer20220824Handler` |\n| `GraphQL17Alpha9Handler` | Newer `graphql` 17 alpha format |\n| `NotImplementedHandler` | Default; throws on `@defer`/`@stream` |\n\nPick the one your server supports. See [Apollo's @defer docs](https://www.apollographql.com/docs/react/data/defer) for protocol details.\n\n## Reading a streaming query\n\n:::: composition-api\n```vue\n<script setup lang=\"ts\">\nconst PROFILE: TypedDocumentNode<{ user: { id: string, name: string, activity?: Array<{ id: string, kind: string }> } }, { id: string }>\n  = gql`\n    query Profile($id: ID!) {\n      user(id: $id) {\n        id\n        name\n        ... @defer {\n          activity {\n            id\n            kind\n          }\n        }\n      }\n    }\n  `\n\nconst { current } = useQuery(PROFILE, { variables: { id: '1' } })\n</script>\n\n<template>\n  <div v-if=\"current.resultState === 'empty'\">\n    Loading...\n  </div>\n\n  <div v-else>\n    <!-- `name` is available as soon as the first chunk arrives -->\n    <h1>{{ current.result?.user.name }}</h1>\n\n    <!-- `activity` is available once the deferred chunk arrives -->\n    <div v-if=\"current.result?.user.activity\">\n      <h2>Recent activity</h2>\n      <ul>\n        <li v-for=\"entry in current.result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </div>\n    <div v-else>\n      Loading activity...\n    </div>\n  </div>\n</template>\n```\n::::\n\n:::: components-api\n`#data` renders from the first chunk onwards, so the non-deferred fields appear immediately\nand the deferred ones fill in underneath as they land:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery\n    :query=\"gql`\n      query Profile($id: ID!) {\n        user(id: $id) {\n          id\n          name\n          ... @defer {\n            activity {\n              id\n              kind\n            }\n          }\n        }\n      }\n    `\"\n    :variables=\"{ id: '1' }\"\n  >\n    <template #loading>\n      Loading...\n    </template>\n    <template #data=\"{ data }\">\n      <!-- `name` is available as soon as the first chunk arrives -->\n      <h1>{{ data.user.name }}</h1>\n\n      <!-- `activity` is available once the deferred chunk arrives -->\n      <div v-if=\"data.user.activity\">\n        <h2>Recent activity</h2>\n        <ul>\n          <li v-for=\"entry in data.user.activity\" :key=\"entry.id\">\n            {{ entry.kind }}\n          </li>\n        </ul>\n      </div>\n      <div v-else>\n        Loading activity...\n      </div>\n    </template>\n  </ApolloQuery>\n</template>\n```\n\n`#loading` covers only the gap before the first chunk. From there `#data` stays mounted\nfor the rest of the stream.\n\nListen for `@streamingResult` if you want each chunk imperatively, and use the default\nslot when you need `resultState` itself to tell `'streaming'` from `'complete'`.\n::::\n\nThe `resultState` lifecycle for a `@defer` query:\n\n1. `'empty'` while no data has arrived.\n2. `'streaming'` after the first chunk lands. `current.result` contains the non-deferred fields. Deferred fields are still `undefined`.\n3. `'streaming'` continues to fire as more deferred chunks arrive. Fields appear as their chunks land.\n4. `'complete'` once the server signals the response is finished. All fields are populated.\n\n`loading` stays `true` through `streaming` and only becomes `false` at `complete`. `networkStatus` transitions from `loading` to `streaming` to `ready`.\n\n## Type narrowing for streaming\n\nBecause deferred fields may be absent during `streaming`, their TypeScript types should reflect that. With GraphQL Codegen, this happens automatically through the `Incremental` / `Streaming` type helpers. With manual `TypedDocumentNode`, mark deferred fields as optional in your `TData` type.\n\n:::: composition-api\nInside your component:\n\n```ts\nif (current.value.resultState === 'streaming' || current.value.resultState === 'complete') {\n  // current.value.result is defined\n  console.log(current.value.result.user.name)\n}\n```\n\nOr be more specific:\n\n```ts\nif (current.value.resultState === 'complete') {\n  // All fields, including deferred ones, are present\n  console.log(current.value.result.user.activity)\n}\n```\n::::\n\n:::: components-api\nThe default slot hands you the same discriminated union, so `resultState` narrows `result`\nin the template exactly as it does in script. See\n[Two ways to read the result](/data/queries#two-ways-to-read-the-result) for how the two\nrendering modes differ:\n\n```vue\n<script setup lang=\"ts\">\nimport { ApolloQuery } from '@vue/apollo-components'\n</script>\n\n<template>\n  <ApolloQuery v-slot=\"{ result, resultState }\" :query=\"Profile\" :variables=\"{ id: '1' }\">\n    <template v-if=\"resultState === 'streaming' || resultState === 'complete'\">\n      <!-- Non-deferred fields are there from the first chunk -->\n      <h1>{{ result.user.name }}</h1>\n\n      <!-- Deferred fields are only guaranteed once the state reaches `complete` -->\n      <ul v-if=\"resultState === 'complete' && result.user.activity\">\n        <li v-for=\"entry in result.user.activity\" :key=\"entry.id\">\n          {{ entry.kind }}\n        </li>\n      </ul>\n    </template>\n  </ApolloQuery>\n</template>\n```\n::::\n\n## Combining with Suspense\n\nBy default, `await useQuery()` resolves as soon as the first chunk lands. The component renders with partial data, then re-renders as more arrives.\n\nIf you want Suspense to wait for the entire stream to complete (so the first render has all the data), set `awaitComplete: true`:\n\n```vue\n<script setup lang=\"ts\">\nimport { gql } from '@apollo/client'\nimport { useQuery } from '@vue/apollo-composable'\n\nconst { current } = await useQuery(PROFILE_QUERY, {\n  variables: { id: '1' },\n  awaitComplete: true, // Wait for `resultState === 'complete'`\n})\n</script>\n```\n\nUse this carefully: it negates the latency benefit of `@defer`. Most of the time, you want the default (render fast, fill in slow) and only opt into `awaitComplete` for screens where partial data would be misleading.\n\n:::: components-api\n`awaitComplete` reaches the component through `options`, and it still governs SSR prefetch\nthere, so the server waits for the whole response before rendering:\n\n```vue-html\n<ApolloQuery :query=\"GetProfile\" :options=\"{ awaitComplete: true }\">\n```\n\nOn the client it has nothing to act on, because `<ApolloQuery>` cannot suspend. The slots\nrender as chunks land either way. See [Suspense](/data/suspense) for why.\n::::\n\n## Refetching a streaming query\n\nRefetching a `@defer` query goes through the streaming lifecycle again. The previous `result` stays available while the new response streams in. `networkStatus` reports `refetch` initially, then `streaming`, then `ready`.\n\nSee [Apollo's data merging tables](https://www.apollographql.com/docs/react/data/defer#loading-networkstatus-datastate-and-data-merging) for the exact transitions during refetch.\n\n## `@stream` for lists\n\n`@stream` works on list fields:\n\n```graphql\nquery Alphabet {\n  letters @stream(initialCount: 0)\n}\n```\n\n:::: composition-api\nThe server can send letters one by one. `current.result.letters` grows as items arrive:\n\n```ts\nconst { current } = useQuery(ALPHABET)\n\nwatch(() => current.value.result?.letters, (letters) => {\n  console.log(letters) // ['a'], ['a', 'b'], ['a', 'b', 'c'], ...\n})\n```\n::::\n\n:::: components-api\nThe list grows in place, so a `v-for` inside `#data` simply re-renders as each chunk lands.\n::::\n\n`@stream` shares the same `resultState` transitions as `@defer`.\n\n## Next steps\n\n- [Suspense](/data/suspense) covers `awaitComplete` and the SSR interaction.\n- [Queries](/data/queries) covers the basics of `useQuery` and `resultState`.\n- Apollo's [@defer reference](https://www.apollographql.com/docs/react/data/defer) covers the full protocol.\n\n<!-- File: packages/docs/api/components/ApolloFragment.md (Tokens: ~562 | Category: anthropic-skill) -->\n# ApolloFragment\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `fragment` *(required)* | `DocumentNode \\| TypedDocumentNode<TData, TVariables>` | &nbsp; | A GraphQL fragment document. |\n| `from` *(required)* | `NonNullable<useFragment.FromValue<TData>>` | &nbsp; | Cache identifiable entity to read the fragment from.<br><br>Accepts a masked object from a parent query, a `{ __ref }` reference, or a cache ID string. |\n| `fragmentName` | `string \\| undefined` | &nbsp; | Name of the fragment to use, when the document declares more than one. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables used when reading the fragment. |\n| `optimistic` | `boolean \\| undefined` | &nbsp; | Read from optimistic cache data. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useFragment.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useFragment` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `nextState` | `[state: RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` has every field.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n\n### `#incomplete`\n\nShown while fields are still missing from the cache. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `DeepPartial<TData>` |\n| `missing` | `MissingTree \\| undefined` |\n\n### `#default`\n\nRaw mode. Receives the flattened fragment state.\n\nRendered in both modes, so nested children still mount.\n\nReceives `RenameKey<RenameKey<ApolloCache.WatchFragmentResult<TData>, \"dataState\", \"resultState\">, \"data\", \"result\">`.\n\n## Exposed\n\nA template ref receives the full [`useFragment.Result`](/api/composable/@vue/namespaces/useFragment/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloFragment ref=\"apollo\" ... />\n</template>\n```\n\n<!-- File: packages/docs/api/components/ApolloMutation.md (Tokens: ~370 | Category: anthropic-skill) -->\n# ApolloMutation\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `mutation` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The mutation document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables applied to every call, unless overridden in `mutate()`. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useMutation.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useMutation` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n| `done` | `[result: ApolloClient.MutateResult<MaybeMasked<TData>>]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `mutate` | `useMutation.MutateFunction<TData, TVariables>` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `called` | `boolean` |\n| `result` | `TData \\| null \\| undefined` |\n| `reset` | `() => void` |\n\n## Exposed\n\nA template ref receives the full [`useMutation.Result`](/api/composable/@vue/namespaces/useMutation/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloMutation ref=\"apollo\" ... />\n</template>\n```\n\n<!-- File: packages/docs/api/components/ApolloQuery.md (Tokens: ~1087 | Category: anthropic-skill) -->\n# ApolloQuery\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `query` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The query document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the query. |\n| `disabled` | `boolean \\| undefined` | `false` | Skip execution until a condition is met. |\n| `fetchPolicy` | `useQuery.Options<TData, TVariables>[\"fetchPolicy\"] \\| undefined` | &nbsp; | How the query reads from and writes to the cache. |\n| `pollInterval` | `number \\| undefined` | &nbsp; | Refetch every N milliseconds. |\n| `debounce` | `number \\| undefined` | &nbsp; | Delay variable updates (ms). `loading` covers the window. |\n| `throttle` | `number \\| undefined` | &nbsp; | Throttle variable updates (ms). `loading` covers the window. |\n| `keepPreviousResult` | `boolean \\| undefined` | &nbsp; | Keep the previous result on screen while new variables are in flight.<br><br>Off by default, as in `useQuery`. Opt in for search and pagination, where clearing the list on every change flickers. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `empty` | `((data: TData) => boolean) \\| undefined` | &nbsp; | Decides whether a result counts as empty, selecting the `#empty` slot.<br><br>Without it `#empty` is never used, so `#data` handles the empty case itself. |\n| `options` | `useQuery.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useQuery` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `completeResult` | `[data: TData]` |\n| `partialResult` | `[data: TData]` |\n| `streamingResult` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `nextState` | `[state: useQuery.Current<TData, \"empty\" \\| \"complete\" \\| \"streaming\" \\| \"partial\">]` |\n\n## Slots\n\n### `#data`\n\nOpinionated mode. Providing this slot selects it, and `data` is never undefined.\n\n| Slot prop | Type |\n| --- | --- |\n| `data` | `TData` |\n| `error` | `ErrorLike \\| undefined` |\n| `isPreviousResult` | `boolean` |\n| `loading` | `boolean` |\n| `pending` | `boolean` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n| `fetchMore` | `<TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(options: ObservableQuery.FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<RenameKey<ApolloClient.QueryResult<TFetchData>, \"data\", \"result\">> \\| undefined` |\n\n### `#loading`\n\nShown while the first result is loading. Opinionated mode only.\n\nNo slot props.\n\n### `#error`\n\nShown when the query failed and there is nothing to display. Opinionated mode only.\n\n| Slot prop | Type |\n| --- | --- |\n| `error` | `ErrorLike` |\n| `refetch` | `(variables?: TVariables \\| undefined) => Promise<RenameKey<ApolloClient.QueryResult<TData>, \"data\", \"result\"> \\| undefined>` |\n\n### `#empty`\n\nShown when the `empty` prop returns `true`, and as the last branch when the query\nsettles with nothing to show. Without the `empty` prop, `#data` owns the empty result.\n\nNo slot props.\n\n### `#default`\n\nRaw mode. Receives the flattened query state and its methods.\n\nRendered in both modes, so nested renderless children still mount.\n\nReceives `useQuery.Current<MaybeMasked<TData>> & Pick<Query, 'refetch' \\| 'fetchMore' \\| 'updateQuery' \\| 'subscribeToMore' \\| 'start' \\| 'stop' \\| 'restart'>`.\n\nEvery field of [`useQuery.Current`](/api/composable/@vue/namespaces/useQuery/interfaces/Current) is present, so `resultState` narrows `result` here exactly as it does in script.\n\n## Exposed\n\nA template ref receives the full [`useQuery.Result`](/api/composable/@vue/namespaces/useQuery/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloQuery ref=\"apollo\" ... />\n</template>\n```\n\n<!-- File: packages/docs/api/components/ApolloSubscribeToMore.md (Tokens: ~189 | Category: anthropic-skill) -->\n# ApolloSubscribeToMore\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `document` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `updateQuery` | `SubscribeToMoreUpdateQueryFn<any, any, TData> \\| undefined` | &nbsp; | Merges incoming subscription data into the parent query's result. |\n| `context` | `DefaultContext \\| undefined` | &nbsp; | Context passed to the link chain for this subscription. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `error` | `[error: ErrorLike]` |\n\n<!-- File: packages/docs/api/components/ApolloSubscription.md (Tokens: ~371 | Category: anthropic-skill) -->\n# ApolloSubscription\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n## Props\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| `subscription` *(required)* | `TypedDocumentNode<TData, TVariables>` | &nbsp; | The subscription document. |\n| `variables` | `TVariables \\| undefined` | &nbsp; | Variables for the subscription. |\n| `disabled` | `boolean \\| undefined` | `false` | Stop the subscription. |\n| `clientId` | `string \\| undefined` | &nbsp; | Name of the client to use, from the provided `ApolloClients` map. |\n| `options` | `useSubscription.Options<TData, TVariables> \\| undefined` | &nbsp; | Escape hatch for any other `useSubscription` option. |\n\n## Events\n\n| Name | Payload |\n| --- | --- |\n| `result` | `[data: TData]` |\n| `error` | `[error: ErrorLike]` |\n| `complete` | `[]` |\n\n## Slots\n\n### `#default`\n\n| Slot prop | Type |\n| --- | --- |\n| `result` | `TData \\| undefined` |\n| `loading` | `boolean` |\n| `error` | `ErrorLike \\| undefined` |\n| `start` | `() => void` |\n| `stop` | `() => void` |\n| `restart` | `() => Promise<void>` |\n\n## Exposed\n\nA template ref receives the full [`useSubscription.Result`](/api/composable/@vue/namespaces/useSubscription/interfaces/Result) surface, with refs unwrapped.\n\n```vue\n<template>\n  <ApolloSubscription ref=\"apollo\" ... />\n</template>\n```\n\n<!-- File: packages/docs/api/components/index.md (Tokens: ~70 | Category: anthropic-skill) -->\n# Components API\n\n<!-- Generated by `pnpm api:components`. Do not edit by hand. -->\n\n- [ApolloQuery](./ApolloQuery)\n- [ApolloMutation](./ApolloMutation)\n- [ApolloSubscription](./ApolloSubscription)\n- [ApolloSubscribeToMore](./ApolloSubscribeToMore)\n- [ApolloFragment](./ApolloFragment)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/provideApolloClient/index.md (Tokens: ~48 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../index.md) / provideApolloClient\n\n# provideApolloClient\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Callback.md (Tokens: ~62 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Returns\n\n`any`\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/provideApolloClient/type-aliases/Result.md (Tokens: ~77 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [provideApolloClient](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClient](../../../../functions/provideApolloClient.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/provideApolloClients/index.md (Tokens: ~48 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../index.md) / provideApolloClients\n\n# provideApolloClients\n\n## Type Aliases\n\n- [Callback](type-aliases/Callback.md)\n- [Result](type-aliases/Result.md)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Callback.md (Tokens: ~62 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Callback\n\n# Type Alias: Callback()\n\n> **Callback** = () => `any`\n\nCallback used in [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Returns\n\n`any`\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/provideApolloClients/type-aliases/Result.md (Tokens: ~77 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [provideApolloClients](../index.md) / Result\n\n# Type Alias: Result()\n\n> **Result** = (`fn`) => `any`\n\nResult type returned by [provideApolloClients](../../../../functions/provideApolloClients.md).\n\n## Parameters\n\n### fn\n\n[`Callback`](Callback.md)\n\n## Returns\n\n`any`\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useApolloClient/index.md (Tokens: ~33 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../index.md) / useApolloClient\n\n# useApolloClient\n\n## Interfaces\n\n- [Result](interfaces/Result.md)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useApolloClient/interfaces/Result.md (Tokens: ~166 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useApolloClient](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useApolloClient.\n\n## Properties\n\n### client\n\n> `readonly` **client**: [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nThe ApolloClient instance.\n\n***\n\n### resolveClient()\n\n> **resolveClient**: (`clientId?`) => [`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\nResolves an ApolloClient by ID.\n\n#### Parameters\n\n##### clientId?\n\n`string`\n\nThe client ID to resolve. If omitted, resolves the default client.\n\n#### Returns\n\n[`ApolloClient`](https://www.apollographql.com/docs/react/api/core/ApolloClient)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useFragment/index.md (Tokens: ~84 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../index.md) / useFragment\n\n# useFragment\n\n## Type Aliases\n\n- [FromValue](type-aliases/FromValue.md)\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [Current](interfaces/Current.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Current.md (Tokens: ~192 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Current\n\n# Interface: Current\n\nCurrent state\n\n## 1. Operation data\n\n### complete\n\n> **complete**: `boolean`\n\nWhether the fragment data is complete.\n\n***\n\n### missing?\n\n> `optional` **missing**: `MissingTree`\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: `object` \\| `object`[]\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: `\"complete\"` \\| `\"partial\"`\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Options.md (Tokens: ~316 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Options\n\n# Interface: Options\n\nOptions for useFragment.\n\n## 1. Fragment\n\n### fragment\n\n> **fragment**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`DocumentNode`\\>\n\nA GraphQL fragment document.\n\n***\n\n### fragmentName?\n\n> `optional` **fragmentName**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`string`\\>\n\nName of the fragment to use if document contains multiple fragments.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`ReactiveVariablesParameter`](../type-aliases/ReactiveVariablesParameter.md)\\>\n\nVariables for the fragment.\n\n## 2. Data Source\n\n### from\n\n> **from**: [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<[`FromValue`](../type-aliases/FromValue.md) \\| [`FromValue`](../type-aliases/FromValue.md)[]\\>\n\nCache identifiable entity to read the fragment from.\n\n## 3. Configuration\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use.\n\n***\n\n### optimistic?\n\n> `optional` **optimistic**: `boolean`\n\nRead from optimistic cache data.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useFragment/interfaces/Result.md (Tokens: ~351 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useFragment.\n\n## 1. Operation data\n\n### complete\n\n> **complete**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nWhether the fragment data is complete.\n\n***\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### missing\n\n> **missing**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`MissingTree`\\>\n\nTree of missing field errors when `complete` is false.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `object`[]\\>\n\nAn object containing the result of your GraphQL fragment lookup after it completes.\n\n***\n\n### resultState\n\n> **resultState**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`\"complete\"` \\| `\"partial\"`\\>\n\nDescribes the completeness of `result`.\n\n- `partial`: Some data could be fulfilled from the cache but `result` is incomplete. This is only possible when `returnPartialData` is `true`.\n\n- `complete`: `result` is a fully satisfied query result fulfilled either from the cache or network.\n\n## 2. Events\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](Current.md)\\>\n\nEvent triggered when fragment data changes.\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/FromValue.md (Tokens: ~72 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / FromValue\n\n# Type Alias: FromValue\n\n> **FromValue** = `object` \\| `string` \\| `null`\n\nCache identifier: object with `__typename`/`id`, `{ __ref }` reference, or string ID.\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useFragment/type-aliases/ReactiveVariablesParameter.md (Tokens: ~236 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useFragment](../index.md) / ReactiveVariablesParameter\n\n# Type Alias: ReactiveVariablesParameter\n\n> **ReactiveVariablesParameter** = [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`OperationVariables`\\> \\| `Record`\\<`string`, [`MaybeRefOrGetter`](https://vuejs.org/api/utility-types.html#maybereforgetter)\\<`any`\\>\\>\n\nType for the `variables` option parameter: either a ref/getter of the full variables object, or an object mapping individual variable names to refs/getters.\n\n## Example\n\n```ts\n// Single ref/getter for all variables\nconst variables = reactive({ id: 1 })\nuseFragment({ fragment, from, variables })\n\n// Object mapping individual variable names to refs/getters\nconst id = ref(1)\nuseFragment({ fragment, from, variables: { id } })\n\n// With props or any reactive values\nconst { id } = defineProps<{ id: number }>()\nuseFragment({ fragment, from, variables: () => ({ id }) })\n```\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useLazyQuery/index.md (Tokens: ~42 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../index.md) / useLazyQuery\n\n# useLazyQuery\n\n## Interfaces\n\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Options.md (Tokens: ~1019 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Options\n\n# Interface: Options\n\nOptions for useLazyQuery - same as useQuery but `enabled` is not applicable.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the query handles a response that returns both GraphQL errors and partial results.\n\nFor details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).\n\nThe default value is `none`, meaning that the query result includes error details but not partial results.\n\n***\n\n### variables?\n\n> `optional` **variables**: [`ReactiveVariablesParameter`](../../useQuery/type-aliases/ReactiveVariablesParameter.md)\n\nAn object containing all of the GraphQL variables your query requires to execute.\n\nEach key in the object corresponds to a variable name, and that key's value corresponds to the variable value.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext`\n\nIf you're using [Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/), this object is the initial value of the `context` object that's passed along your link chain.\n\n***\n\n### notifyOnNetworkStatusChange?\n\n> `optional` **notifyOnNetworkStatusChange**: `boolean`\n\nIf `true`, the next state event is emitted whenever the network status changes or a network error occurs.\n\n***\n\n### pollInterval?\n\n> `optional` **pollInterval**: `number`\n\nSpecifies the interval (in milliseconds) at which the query polls for updated results.\n\n#### Default\n\n```ts\n0 // (no polling)\n```\n\n***\n\n### skipPollAttempt()?\n\n> `optional` **skipPollAttempt**: () => `boolean`\n\nA callback function that's called whenever a refetch attempt occurs\nwhile polling. If the function returns `true`, the refetch is\nskipped and not reattempted until the next poll interval.\n\n#### Returns\n\n`boolean`\n\n## 3. Caching options\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `WatchQueryFetchPolicy`\n\nSpecifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).\n\nFor details, see [Setting a fetch policy](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy).\n\nThe default value is `cache-first`.\n\n***\n\n### initialFetchPolicy?\n\n> `optional` **initialFetchPolicy**: `WatchQueryFetchPolicy`\n\nDefaults to the initial value of options.fetchPolicy, but can be explicitly\nconfigured to specify the WatchQueryFetchPolicy to revert back to whenever\nvariables change (unless nextFetchPolicy intervenes).\n\n***\n\n### nextFetchPolicy?\n\n> `optional` **nextFetchPolicy**: `WatchQueryFetchPolicy` \\| (`this`, `currentFetchPolicy`, `context`) => `WatchQueryFetchPolicy`\n\nSpecifies the `FetchPolicy` to be used after this query has completed.\n\n***\n\n### refetchWritePolicy?\n\n> `optional` **refetchWritePolicy**: `RefetchWritePolicy`\n\nSpecifies whether a `NetworkStatus.refetch` operation should merge\nincoming field data with existing data, or overwrite the existing data.\nOverwriting is probably preferable, but merging is currently the default\nbehavior, for backwards compatibility with Apollo Client 3.x.\n\n***\n\n### returnPartialData?\n\n> `optional` **returnPartialData**: `boolean`\n\nIf `true`, the query can return partial results from the cache if the cache doesn't contain results for all queried fields.\n\n#### Default\n\n```ts\nfalse\n```\n\n## 4. Vue-Apollo\n\n### awaitComplete?\n\n> `optional` **awaitComplete**: `boolean`\n\nWhether to await complete data before resolving. Use with `@stream` and `@defer` GraphQL directives.\n\nOnly affects SSR prefetch and `await useQuery()`.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### clientId?\n\n> `optional` **clientId**: `string`\n\nID of a named Apollo client to use instead of the default.\n\n***\n\n### debounce?\n\n> `optional` **debounce**: `number`\n\nDebounce variable updates (ms).\n\n***\n\n### keepPreviousResult?\n\n> `optional` **keepPreviousResult**: `boolean`\n\nKeep previous result while loading new data.\n\nThe retained result is reported as a normal result, so `resultState`, `result` and\n`partial` all describe it, with `isPreviousResult` set to `true` so it can be told\napart from a fresh one.\n\n#### Default Value\n\n```ts\nfalse\n```\n\n***\n\n### prefetch?\n\n> `optional` **prefetch**: `boolean`\n\nWhether to prefetch on server.\n\n#### Default Value\n\n```ts\ntrue\n```\n\n***\n\n### throttle?\n\n> `optional` **throttle**: `number`\n\nThrottle variable updates (ms).\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useLazyQuery/interfaces/Result.md (Tokens: ~2817 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useLazyQuery](../index.md) / Result\n\n# Interface: Result\n\nResult returned by useLazyQuery - extends useQuery.Result with `load` function.\n\n## 1. Operation data\n\n### current\n\n> **current**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nCurrent state as a discriminated union type.\n\n***\n\n### error\n\n> **error**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ErrorLike` \\| `undefined`\\>\n\nA single ErrorLike object describing the error that occurred during the latest query execution.\n\nFor more information, see [Handling operation errors](https://www.apollographql.com/docs/react/data/error-handling/).\n\n***\n\n### isPreviousResult\n\n> **isPreviousResult**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `result` was kept from the previous variables by the `keepPreviousResult` option, and does not correspond to the current `variables`.\n\n`resultState`, `result` and `partial` describe the retained result, so narrowing on `resultState` is always safe. `loading`, `networkStatus` and `error` describe the request that is replacing it.\n\n***\n\n### result\n\n> **result**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`object` \\| `null`\\>\n\nAn object containing the result of your GraphQL query after it completes.\n\nThis value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).\n\n## 2. Network info\n\n### loading\n\n> **loading**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, the query is busy. That covers a request in flight, new variables waiting out the `debounce`/`throttle` timer, and the hand-over in between, where the variables have been accepted but the request has not gone out yet.\n\nBroader than `networkStatus < 7`, which describes only the request itself.\n\n***\n\n### networkStatus\n\n> **networkStatus**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`NetworkStatus`\\>\n\nA number indicating the current network state of the query's associated request. [See possible values.](https://github.com/apollographql/apollo-client/blob/d96f4578f89b933c281bb775a39503f6cdb59ee8/src/core/networkStatus.ts#L4)\n\nDescribes the network only: it stays `ready` while `pending` is `true`.\n\nUsed in conjunction with the [`notifyOnNetworkStatusChange`](./Options.md#notifyonnetworkstatuschange) option.\n\n***\n\n### pending\n\n> **pending**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`boolean`\\>\n\nIf `true`, `variables` have changed and a request is committed, but has not been issued yet because of the `debounce` or `throttle` option.\n\n`loading` covers this window as well; use `pending` to tell a timer that has not elapsed apart from a request that is actually on the wire.\n\n## 3. Refs\n\n### document\n\n> **document**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`DocumentNode`\\>\n\nThe GraphQL document being queried.\n\n***\n\n### options\n\n> **options**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<[`Options`](../../useQuery/interfaces/Options.md)\\>\n\nCurrent options.\n\n***\n\n### query\n\n> **query**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`ObservableQuery`\\<`unknown`, `OperationVariables`\\> \\| `undefined`\\>\n\nThe underlying Apollo ObservableQuery instance. Undefined when the query is stopped.\n\n***\n\n### variables\n\n> **variables**: [`Ref`](https://vuejs.org/api/reactivity-core.html#ref)\\<`OperationVariables`\\>\n\nCurrent variables being sent to the query (after debounce/throttle).\n\n## 4. Lifecycle\n\n### load()\n\n> **load**: (`variables?`) => `Promise`\\<`object` \\| `undefined`\\>\n\nLoad the query. Starts the query if not already started.\n\nUnlike `useQuery`, which executes immediately, `useLazyQuery` waits until `load()` is called. After loading, the query behaves like a normal `useQuery`.\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this load. If provided, these will be merged with any variables from options.\n\n#### Returns\n\n`Promise`\\<`object` \\| `undefined`\\>\n\nPromise resolving to the query result data when complete.\n\n#### Example\n\n```ts\nconst { load, result, loading } = useLazyQuery(GetUser)\n\n// Query doesn't execute until load() is called\nasync function fetchUser(id: string) {\n  const data = await load({ id })\n  console.log('User loaded:', data)\n}\n```\n\n***\n\n### restart()\n\n> **restart**: () => `Promise`\\<`void`\\>\n\nStop and restart the query.\n\n#### Returns\n\n`Promise`\\<`void`\\>\n\n***\n\n### start()\n\n> **start**: () => `void`\n\nStart the query. Has no effect if the query is already active or if `enabled` option is `false`.\n\n#### Returns\n\n`void`\n\n***\n\n### stop()\n\n> **stop**: () => `void`\n\nStop the query. The query can be restarted by calling [start](#start).\n\n#### Returns\n\n`void`\n\n## 5. Query methods\n\n### fetchMore()\n\n> **fetchMore**: (`options`) => `Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nFetch more data for pagination or infinite scroll.\n\nUse this to load additional items (e.g., next page) and merge them with existing results. The reactive refs will update automatically when the fetch completes.\n\n::: tip How data is merged\n\nYou can merge data in two ways:\n\n1. **`updateQuery` callback** - Manually merge `fetchMoreResult` with `previousQueryResult`\n\n2. **Field policies** - Define `merge` functions in your Apollo cache configuration\n\nIf using `fetchPolicy: 'no-cache'`, you **must** provide `updateQuery`.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`FetchMoreOptions`](../../useQuery/interfaces/FetchMoreOptions.md)\n\nOptions including variables for the next page and optional updateQuery.\n\n#### Returns\n\n`Promise`\\<[`FetchMoreResult`](../../useQuery/interfaces/FetchMoreResult.md)\\> \\| `undefined`\n\nPromise resolving to the fetchMore result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { result, fetchMore } = useQuery(GetPosts, {\n  variables: { offset: 0, limit: 10 }\n})\n\nasync function loadMore() {\n  await fetchMore({\n    variables: { offset: result.value.posts.length },\n    updateQuery: (previousQueryResult, { fetchMoreResult }) => ({\n      ...previousQueryResult,\n      posts: [...previousQueryResult.posts, ...fetchMoreResult.posts]\n    })\n  })\n}\n```\n\n***\n\n### refetch()\n\n> **refetch**: (`variables?`) => `Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nRe-execute the query, optionally with new variables.\n\nUse this for imperative refetching (e.g., \"refresh\" buttons, pull-to-refresh).\nThe reactive `current`, `result`, `loading`, etc. refs will update automatically\nwhen the refetch completes.\n\n::: tip When to use refetch vs reactive variables\n\n- Use **reactive `variables`** in options for variables that should stay in sync\n  with your component state (e.g., route params, form inputs).\n- Use **`refetch()`** for one-time imperative fetches that don't need to persist.\n\n:::\n\n::: warning Variables passed to refetch are temporary\n\nIf you pass variables to `refetch({ id: 2 })`, Apollo uses them for this single\nrequest only. The exposed `variables` ref will **not** update. If your reactive\n`options.variables` changes later, the query will use those values, not the ones\npassed to refetch.\n\n:::\n\n#### Parameters\n\n##### variables?\n\n`OperationVariables`\n\nOptional variables to use for this refetch only.\n\n#### Returns\n\n`Promise`\\<`RenameKey`\\<`QueryResult`\\<`unknown`\\>, `\"data\"`, `\"result\"`\\> \\| `undefined`\\>\n\nPromise resolving to the query result, or `undefined` if query is stopped.\n\n#### Example\n\n```ts\nconst { refetch } = useQuery(GetUser, { variables: { id: userId } })\n\n// Re-run with current variables\nawait refetch()\n\n// One-time refetch with different variables\nawait refetch({ id: 'other-user' })\n```\n\n***\n\n### subscribeToMore()\n\n> **subscribeToMore**: (`options`) => () => `void` \\| `undefined`\n\nSubscribe to additional data and merge it with the query result.\n\nUse this to add real-time updates to a query via GraphQL subscriptions. When subscription data arrives, the `updateQuery` callback merges it with the existing query data.\n\n::: tip Automatic cleanup\n\nThe subscription is automatically cleaned up when the query is stopped or the component is unmounted. You can also manually unsubscribe by calling the returned function.\n\n:::\n\n#### Parameters\n\n##### options\n\n[`SubscribeToMoreOptions`](../../useQuery/interfaces/SubscribeToMoreOptions.md)\n\nSubscription options including document, variables, and updateQuery.\n\n#### Returns\n\n() => `void` \\| `undefined`\n\nUnsubscribe function to manually stop the subscription.\n\n#### Example\n\n```ts\nconst { subscribeToMore } = useQuery(GetMessages, {\n  variables: { channelId }\n})\n\n// Subscribe to new messages\nconst unsubscribe = subscribeToMore({\n  document: OnMessageAdded,\n  variables: { channelId },\n  updateQuery: (_, { previousData, subscriptionData }) => {\n    if (!subscriptionData.data) return previousData\n    return {\n      ...previousData,\n      messages: [...previousData.messages, subscriptionData.data.messageAdded]\n    }\n  }\n})\n\n// Optionally unsubscribe manually\nonUnmounted(() => unsubscribe())\n```\n\n***\n\n### updateQuery()\n\n> **updateQuery**: (`mapFn`) => `void`\n\nDirectly update the cached query result.\n\nUse this to optimistically update the cache or modify data without a network request. The reactive refs will update automatically when the cache is written.\n\n::: warning Use sparingly\n\nPrefer cache field policies or [`client.writeQuery`](https://www.apollographql.com/docs/react/api/core/ApolloClient#writequery) for most cache updates. `updateQuery` is useful for quick local modifications but bypasses Apollo's normal cache update mechanisms.\n\n:::\n\n#### Parameters\n\n##### mapFn\n\n(`unsafePreviousData`, `options`) => `object`\n\nFunction that receives current data and returns new data.\n\n#### Returns\n\n`void`\n\n#### Example\n\n```ts\nconst { updateQuery } = useQuery(GetTodos)\n\nfunction addOptimisticTodo(todo: Todo) {\n  updateQuery((_, { previousData }) => ({\n    ...previousData,\n    todos: [...previousData.todos, todo]\n  }))\n}\n```\n\n## 6. Events\n\n### onCompleteResult\n\n> **onCompleteResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a complete query result is received.\n\nFires only when `resultState` is `'complete'`.\n\n***\n\n### onError\n\n> **onError**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`ErrorLike`\\>\n\nEvent triggered when a query error occurs.\n\n***\n\n### onNextState\n\n> **onNextState**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<[`Current`](../../useQuery/interfaces/Current.md)\\>\n\nEvent triggered when the query state changes.\n\nThis is the most granular event - it fires on every state update including loading states, network status changes, and result updates.\n\n***\n\n### onPartialResult\n\n> **onPartialResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when a partial query result is received.\n\nFires only when `resultState` is `'partial'`. Requires `returnPartialData: true`.\n\n***\n\n### onResult\n\n> **onResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when query result data is received.\n\nFires when `resultState` is `'complete'`, `'partial'`, or `'streaming'`. Does not fire for `'empty'` state or errors.\n\nA result served from the cache during the `useQuery()` call is replayed on the next tick, so a handler registered right after the call still receives it.\n\n***\n\n### onStreamingResult\n\n> **onStreamingResult**: [`EventHookOn`](https://vueuse.org/shared/createEventHook/#type-declarations)\\<`object`\\>\n\nEvent triggered when streaming query data is received.\n\nFires only when `resultState` is `'streaming'`. Use with `@defer` or `@stream` directive.\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useMutation/index.md (Tokens: ~88 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../index.md) / useMutation\n\n# useMutation\n\n## Type Aliases\n\n- [ReactiveVariablesParameter](type-aliases/ReactiveVariablesParameter.md)\n\n## Interfaces\n\n- [MutateOptions](interfaces/MutateOptions.md)\n- [MutateResult](interfaces/MutateResult.md)\n- [Options](interfaces/Options.md)\n- [Result](interfaces/Result.md)\n\n<!-- File: packages/docs/api/composable/@vue/namespaces/useMutation/interfaces/MutateOptions.md (Tokens: ~817 | Category: anthropic-skill) -->\n[@vue/apollo-composable](../../../../index.md) / [useMutation](../index.md) / MutateOptions\n\n# Interface: MutateOptions\n\nOptions when calling the mutate function.\n\n## 1. Operation options\n\n### errorPolicy?\n\n> `optional` **errorPolicy**: `ErrorPolicy`\n\nSpecifies how the mutation handles a response that returns both GraphQL errors and partial results.\n\nThe default value is `none`, meaning that the mutation result includes error details but _not_ partial results.\n\n***\n\n### optimisticResponse?\n\n> `optional` **optimisticResponse**: `object` \\| (`vars`) => `object`\n\nBy providing either an object or a callback function that, when invoked after a mutation, allows you to return optimistic data and optionally skip updates via the `IGNORE` sentinel object, Apollo Client caches this temporary (and potentially incorrect) response until the mutation completes, enabling more responsive UI updates.\n\n***\n\n### variables?\n\n> `optional` **variables**: `OperationVariables`\n\nVariables for this mutation call.\n\n## 2. Networking options\n\n### context?\n\n> `optional` **context**: `DefaultContext` \\| (`composableContext`) => `DefaultContext`\n\nContext can be a callback or object.\n\n## 3. Caching options\n\n### awaitRefetchQueries?\n\n> `optional` **awaitRefetchQueries**: `boolean`\n\nIf `true`, makes sure all queries included in `refetchQueries` are completed before the mutation is considered complete.\n\n#### Default\n\n```ts\nfalse\n```\n\n***\n\n### fetchPolicy?\n\n> `optional` **fetchPolicy**: `MutationFetchPolicy`\n\nProvide `no-cache` if the mutation's result should _not_ be written to the Apollo Client cache.\n\nThe default value is `network-only` (which means the result _is_ written to the cache).\n\n***\n\n### keepRootFields?\n\n> `optional` **keepRootFields**: `boolean`\n\nIf `true`, keeps ROOT_MUTATION fields in the cache after mutation completes. By default, Apollo Client clears these to avoid retaining sensitive data.\n\n***\n\n### onQueryUpdated()?\n\n> `optional` **onQueryUpdated**: (`observableQuery`) => `boolean` \\| `Promise`\\<`unknown`\\>\n\nOptional callback for intercepting queries whose cache data has been updated by the mutation, as well as any queries specified in the `refetchQueries: [...]` list passed to `client.mutate`.\n\nReturning a `Promise` from `onQueryUpdated` will cause the final mutation `Promise` to await the returned `Promise`. Returning `false` causes the query to be ignored.\n\n#### Parameters\n\n##### observableQuery\n\n`object`\n\n#### Returns\n\n`boolean` \\| `Promise`\\<`unknown`\\>\n\n***\n\n### refetchQueries?\n\n> `optional` **refetchQueries**: (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[] \\| (`result`) => (`string` \\| \\{ `query`: `DocumentNode`; `variables?`: `object`; \\})[]\n\nAn array (or a function that _returns_ an array) that specifies which queries you want to refetch after the mutation occurs.\n\nEach array value can be either:\n\n- An object containing the `query` to execute, along with any `variables`\n\n- A string indicating the operation name of the query to refetch\n\n***\n\n### update()?\n\n> `optional` **update**: (`cache`, `result`) => `void`\n\nA function used to update the Apollo Client cache after the mutation completes.\n\n#### Parameters\n\n##### cache\n\n`ApolloCache`\n\n##### result\n\n###### data?\n\n`object`\n\n#### Returns\n\n`void`\n\n***\n\n### updateQueries?\n\n> `optional` **updateQueries**: `Record`\\<`string`, (`prev`, `options`) => `object`\\>\n\nA `MutationQueryReducersMap`, which is map from query names to mutation query reducers. Briefly, this map defines how to incorporate the results of the mutation into the results of queries that are currently being watched by your application.\n\n<!-- ... +70 more modular skills available via /api/skills/vuejs/apollo?path={path} -->\n</yakaai_skills>"}