Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/posva/pinia-colada
🍹 The smart data fetching layer for Pinia
https://github.com/posva/pinia-colada
data-fetching mutation pinia pinia-plugin plugin query vue
Last synced: 2 days ago
JSON representation
🍹 The smart data fetching layer for Pinia
- Host: GitHub
- URL: https://github.com/posva/pinia-colada
- Owner: posva
- License: mit
- Created: 2023-12-20T08:37:26.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-10-29T20:58:57.000Z (5 days ago)
- Last Synced: 2024-10-29T22:50:37.547Z (5 days ago)
- Topics: data-fetching, mutation, pinia, pinia-plugin, plugin, query, vue
- Language: TypeScript
- Homepage: https://pinia-colada.esm.dev
- Size: 1.93 MB
- Stars: 912
- Watchers: 12
- Forks: 18
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Pinia Colada
> The missing data fetching library for [Pinia](https://pinia.vuejs.org)
Pinia Colada makes data fetching in Vue applications a breeze. It's built on top of [Pinia](https://pinia.vuejs.org) and takes away all of the complexity and boilerplate that comes with fetching data. It's fully typed and tree-shakeable, and it's built with the same principles as Pinia and Vue: It's approachable, flexible, powerful and can be progressively adopted.
> [!TIP]
> This is a feature-complete version of the exercises from [Mastering Pinia](https://masteringpinia.com/?utm=pinia-colada-readme). If you would like to learn how it started and become an expert in Vue state management, check it out!
>
>
> 
>
## Features
- ⚡️ **Automatic caching**: Smart client-side caching with request deduplication
- 🗄️ **Async State**: Handle any async state
- 🔌 **Plugins**: Powerful plugin system
- ✨ **Optimistic Updates**: Optimistic updates with ease
- 💡 **Sensible defaults**: Sane defaults with full customization
- 🧩 **Out-of-the box plugins**: A set of composable functions to handle data fetching
- 📚 **Typescript Support**: Fully typed with Typescript
- 💨 **Small Bundle Size**: A baseline of ~2kb and fully tree-shakeable
- 📦 **Zero Dependencies**: No dependencies other than Pinia
- ⚙️ **SSR**: Out of the box server-side rendering support
> [!NOTE]
> Pinia Colada is always trying to improve and evolve.
> Feedback regarding new and existing options and features is very welcome!
> Contribution to documentation, issues, and pull requests are highly appreciated.
## Installation
```sh
npm install pinia @pinia/colada
```
Install the plugins for the features you need:
```ts
import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'
app.use(createPinia())
// install after pinia
app.use(PiniaColada, {
// optional options
})
```
## Usage
The core of Pinia Colada is the `useQuery` and `useMutation` functions. They are used to read data and write it respectively. Here's a simple example:
```vue
import { useRoute } from 'vue-router'
import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
import { patchContact, getContactById } from '~/api/contacts'
const route = useRoute()
const queryCache = useQueryCache()
const { data: contact, isPending } = useQuery({
// unique key for the query in the cache
key: () => ['contacts', route.params.id],
query: () => getContactById(route.params.id),
})
const { mutate: updateContact, isLoading } = useMutation({
mutation: patchContact,
async onSettled({ id }) {
// invalidate the query to refetch the data of the query above
await queryCache.invalidateQueries({ key: ['contacts', id], exact: true })
},
})
Loading...
```
Learn more about the core concepts and how to use them in the [documentation](https://pinia-colada.esm.dev).
## License
[MIT](http://opensource.org/licenses/MIT)