feature: refetch organization details on client

Author: densumesh

clients/trieve-shopify-extension/app/components/PlanView.tsx

@@ -12,16 +12,22 @@ import {
 } from "@shopify/polaris";
 import { ProgressBar } from "./ProgressBar";
 import { StripePlan } from "trieve-ts-sdk";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { organizationUsageQuery } from "app/queries/usage";
 import { useTrieve } from "app/context/trieveContext";
+import { shopOrganizationQuery } from "app/queries/shopDataset";
 
 export const PlanView = () => {
-  const { organization, trieve, refetch: refetchTrieve } = useTrieve();
+  const { trieve } = useTrieve();
   const [showCancelModal, setShowCancelModal] = useState(false);
   const submit = useSubmit();
 
+  const { data: organization, refetch: refetchOrganization } = useQuery({
+    ...shopOrganizationQuery(trieve),
+    refetchInterval: 10000,
+  });
+
   const { data: organizationUsage } = useQuery(organizationUsageQuery(trieve));
 
   let planItems = [];
@@ -61,7 +67,7 @@ export const PlanView = () => {
               );
               setShowCancelModal(false);
               setTimeout(() => {
-                refetchTrieve();
+                refetchOrganization();
               }, 5000);
             }}
           >
@@ -76,12 +82,12 @@ export const PlanView = () => {
               <Text variant="headingMd" as="h2">
                 Plan Status
               </Text>
-              <Badge>{organization.plan?.name}</Badge>
+              <Badge>{organization?.plan?.name}</Badge>
             </InlineStack>
           </div>
 
           <BlockStack gap="400">
-            {(organization.plan as StripePlan | undefined)?.amount == 0 && (
+            {(organization?.plan as StripePlan | undefined)?.amount == 0 && (
               <Box>
                 <Banner
                   title={`You are not on a paid plan. Test before you buy!`}
@@ -141,11 +147,11 @@ export const PlanView = () => {
               );
             }}
           >
-            {(organization.plan as StripePlan | undefined)?.amount == 0
+            {(organization?.plan as StripePlan | undefined)?.amount == 0
               ? "Upgrade"
               : "Modify"}
           </Button>
-          {(organization.plan as StripePlan | undefined)?.amount != 0 && (
+          {(organization?.plan as StripePlan | undefined)?.amount != 0 && (
             <Button
               onClick={() => {
                 setShowCancelModal(true);

clients/trieve-shopify-extension/app/context/trieveContext.tsx

@@ -17,13 +17,11 @@ export const TrieveContext = createContext<{
   dataset: Dataset;
   trieveKey: StrongTrieveKey;
   organization: OrganizationWithSubAndPlan;
-  refetch: () => void;
 }>({
   trieve: null as any,
   dataset: null as any,
   trieveKey: null as any,
   organization: null as any,
-  refetch: null as any,
 });
 
 export const TrieveProvider = ({
@@ -78,7 +76,6 @@ export const TrieveProvider = ({
         dataset,
         trieveKey,
         organization,
-        refetch: queryClient.refetchQueries,
       }}
     >
       {children}

clients/trieve-shopify-extension/app/queries/shopDataset.ts

@@ -10,3 +10,15 @@ export const shopDatasetQuery = (trieve: TrieveSDK) => {
     },
   } satisfies QueryOptions;
 };
+
+export const shopOrganizationQuery = (trieve: TrieveSDK) => {
+  return {
+    queryKey: ["shop_organization", trieve.organizationId],
+    queryFn: async () => {
+      const shopOrganization = await trieve.getOrganizationById(
+        trieve.organizationId!,
+      );
+      return shopOrganization;
+    },
+  } satisfies QueryOptions;
+};