How do you write dependent (sequential) queries in TanStack Query with Vue?

Use the enabled option with a computed() boolean. In Vue every option that reads reactive state must be wrapped in computed(); otherwise TanStack Query captures the value once at setup and never updates.

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

// Step 1: fetch current session
const { data:session } = useQuery({
  queryKey: ["session"],
  queryFn:  fetchCurrentSession,
})

// Step 2: only fetch projects once session is available
const userId = computed(()=>session.value?.userId)

const { data:projects } = useQuery({
  queryKey: computed(()=>["projects",{userId:userId.value}]),
  queryFn:  ()=>fetchProjectsByUser(userId.value!),
  enabled:  computed(()=>userId.value!==undefined),
})
</script>

Rule: wrap queryKey and enabled in computed() whenever they read reactive state — plain values are evaluated once at setup and never react to changes.