Examples of using Pinia Colada in Pinia stores?

[brandonleichty]

Hello!

I was wondering if there are any good examples of using Pinia Colada with Pinia?

The main reason I want to use it in Pinia is for when I need global state.

As a pseudo code example, let's say I want to fetch a user from a GraphQL endpoint. Would a Pinia setup store look something like this:

export const useUserStore = defineStore('user-store', () => {
  const { data, error, isLoading, isPending } = useQuery({
    key: ['user'],
    query: () => client.request(document),
  })

  return {
    data,
    error,
    isLoading,
    isPending,
  }
})

Additionally, when would the actual API call be made? Do I need to manually call refresh?

Appreciate any help and insight! 🙏

[onmax]

Hey, maybe this helps: https://pinia-colada.esm.dev/guide/queries.html#Caveat-SSR-and-defineQuery-

[brandonleichty]

@onmax thanks for the reply!

Looking at that example, I'm still a bit confused...

I'm looking to use this in a Vue app without SSR (not Nuxt), so I removed the SSR portion for simplicity.
I see that search and query are being returned from defineQuery. But how would I actually access that in Vue component?

  return {
    search,
    ...query,
  }

import { defineStore, storeToRefs } from 'pinia'

const useLocalStore = defineStore('query-search-store', () => {
  const search = ref('')
  return { search }
})

defineQuery(() => {
  const { search } = storeToRefs(useLocalStore())

  const query = useQuery({
    key: ['todos', search.value],
    query: () => fetch(`/api/todos?search=${search.value}`).then((res) => res.json()),
  })
  return {
    search,
    ...query,
  }
})

[onmax]

I might be wrong but I think you need to export the store from the file:

import { defineStore, storeToRefs } from 'pinia'

// export the store
export const useLocalStore = defineStore('query-search-store', () => {
  const search = ref('')
  return { search }
})

defineQuery(() => {
  const { search } = storeToRefs(useLocalStore())

  const query = useQuery({
    key: ['todos', search.value],
    query: () => fetch(`/api/todos?search=${search.value}`).then((res) => res.json()),
  })
  return {
    search,
    ...query,
  }
})

[onmax]

I made a pr #215

[brandonleichty]

Even if the store is exported, how do I access the query values? It doesn’t look like those are part of the Pinia store or importable anywhere?

[posva]

For that you can use:

import { defineQuery, useQuery } from '@pinia/colada'
import { useRouteQuery } from '@vueuse/router'
import { searchContacts } from '@/api/contacts'

export const useContactSearch = defineQuery(() => {
  const searchText = useRouteQuery('search', '', { mode: 'push' })
  const { ...query } = useQuery({
    key: () => ['contacts-search', { searchText: searchText.value }],
    query: async ({ signal }) => searchContacts(searchText.value, {}, { signal }),
    staleTime: 0,
    // avoids flickering when the search text changes
    placeholderData: (previousData) => previousData,
    // avoids displaying the "Loading..." too quickly
    // makes your app look more responsive
    delay: 200,
  })
  return { ...query, searchText }
})

You don't need to export the store. In fact, since you are not using SSR, you don't need to even use a store (the caveat is only for SSR)

[brandonleichty]

Nice! And if I wanted to update some value in the store, I could import the store into the defineQuery? For example:

export const useContactSearch = defineQuery(() => {
  const { exampleValue } = storeToRefs(useExampleStore())

[posva]

Yes, you should be able to import a store in defineQuery

[brandonleichty]

Really appreciate the help! 🙏

[posva]

Regarding using queries in stores, the warning at https://pinia-colada.esm.dev/guide/queries.html#Pausing-queries is relevant:

This is also valid for any global query, e.g. a query within a store. Since stores are never destroyed, the query will continuously watch the key and refresh when needed. Most of the time, it's a bad idea to consume a query within a store, as it will make the query immortal. If you need to use the data from the store, you can instead, consume the query cache with useQueryCache().