The missing data fetching library for Pinia
This is a more complete and production-ready (not yet!) version of the exercises from Mastering Pinia.
Note
Pinia Colada is in active development not ready for production. New versions might introduce breaking changes. Feedback regarding new and existing options and features is welcome! Documentation is a work in progress and contributions are welcome.
Pinia Colada is an opinionated yet flexible data fetching layer on top of Pinia. It's built as a set of pinia plugins, stores and composables to benefit from Pinia's features and ecosystem. Pinia Colada has:
- ⚡️ Automatic caching: Smart client-side caching with request deduplication
- 🗄️ Async State: Handle any async state
- 📚 Typescript Support: Fully typed with Typescript
- 💨 Bundle Size: Small bundle size (<2kb) and fully tree-shakeable
- 📦 Zero Dependencies: No dependencies other than Pinia
- ⚙️ SSR: Server-side rendering support
- 🔌 Plugins: Powerful plugin system
npm install pinia @pinia/coladaInstall the plugins for the features you need:
import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'
app.use(createPinia())
// install after pinia
app.use(PiniaColada, {
// optional options
})<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
import { updateContact as _updateContact, getContactById } from '~/api/contacts'
const route = useRoute()
const caches = useQueryCache()
const { data: contact, isLoading } = useQuery({
// recognizes this query as ['contacts', id]
key: () => ['contacts', route.params.id],
query: () => getContactById(route.params.id),
})
const { mutate: updateContact } = useMutation({
mutation: _updateContact,
onSettled({ id }) {
caches.invalidateQueries({ key: ['contacts', id], exact: true })
},
})
</script>
<template>
<section>
<ContactCard
:key="contact.id"
:contact="contact"
:is-updating="isLoading"
@update:contact="updateContact"
/>
</section>
</template>