What are the most useful useQuery options beyond queryKey and queryFn in Vue?

TanStack Query exposes many options; the following solve the most common real-world patterns.

<script setup lang="ts">
import { computed, ref } from "vue"
import { useQuery, keepPreviousData } from "@tanstack/vue-query"

const props = defineProps<{ userId: number|null }>()

// enabled: skip query when userId is null
const { data:user } = useQuery({
  queryKey: computed(()=>["user",props.userId]),
  queryFn:  ()=>fetchUser(props.userId!),
  enabled:  computed(()=>props.userId!==null),
})

// select: transform result; re-render only when selected slice changes
const { data:userName } = useQuery({
  queryKey: ["user",1],
  queryFn:  ()=>fetchUser(1),
  select:   d=>d.name,
})

// refetchInterval: poll every 5 s
const { data:price } = useQuery({
  queryKey: ["stock","AAPL"],
  queryFn:  ()=>fetchStockPrice("AAPL"),
  refetchInterval: 5000,
  refetchIntervalInBackground: false,
})

// placeholderData: show previous page while next loads
const page = ref(1)
const { data:posts } = useQuery({
  queryKey: computed(()=>["posts",page.value]),
  queryFn:  ()=>fetchPosts(page.value),
  placeholderData: keepPreviousData,
})
</script>