Overusing this data fetching pattern in many components in Vue? Thanks to Tanstack Query for Vue, you can reduce the boilerplate and take advantage of some useful features like auto-caching, auto-refetching and much more. ✅ It's a fantastic and powerful library! 💪🏻

// overusing this data fetching pattern in many components?c
const posts = ref([]);
const isLoading = ref(false);
const isError = ref(false);

async function fetchPosts() {
  isLoading.value = true;
  isError.value = false;
  try {
    const response = await fetch('someurl');
    posts.value = await response.json();
  } catch(error) {
    isError.value = true;
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  fetchPosts();
})

// you can replace it with a few lines of code thanks to Tanstack Query (Vue Query) ✅
const {data: posts, isLoading, isError} = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
})

async function fetchPosts() {
  const response = await fetch('someurl');
  const data = await response.json();
  return data;
}