useCheckInPendingReviewQuery.js

import { ref } from 'vue'
import { useQuery, useQueryClient } from '@tanstack/vue-query'

import { CheckInService } from "@/services";
export function useCheckInsPendingReviewQuery() {
  const queryKey = ['checkIns', 'pendingReview'];
  const checkInsPendingReview = ref([]);
  const queryClient = useQueryClient();
  const cachedCheckins = queryClient.getQueryData(queryKey)?.data;

  if (cachedCheckins) {
    console.log('[Cache:Hit]', queryKey)
    checkInsPendingReview.value = cachedCheckins; // this feels wrong
  }

  useQuery({
    queryKey: queryKey,
    queryFn: CheckInService.fetchAllUnReviewed, // this is an axios promise.
    // using initalData never worked for me.
    // inititalData: () => queryClient.getQueryData(queryKey)?.data || [],
    // initialDataUpdatedAt: () => queryClient.getQueryState(queryKey)?.dataUpdatedAt,
    onSuccess: ({ data }) => {
      checkInsPendingReview.value = data; // update checkIns when the query succeeds
    },
  });

  return {
    checkInsPendingReview,
  };
}