Vue-unquery NPM

🪺 vue-unquery

Lightweight data management for Vue in suspense & non-suspense contexts.

Basically an identical fork of TurboVue, but also suited for non-suspense setups.

All the credits to Erik C. Forés for his amazing work.

Key Features

🎠 Create a query resource:
- Suspense contexts: useAsyncQuery
- Non-suspense contexts: useQuery
⛲️ Support for lazy fetching via immediate: false option in non-suspense environments

Usage

Suspense Context

const [post, { isRefetching, refetch, mutate, error }] = await useAsyncQuery<Post>(
  () => `https://jsonplaceholder.typicode.com/posts/${props.id}`,
)

Non-Suspense Context

const [post, { isRefetching, refetch, mutate, error }] = useQuery<Post>(
  () => `https://jsonplaceholder.typicode.com/posts/${props.id}`,
)

Prevent initial data fetching with immediate: false:

const [post, { isRefetching, refetch, mutate, error }] = useQuery<Post>(
  () => `https://jsonplaceholder.typicode.com/posts/${props.id}`,
  { immediate: false }
)

// Later, call:
refetch()

Configuration

Note
All options from Turbo Query apply.

import { configure } from 'vue-unquery'

configure({
  async fetcher(key, { signal }) {
    const response = await fetch(key, { signal })
    if (!response.ok)
      throw new Error('Fetch request failed')
    return await response.json()
  },
})