@tanstack/vue-queryでTypeScriptの型を絞り込む

2024/03/12 18:04:59

なんてことはない、基本の使い方がしたかっただけなのに・・・。

TL;DR

<script setup lang="ts">
import { reactive, watchEffect } from "vue";
import { useQuery } from "@tanstack/vue-query";

// 👇
const query = reactive(useQuery({
  // ...
}));

watchEffect(() => {
  if (!query.isSuccess) return;
  query.data.xxx;
});
</script>

<template>
  <div style="display: contents" v-if="query.isSuccess">
    {{ query.data.xxx }}
  </div>
</template>

ポイントとしては、

reactiveでuseQuery()を丸ごとラップする
{ isSuccess, data }のように、Destructuringしない

この2点を同時に押さえないと、うまくいかない。

[vue]: type narrowing not working on data field · Issue #5065 · TanStack/query https://github.com/TanStack/query/issues/5065#issuecomment-1458639556

う〜ん、いまいちなDXである。