Web / TanStack Interview Questions
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>
What does enabled:false on a useQuery do?
What does the select option do?
More Related questions...