https://github.com/posva/pinia-colada

🍹 The smart data fetching layer for Pinia
https://github.com/posva/pinia-colada

data-fetching mutation pinia plugin query vue

Last synced: 25 days ago
JSON representation

🍹 The smart data fetching layer for Pinia

• Host: GitHub
• URL: https://github.com/posva/pinia-colada
• Owner: posva
• License: mit
• Created: 2023-12-20T08:37:26.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-04-09T08:00:15.000Z (3 months ago)
• Last Synced: 2024-04-14T10:15:35.940Z (2 months ago)
• Topics: data-fetching, mutation, pinia, plugin, query, vue
• Language: TypeScript
• Homepage: https://pinia-colada.esm.dev/
• Size: 941 KB
• Stars: 453
• Watchers: 5
• Forks: 3
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Lists

• my-awesome-stars - posva/pinia-colada - 🍹 The smart data fetching layer for Pinia (TypeScript)
• awesome-stars - posva/pinia-colada - 🍹 The smart data fetching layer for Pinia (TypeScript)

README

        


  








  

    

  

  

    

  

  

    

  






# Pinia Colada (WIP)

> The missing data fetching library for [Pinia](https://pinia.vuejs.org)

This is a more complete and production-ready (not yet!) version of the exercises from [Mastering Pinia](https://masteringpinia.com/).



  



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

```sh

npm install pinia @pinia/colada

```

Install the plugins for the features you need:

```js

import { createPinia } from 'pinia'

import { QueryPlugin } from '@pinia/colada'

app.use(createPinia())

// install after pinia

app.use(QueryPlugin, {

  // optional options

})

```

## Usage

```vue

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,

})

  

    

  

```

## License

[MIT](http://opensource.org/licenses/MIT)