Is My Approach to Using Pinia-Colada with a Pinia Store for Filters Correct?

[loic-bellinger]

Hi everyone,

I’m building a Vue 3 app using Pinia and Pinia-Colada, and I’d like to confirm if the approach I’m using to integrate my filters logic and API queries is appropriate.

Context

I have a classic Pinia store called filtersStore, which is used to store filter values for several dashboard pages. These filters include properties like date ranges, themes, and sources.

Current Approach

Here’s how I’ve set up my query using defineQuery:

import { defineQuery } from '@pinia/colada';
import { useFiltersStore } from '@/stores/filters';
import { apiClient } from '@/api';

const filtersStore = useFiltersStore();

export const nbPosts = defineQuery({
  key: () => ['nb_posts', filtersStore.apiPayload],
  query: () => apiClient.post('/v1/nb_post', filtersStore.apiPayload),
});

For context, filtersStore.apiPayload is a computed property in the filtersStore Pinia store that generates the payload based on the selected filters.

API Client

Here’s the basic API client I’m using:

export const apiClient = {
  async post(endpoint, payload) {
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(payload),
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.statusText}`);
    }

    return response.json();
  },
};

---

Questions

1. Is my current setup for defineQuery a good approach, given that the filtersStore is a reactive Pinia store? It seems to work as expected when filtersStore.apiPayload updates but I may have missed some edge cases.
2. Is there a better way to integrate the filtersStore into defineQuery, such as passing it explicitly as a parameter?
3. Does my apiClient implementation look appropriate for use with Pinia-Colada? Are there any potential improvements or pitfalls I should be aware of?

I want to ensure that this approach will be maintainable and perform well, especially since the filtersStore is shared across multiple dashboard pages and that I will have many endpoints to query.

Thanks in advance for your feedback!

[posva]

I would just adapt the store usage:

import { defineQuery } from '@pinia/colada';
import { useFiltersStore } from '@/stores/filters';
import { apiClient } from '@/api';

export const useNbPosts = defineQuery(() => {
  const filtersStore = useFiltersStore();
  return useQuery({
    key: () => ['nb_posts', filtersStore.apiPayload],
    query: () => apiClient.post('/v1/nb_post', filtersStore.apiPayload),
  })
});

[loic-bellinger]

Alright, but if I define many queries, I have to write const filtersStore = useFiltersStore(); for each of them, and that feels like a lot of boilerplate. Could you elaborate a bit more on your answer? Why is my proposal contraindicated in this case?

[posva]

It is needed, yes. See https://pinia.vuejs.org/core-concepts/outside-component-usage.html

[loic-bellinger]

But the doc also states that any call of useStore() after installing the pinia plugin with app.use(pinia) will work. Since I'm exclusively importing query inside Vue components, is there really a risk here?

Anyway, I'll follow your lead, you know best for sure. Thanks for your answer!

[posva]

It’s better to follow the rule
There are risks for SSR and plugins