Cache individual but request multiple

[NikitaVelixJob]

Hello! Love this library, I started using it EVERYWHERE.

My question is how to make it right. For example I need to get multiple items at the time.

const itemsIds = [...];

// get multiple at once
const { data: result } = useQuery({
    key: ["items", ...itemsIds],
    query: () => getItems(itemsIds),
});

how to make it so it will cache result for each individual key, so later I could do and receive it because we already requested this data?

// returns cached because we requested it previously
const { data: result } = useQuery({
    key: ["items", itemId],
    query: () => getItem(itemsId),
});

Thank you!

[posva]

Make the key a function:

const itemId = ref() // or any reactive value like route.params.id

useQuery({
  key: () => ['items', itemId.value]
})

You will find more in https://pinia-colada.esm.dev/guide/queries.html#Reusable-Queries

[posva]

There is an example using the route with defineQuery() too 🙂

[NikitaVelixJob]

I use this way, so it means if I request it later on page

with required item id, it will just return me the cached value from previous request?

[NikitaVelixJob]

There is an example using the route with defineQuery() too 🙂

Yes I use it also! Very usefull. I use it with useState from nuxt 3.

My use case is: prefetch hovered item.

I use useState value and when hovering item i set it this id. on mouse leave, i set it null.
and using enabled computed if item is not null it fetch it.

Not found any other way to do it.

// composable
export const useItemId = defineQuery(() => {
const hoveredItemId = useState<number | null>("hoveredItemId", () => null);

const enabled = computed(() => hoveredItemId.value !== null);
const query = useQuery({
    key: () => ["items", hoveredItemId.value!],
    query: () => $fetch(`/api/items/${hoveredItemId.value}`),
    enabled,
    staleTime: 30 * 1000,
});

return {
    ...query
};

});

// in component
// prefetch hovered item
const hoveredItemId = useState<number | null>("hoveredItemId", () => null);
useItemId(); // to use composable in the component

[posva]

For prefetching: #6 (comment). It still needs to be added to docs

[NikitaVelixJob]

Thank you Eduardo!