https://github.com/johannschopplich/vue-unquery
🪺 Lightweight data management for Vue in suspense & non-suspense contexts
https://github.com/johannschopplich/vue-unquery
suspense vue-plugin vue-query
Last synced: 6 months ago
JSON representation
🪺 Lightweight data management for Vue in suspense & non-suspense contexts
- Host: GitHub
- URL: https://github.com/johannschopplich/vue-unquery
- Owner: johannschopplich
- License: mit
- Archived: true
- Created: 2022-05-09T11:46:24.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-10T10:00:30.000Z (over 1 year ago)
- Last Synced: 2024-12-01T03:50:16.134Z (6 months ago)
- Topics: suspense, vue-plugin, vue-query
- Language: TypeScript
- Homepage:
- Size: 611 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🪺 vue-unquery
[](https://www.npmjs.com/package/vue-unquery)
> Lightweight data management for Vue in suspense & non-suspense contexts.
Basically an identical fork of [TurboVue](https://github.com/StudioLambda/TurboVue), but also suited for non-suspense setups.
All the credits to [Erik C. Forés](https://github.com/ConsoleTVs) 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
```ts
const [post, { isRefetching, refetch, mutate, error }] = await useAsyncQuery(
() => `https://jsonplaceholder.typicode.com/posts/${props.id}`,
)
```
### Non-Suspense Context
```ts
const [post, { isRefetching, refetch, mutate, error }] = useQuery(
() => `https://jsonplaceholder.typicode.com/posts/${props.id}`,
)
```
Prevent initial data fetching with `immediate: false`:
```ts
const [post, { isRefetching, refetch, mutate, error }] = useQuery(
() => `https://jsonplaceholder.typicode.com/posts/${props.id}`,
{ immediate: false }
)
// Later, call:
refetch()
```
### Configuration
> **Note**
>
> All options from [Turbo Query](./src/turbo-query/README.md) apply.
```ts
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()
},
})
```
## 💻 Development
1. Clone this repository
2. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
3. Install dependencies using `pnpm install`
4. Start development server using `pnpm run dev` inside `playground`
## License
[MIT](./LICENSE) License © 2022-2023 [Johann Schopplich](https://github.com/johannschopplich)
[MIT](./LICENSE) License © 2022 [Erik C. Forés](https://github.com/ConsoleTVs)