T
TanStack•3y ago
continuing-cyan

Vue Query Reactive SWR

Hello, folks! I'm new to Query (using it in a Vue3 application) I have a couple of queries that look similar this one. https://gist.github.com/jarrettgreen/0c8b504dc0f736515162bfb517e3e3d7 - The 'feels bad' vibes going off is using ref within the query, the boilerplate needed for SWR cache to work, and this leans on onSuccess in a bad way, which is deprecated. I feel like I'm overthinking something and am just overall not using query correctly. Any thoughts on this would be greatly appreciated! Edit:
Gist
useCheckInPendingReviewQuery.js
GitHub Gist: instantly share code, notes, and snippets.
2 Replies
continuing-cyan
continuing-cyanOP•3y ago
Here is where I cam now, still no dice. Call is being made, data is always undefined. 
import { useQuery, useQueryClient } from '@tanstack/vue-query'
import { CheckInService } from "@/services";

export function useCheckInsPendingReviewQuery() {
  const queryKey = ['checkIns', 'pendingReview'];
  return useQuery(
    queryKey,
    () => CheckInService.fetchAllUnReviewed().then(res => res.data)
  )
}
////

const {data: checkInsPendingReview} = useCheckInsPendingReviewQuery()

const checkInBadgeCount = computed(() => {
  console.log('checkInsPendingReview', checkInsPendingReview.data?.value)
  return checkInsPendingReview.data?.value.length || 0;
});
import { useQuery, useQueryClient } from '@tanstack/vue-query'
import { CheckInService } from "@/services";

export function useCheckInsPendingReviewQuery() {
  const queryKey = ['checkIns', 'pendingReview'];
  return useQuery(
    queryKey,
    () => CheckInService.fetchAllUnReviewed().then(res => res.data)
  )
}
////

const {data: checkInsPendingReview} = useCheckInsPendingReviewQuery()

const checkInBadgeCount = computed(() => {
  console.log('checkInsPendingReview', checkInsPendingReview.data?.value)
  return checkInsPendingReview.data?.value.length || 0;
});
equal-aqua
equal-aqua•3y ago
From what i can see you are unwrapping data in queryFn. Then you are destructuring data from use query. And then again trying to unwrap data in computed. I beleive you want to check checkInsPendingReview.value in computed. You do not need to do any setup in user land to get SWR pattern to work. Just modify staleTime and cacheTime as needed.

Did you find this page helpful?