Skip to content

quiteeasy/pinia-colada

 
 

Repository files navigation

Pinia Colada logo


npm package build status


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.

Mastering Pinia banner

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

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

About

🍹 The smart data fetching layer for Pinia

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 81.1%
  • Vue 14.7%
  • JavaScript 3.7%
  • Other 0.5%