For my specific case, I need to verify whether the user has subscribed to my product through both Stripe and Firebase.
To accomplish this, I created a composable function that checks for the current subscription in the Firebase collection. If the user currently has an active subscription, the function should return the data related to it; otherwise, it should return null.
However, when I invoke the composable function within my Vue component, I am unable to access the returned data as it consistently returns null. Despite seeing the correct value when using console.log(subscription.value) inside the composable function, the Vue component fails to reflect this data accurately.
How can I effectively retrieve and utilize this data within the Vue component?
The composable function:
import { ref } from "vue";
import { db, auth } from "../../firebase/config";
import { collection, query, where, getDocs } from "firebase/firestore";
export function useCurrentSubscription() {
const isLoading = ref(false);
const subscription = ref(null);
const subscriptionType = ref(null);
async function fetchSubscription() {
isLoading.value = true;
const subRef = collection(
db,
"stripe-customers",
auth.currentUser.uid,
"subscriptions"
);
const subQuery = query(
subRef,
where("status", "in", ["trialing", "active", "past_due", "unpaid"])
);
await getDocs(subQuery).then((sub) => {
if (sub.docs.length > 0) {
subscription.value = sub.docs[0];
} else {
subscription.value = null;
}
});
if (subscription.value != null) {
var test = subscription.value.data();
subscriptionType.value = test.items[0].price.product.metadata.plan;
}
isLoading.value = false;
console.log(subscription.value) //returns the right data
}
fetchSubscription();
return { subscription, isLoading, subscriptionType };
}
The vue component:
<template>
Help World
<template>
<script setup>
import SubscriptionPlansComponent from "../../components/subscriptionPlanComponents/SubscriptionPlansComponent.vue";
import CustomerPortalComponent from "../../components/subscriptionPlanComponents/CustomerPortalComponent.vue";
import { useCurrentSubscription } from "../../composables/stripe/currentSubscription";
const { subscription, isLoading, subscriptionType } = useCurrentSubscription();
console.log(subscription.value); //returns null all the time
</script>