How does one stitch together two or more states from useQuery?

[mmulich]

I'm having trouble producing a computed property that stitches data together from two useQuery states. The following is a simplified example of what I'm attempting to do:

<script setup>
// ... imports and other common stuff ...

const { state: todo, status: todoStatus } = useQuery({
  key: () => ["todo", route.params.id],
  query: () => getTodo(route.params.id),
});
const { state: allTags, status: allTagsStatus } = useQuery({
  key: ["tags"],
  query: getAllTags,
});

// Attempt to monitor the loading state in a unified property
const isLoading = computed(
  () => !(allTagsStatus === "success" && todoStatus === "success"),
);
// And attempt to compute a detailed listing of tags for the todo
const tagsDetail = computed(() => {
  if (allTags.status === "success" && todo.status === "success") {
    return allTags.data.filter((tag) => todo.data.tags.includes(tag.url));
  }
  return [];
});
</script>

The result of this is that the task and allTags are status === 'success' and data contains the expected data. But the isLoading and tagsDetail do not update. I also tried using watch and watchEffect with the same results.

Can anyone illuminate the issue and suggest a resolution?

[mmulich]

Well, sometimes you need only ask the question to find the answer yourself.
The following works because it's now using a reactive property data (a shallow ref) as opposed to the computed state property.

Though, I wonder if there is a more elegant solution I'm not seeing?

<script setup>
// ... imports and other common stuff ...

const { data: todo, status: todoStatus } = useQuery({
  key: () => ["todo", route.params.id],
  query: () => getTodo(route.params.id),
});
const { data: allTags, status: allTagsStatus } = useQuery({
  key: ["tags"],
  query: getAllTags,
});

// Attempt to monitor the loading state in a unified property
const isLoading = computed(
  () => !(allTagsStatus.value === "success" && todoStatus.value === "success"),
);
// And attempt to compute a detailed listing of tags for the todo
const tagsDetail = computed(() => {
  if (allTagsStatus.value === "success" && todoStatus.value === "success") {
    return allTags.value.filter((tag) => todo.value.tags.includes(tag.url));
  }
  return [];
});
</script>

[posva]

state is also reactive, you were just missing the .value