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

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

Usage

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

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', id]
  keys: ({ id }) => ['contacts', id],
  mutation: _updateContact,
})
</script>

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

License

MIT

Changelog

0.3.0 (2024-02-03)

⚠ BREAKING CHANGES

• The option fetcher for useQuery() has been renamed to query. The option mutator for useMutation() has been renamed mutation.

Code Refactoring

• rename options for useQuery and useMutation (28ecc75)