Compose data in vue by using useQuery data in a Pinia store?

[SagewLivingstone]

Hey all!

I'm trying to add a layer (in the form of a Pinia store) between the useQuery for an object and the handful of components that use it. The reason for this Pinia store is that the page is quite complicated and has a bunch of components that interact with each other, so there is an overall "page" store that handles interfacing between all the components. I'd love to integrate vue-query into this so I can make use of caching and some of the other features, but I'm struggling to get it to work.

I understand using useQuery outside of setup or injectable context might break some reactivity, but I'm looking for some help/ideas towards what I'm trying to achieve. Here's what I've tried so far:

// api/todos.ts

// Wrapping query in a composable...
// Maybe I could put some computed's in here, but I'd like to keep this data layer separate from page logic
export function useTodos() {
    const { data: todos } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos });

    return { todos };
}

And the page store:

// stores/page.ts

export const usePageStore = defineStore("page", () => {
    const { todos } = useTodos();

    const todosByUserId = computed(() => {
        return _.groupBy(todos.value, "userId");
    });

    // lots of other getters...
    // lots of other actions...
    
    return {
        todosByUserId,

        // ...
    }
});

Then, my page is a composite of a bunch of components that each use different parts (some overlap) of the store:

<!-- Page.vue -->

<template>
    <TodoMenuBar />    <!-- Uses entirety of the "todos" data to show options/filters -->
    <TodoList />       <!-- Uses entirety of the "todos" data to show a list -->
    <TodoDetailsSideBar />    <!-- Can show a single todo item -->
    <!-- More components... -->
</template>

The problem is, the todosByUserId computed does not reactively update to when the todos query finishes, it just remains empty. However, if I move that computed value into one of the components themselves, it works. Is useQuery not meant to be used like this, or am I missing something reactivity-wise? Composing complex data into shared stores seems natural in my head, but let me know if I'm missing something here. Thanks!

[Mini-ghost]

Hi! Can you provide a minimal reproduction for this problem?

[Filip1139]

Do You find solution? I have same problem

[ikliko]

I think your code is related to reactivity and lifecycle hooks in Vue and Pinia. Also vue-query have specifications. I will give you some code examples below.

api/todos.ts

import { useQuery } from 'vue-query';

export function useTodos() {
    const { data: todos, isLoading, isError } = useQuery({
        queryKey: ["todos"],
        queryFn: fetchTodos
    });

    return { todos, isLoading, isError };
}

stores/page.ts

import { defineStore } from 'pinia';
import { ref, computed, watchEffect } from 'vue';
import { useTodos } from '../api/todos';

export const usePageStore = defineStore('page', () => {
    const { todos, isLoading, isError } = useTodos();

    const todosRef = ref([]);
    const isLoadingRef = ref(true);
    const isErrorRef = ref(false);

    watchEffect(() => {
        if (todos.value) {
            todosRef.value = todos.value;
        }
        isLoadingRef.value = isLoading.value;
        isErrorRef.value = isError.value;
    });

    const todosByUserId = computed(() => {
        return _.groupBy(todosRef.value, 'userId');
    });

    return {
        todosRef,
        isLoadingRef,
        isErrorRef,
        todosByUserId
    };
});

Page.vue

<template>
    <TodoMenuBar />
    <TodoList />
    <TodoDetailsSideBar />
    <!-- More components... -->
</template>

<script setup>
import { usePageStore } from '../stores/page';

const pageStore = usePageStore();
</script>

TodoMenuBar.vue

<template>
    <div v-if="isLoading">Loading...</div>
    <div v-else>
        <!-- more code  -->
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { usePageStore } from '../stores/page';

const pageStore = usePageStore();
const todos = computed(() => pageStore.todosRef);
const isLoading = computed(() => pageStore.isLoadingRef);
const todosByUserId = computed(() => pageStore.todosByUserId);
</script>

[SagewLivingstone]

Sorry, forgot about this thread. I did end up figuring out the issue. Here's a min example if anyone is stuck on this.

(Not sure what the comment above me is trying to say. I wouldn't recommend using watchEffect to manage values like they are doing. Passing around refs is just fine.)