Pinia Colada (WIP)

The missing data fetching library for Pinia

This is a more complete and production-ready (not yet!) version of the exercises from Mastering Pinia.

Warning

Pinia Colada is still experimental and not ready for production. New versions might introduce breaking changes. Feedback regarding new and existing options and features is welcome!

Pinia Colada is an opinionated yet flexible data fetching layer on top of Pinia. It features

• ⚡️ 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

Installation

npm install pinia @pinia/colada

Install the plugins for the features you need:

import { createPinia } from 'pinia'
import { QueryPlugin } from '@pinia/colada'

app.use(createPinia())
// install after pinia
app.use(QueryPlugin, {
  // optional options
})

Usage

<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { useMutation, useQuery } from '@pinia/colada'
import { updateContact as _updateContact, getContactById } from '~/api/contacts'

const route = useRoute()

const { data: contact, isFetching } = useQuery({
  // recognizes this query as ['contacts', id]
  key: () => ['contacts', route.params.id],
  query: () => getContactById(route.params.id),
})

const { mutate: updateContact } = useMutation({
  // automatically invalidates the cache for ['contacts'] and ['contacts', id]
  keys: ({ id }) => [['contacts'], ['contacts', id]],
  mutation: _updateContact,
})
</script>

<template>
  <section>
    <ContactCard
      :key="contact.id"
      :contact="contact"
      :is-updating="isFetching"
      @update:contact="updateContact"
    />
  </section>
</template>

License

MIT