fix(dashboard): rq cache and pending flag (#9063)

**What**
- fix issues from stale data on modal pages

---

FIXES CC-137

packages/admin/dashboard/src/hooks/api/fulfillment-sets.tsx

@@ -42,7 +42,6 @@ export const useDeleteFulfillmentSet = (
       // We need to invalidate all related entities. We invalidate using `all` keys to ensure that all relevant entities are invalidated.
       await queryClient.invalidateQueries({
         queryKey: stockLocationsQueryKeys.all,
-        refetchType: "all",
       })
       await queryClient.invalidateQueries({
         queryKey: shippingOptionsQueryKeys.all,

packages/admin/dashboard/src/hooks/api/returns.tsx

@@ -97,7 +97,7 @@ export const useCancelReturn = (
 
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.preview(orderId),
-        refetchType: "all",
+        refetchType: "all", // We want preview to be updated in the cache immediately
       })
 
       queryClient.invalidateQueries({
@@ -163,7 +163,7 @@ export const useCancelReturnRequest = (
 
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.preview(orderId),
-        refetchType: "all",
+        refetchType: "all", // We want preview to be updated in the cache immediately
       })
 
       queryClient.invalidateQueries({
@@ -625,7 +625,7 @@ export const useCancelReceiveReturn = (
 
       queryClient.invalidateQueries({
         queryKey: ordersQueryKeys.preview(orderId),
-        refetchType: "all", // For some reason RQ will refetch this but will return stale record from the cache
+        refetchType: "all", // We want preview to be updated in the cache immediately
       })
 
       queryClient.invalidateQueries({

packages/admin/dashboard/src/hooks/api/stock-locations.tsx

@@ -168,7 +168,6 @@ export const useCreateStockLocationFulfillmentSet = (
     onSuccess: async (data, variables, context) => {
       await queryClient.invalidateQueries({
         queryKey: stockLocationsQueryKeys.all,
-        refetchType: "all",
       })
 
       options?.onSuccess?.(data, variables, context)

packages/admin/dashboard/src/routes/locations/location-service-zone-create/location-service-zone-create.tsx

@@ -8,25 +8,21 @@ import { FulfillmentSetType } from "../common/constants"
 export function LocationCreateServiceZone() {
   const { fset_id, location_id } = useParams()
 
-  const { stock_location, isLoading, isError, error } = useStockLocation(
+  const { stock_location, isPending, isFetching, isError, error } =
-    location_id!,
+    useStockLocation(location_id!, {
-    {
       fields: "*fulfillment_sets",
-    }
+    })
-  )
 
   const fulfillmentSet = stock_location?.fulfillment_sets?.find(
     (f) => f.id === fset_id
   )
 
-  const ready = !isLoading && !!stock_location && !!fulfillmentSet
-
   const type: FulfillmentSetType =
     fulfillmentSet?.type === FulfillmentSetType.Pickup
       ? FulfillmentSetType.Pickup
       : FulfillmentSetType.Shipping
 
-  if (!isLoading && !fulfillmentSet) {
+  if (!isPending && !isFetching && !fulfillmentSet) {
     throw json(
       { message: `Fulfillment set with ID: ${fset_id} was not found.` },
       404
@@ -39,11 +35,11 @@ export function LocationCreateServiceZone() {
 
   return (
     <RouteFocusModal prev={`/settings/locations/${location_id}`}>
-      {ready && (
+      {fulfillmentSet && (
         <CreateServiceZoneForm
           fulfillmentSet={fulfillmentSet}
+          location={stock_location!}
           type={type}
-          location={stock_location}
         />
       )}
     </RouteFocusModal>

packages/admin/dashboard/src/routes/locations/location-service-zone-edit/location-service-zone-edit.tsx

@@ -10,34 +10,32 @@ export const LocationServiceZoneEdit = () => {
   const { t } = useTranslation()
   const { location_id, fset_id, zone_id } = useParams()
 
-  const { stock_location, isPending, isError, error } = useStockLocation(
+  const { stock_location, isPending, isFetching, isError, error } =
-    location_id!,
+    useStockLocation(location_id!, {
-    {
       fields: "*fulfillment_sets.service_zones",
-    }
+    })
-  )
 
   const serviceZone = stock_location?.fulfillment_sets
     ?.find((f) => f.id === fset_id)
     ?.service_zones.find((z) => z.id === zone_id)
 
-  if (isError) {
+  if (!isPending && !isFetching && !serviceZone) {
-    throw error
-  }
-
-  if (!isPending && !serviceZone) {
     throw json(
       { message: `Service zone with ID ${zone_id} was not found` },
       404
     )
   }
 
+  if (isError) {
+    throw error
+  }
+
   return (
     <RouteDrawer prev={`/settings/locations/${location_id}`}>
       <RouteDrawer.Header>
         <Heading>{t("stockLocations.serviceZones.edit.header")}</Heading>
       </RouteDrawer.Header>
-      {!isPending && serviceZone && (
+      {serviceZone && (
         <EditServiceZoneForm
           zone={serviceZone}
           fulfillmentSetId={fset_id!}

packages/admin/dashboard/src/routes/locations/location-service-zone-manage-areas/location-service-zone-manage-areas.tsx

@@ -7,31 +7,29 @@ import { EditServiceZoneAreasForm } from "./components/edit-region-areas-form"
 export const LocationServiceZoneManageAreas = () => {
   const { location_id, fset_id, zone_id } = useParams()
 
-  const { stock_location, isPending, isError, error } = useStockLocation(
+  const { stock_location, isPending, isFetching, isError, error } =
-    location_id!,
+    useStockLocation(location_id!, {
-    {
       fields: "*fulfillment_sets.service_zones.geo_zones",
-    }
+    })
-  )
 
   const zone = stock_location?.fulfillment_sets
     ?.find((f) => f.id === fset_id)
     ?.service_zones.find((z) => z.id === zone_id)
 
-  if (isError) {
+  if (!isPending && !isFetching && !zone) {
-    throw error
-  }
-
-  if (!isPending && !zone) {
     throw json(
       { message: `Service zone with ID ${zone_id} was not found` },
       404
     )
   }
 
+  if (isError) {
+    throw error
+  }
+
   return (
     <RouteFocusModal prev={`/settings/locations/${location_id}`}>
-      {!isPending && zone && (
+      {zone && (
         <EditServiceZoneAreasForm
           zone={zone}
           fulfillmentSetId={fset_id!}

packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-create/location-service-zone-shipping-option-create.tsx

@@ -10,18 +10,16 @@ export function LocationServiceZoneShippingOptionCreate() {
   const [searchParams] = useSearchParams()
   const isReturn = searchParams.has("is_return")
 
-  const { stock_location, isPending, isError, error } = useStockLocation(
+  const { stock_location, isPending, isFetching, isError, error } =
-    location_id!,
+    useStockLocation(location_id!, {
-    {
       fields: LOC_CREATE_SHIPPING_OPTION_FIELDS,
-    }
+    })
-  )
 
   const zone = stock_location?.fulfillment_sets
     ?.find((f) => f.id === fset_id)
     ?.service_zones?.find((z) => z.id === zone_id)
 
-  if (!isPending && !zone) {
+  if (!isPending && !isFetching && !zone) {
     throw json(
       { message: `Service zone with ID ${zone_id} was not found` },
       404
@@ -32,11 +30,9 @@ export function LocationServiceZoneShippingOptionCreate() {
     throw error
   }
 
-  const ready = !isPending && !!zone
-
   return (
     <RouteFocusModal prev={`/settings/locations/${location_id}`}>
-      {ready && (
+      {zone && (
         <CreateShippingOptionsForm
           zone={zone}
           isReturn={isReturn}

packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-edit/location-service-zone-shipping-option-edit.tsx

@@ -11,29 +11,30 @@ export const LocationServiceZoneShippingOptionEdit = () => {
 
   const { location_id, so_id } = useParams()
 
-  const { shipping_options, isPending, isError, error } = useShippingOptions({
+  const { shipping_options, isPending, isFetching, isError, error } =
+    useShippingOptions({
       id: so_id,
     })
 
   const shippingOption = shipping_options?.find((so) => so.id === so_id)
 
-  if (isError) {
+  if (!isPending && !isFetching && !shippingOption) {
-    throw error
-  }
-
-  if (!isPending && !shippingOption) {
     throw json(
       { message: `Shipping option with ID ${so_id} was not found` },
       404
     )
   }
 
+  if (isError) {
+    throw error
+  }
+
   return (
     <RouteDrawer>
       <RouteDrawer.Header>
         <Heading>{t("stockLocations.shippingOptions.edit.header")}</Heading>
       </RouteDrawer.Header>
-      {!isPending && shippingOption && (
+      {shippingOption && (
         <EditShippingOptionForm
           shippingOption={shippingOption}
           locationId={location_id!}

packages/admin/dashboard/src/routes/locations/location-service-zone-shipping-option-pricing/location-service-zone-shipping-option-pricing.tsx

@@ -7,7 +7,8 @@ import { EditShippingOptionsPricingForm } from "./components/create-shipping-opt
 export function LocationServiceZoneShippingOptionPricing() {
   const { so_id, location_id } = useParams()
 
-  const { shipping_options, isPending } = useShippingOptions({
+  const { shipping_options, isPending, isFetching, isError, error } =
+    useShippingOptions({
       // TODO: change this when GET option by id endpoint is implemented
       id: [so_id!],
       fields: "*prices,*prices.price_rules",
@@ -15,10 +16,14 @@ export function LocationServiceZoneShippingOptionPricing() {
 
   const shippingOption = shipping_options?.find((so) => so.id === so_id)
 
-  if (!isPending && !shippingOption) {
+  if (!isPending && !isFetching && !shippingOption) {
     throw json(`Shipping option with id: ${so_id} not found`, { status: 404 })
   }
 
+  if (isError) {
+    throw error
+  }
+
   return (
     <RouteFocusModal prev={`/settings/locations/${location_id}`}>
       {shippingOption && (

packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx

@@ -15,23 +15,25 @@ export const ProductVariantEdit = () => {
   const { t } = useTranslation()
   const { id, variant_id } = useParams()
 
-  const { product, isLoading, isError, error } = useProduct(id!, undefined, {
+  const { product, isPending, isFetching, isError, error } = useProduct(
+    id!,
+    undefined,
+    {
       initialData,
-  })
+    }
+  )
 
   const variant = product?.variants.find(
     (v: HttpTypes.AdminProductVariant) => v.id === variant_id
   )
 
-  if (!isLoading && !variant) {
+  if (!isPending && !isFetching && !variant) {
     throw json({
       status: 404,
       message: `Variant with ID ${variant_id} was not found.`,
     })
   }
 
-  const ready = !isLoading && !!product && !!variant
-
   if (isError) {
     throw error
   }
@@ -41,7 +43,7 @@ export const ProductVariantEdit = () => {
       <RouteDrawer.Header>
         <Heading>{t("products.variant.edit.header")}</Heading>
       </RouteDrawer.Header>
-      {ready && (
+      {variant && (
         <ProductEditVariantForm
           product={product}
           variant={variant as unknown as HttpTypes.AdminProductVariant}

packages/admin/dashboard/src/routes/products/product-edit-option/product-edit-option.tsx

@@ -9,13 +9,11 @@ export const ProductEditOption = () => {
   const { id, option_id } = useParams()
   const { t } = useTranslation()
 
-  const { product, isLoading, isError, error } = useProduct(id!)
+  const { product, isPending, isFetching, isError, error } = useProduct(id!)
 
   const option = product?.options.find((o) => o.id === option_id)
 
-  const ready = !isLoading && option
+  if (!isPending && !isFetching && !option) {
-
-  if (!isLoading && !option) {
     throw json({ message: `An option with ID ${option_id} was not found` }, 404)
   }
 
@@ -28,7 +26,7 @@ export const ProductEditOption = () => {
       <RouteDrawer.Header>
         <Heading>{t("products.options.edit.header")}</Heading>
       </RouteDrawer.Header>
-      {ready && <CreateProductOptionForm option={option} />}
+      {option && <CreateProductOptionForm option={option} />}
     </RouteDrawer>
   )
 }