@pinia/colada

Pinia Colada

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

Installation

npm install pinia @pinia/colada

Install 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
})

Usage

<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>

License

MIT