From 07143157922471ac1fbb9ade2a6293df12783ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Frane=20Poli=C4=87?= <16856471+fPolic@users.noreply.github.com> Date: Mon, 9 Sep 2024 21:06:10 +0200 Subject: [PATCH] fix(dashboard): rq cache and pending flag (#9063) **What** - fix issues from stale data on modal pages --- FIXES CC-137 --- .../src/hooks/api/fulfillment-sets.tsx | 1 - .../admin/dashboard/src/hooks/api/returns.tsx | 6 +++--- .../src/hooks/api/stock-locations.tsx | 1 - .../location-service-zone-create.tsx | 16 ++++++--------- .../location-service-zone-edit.tsx | 20 +++++++++---------- .../location-service-zone-manage-areas.tsx | 20 +++++++++---------- ...on-service-zone-shipping-option-create.tsx | 14 +++++-------- ...tion-service-zone-shipping-option-edit.tsx | 19 +++++++++--------- ...n-service-zone-shipping-option-pricing.tsx | 17 ++++++++++------ .../product-variant-edit.tsx | 16 ++++++++------- .../product-edit-option.tsx | 8 +++----- 11 files changed, 65 insertions(+), 73 deletions(-) diff --git a/packages/admin/dashboard/src/hooks/api/fulfillment-sets.tsx b/packages/admin/dashboard/src/hooks/api/fulfillment-sets.tsx index b20b7fe5dd..bc32eac659 100644 --- a/packages/admin/dashboard/src/hooks/api/fulfillment-sets.tsx +++ b/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, diff --git a/packages/admin/dashboard/src/hooks/api/returns.tsx b/packages/admin/dashboard/src/hooks/api/returns.tsx index dc988621cb..377704177d 100644 --- a/packages/admin/dashboard/src/hooks/api/returns.tsx +++ b/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({ diff --git a/packages/admin/dashboard/src/hooks/api/stock-locations.tsx b/packages/admin/dashboard/src/hooks/api/stock-locations.tsx index 5e86198c95..4f57fcbb9a 100644 --- a/packages/admin/dashboard/src/hooks/api/stock-locations.tsx +++ b/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) diff --git a/packages/admin/dashboard/src/routes/locations/location-service-zone-create/location-service-zone-create.tsx b/packages/admin/dashboard/src/routes/locations/location-service-zone-create/location-service-zone-create.tsx index 59a9ba81f1..7d072ec58d 100644 --- a/packages/admin/dashboard/src/routes/locations/location-service-zone-create/location-service-zone-create.tsx +++ b/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( - location_id!, - { + const { stock_location, isPending, isFetching, isError, error } = + 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 ( - {ready && ( + {fulfillmentSet && ( )} diff --git a/packages/admin/dashboard/src/routes/locations/location-service-zone-edit/location-service-zone-edit.tsx b/packages/admin/dashboard/src/routes/locations/location-service-zone-edit/location-service-zone-edit.tsx index db7c1854f3..a0d494e4fe 100644 --- a/packages/admin/dashboard/src/routes/locations/location-service-zone-edit/location-service-zone-edit.tsx +++ b/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( - location_id!, - { + const { stock_location, isPending, isFetching, isError, error } = + 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) { - throw error - } - - if (!isPending && !serviceZone) { + if (!isPending && !isFetching && !serviceZone) { throw json( { message: `Service zone with ID ${zone_id} was not found` }, 404 ) } + if (isError) { + throw error + } + return ( {t("stockLocations.serviceZones.edit.header")} - {!isPending && serviceZone && ( + {serviceZone && ( { const { location_id, fset_id, zone_id } = useParams() - const { stock_location, isPending, isError, error } = useStockLocation( - location_id!, - { + const { stock_location, isPending, isFetching, isError, error } = + 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) { - throw error - } - - if (!isPending && !zone) { + if (!isPending && !isFetching && !zone) { throw json( { message: `Service zone with ID ${zone_id} was not found` }, 404 ) } + if (isError) { + throw error + } + return ( - {!isPending && zone && ( + {zone && ( 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 ( - {ready && ( + {zone && ( { const { location_id, so_id } = useParams() - const { shipping_options, isPending, isError, error } = useShippingOptions({ - id: so_id, - }) + const { shipping_options, isPending, isFetching, isError, error } = + useShippingOptions({ + id: so_id, + }) const shippingOption = shipping_options?.find((so) => so.id === so_id) - if (isError) { - throw error - } - - if (!isPending && !shippingOption) { + if (!isPending && !isFetching && !shippingOption) { throw json( { message: `Shipping option with ID ${so_id} was not found` }, 404 ) } + if (isError) { + throw error + } + return ( {t("stockLocations.shippingOptions.edit.header")} - {!isPending && shippingOption && ( + {shippingOption && ( 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 ( {shippingOption && ( diff --git a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx b/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx index f1873d6402..18e231a571 100644 --- a/packages/admin/dashboard/src/routes/product-variants/product-variant-edit/product-variant-edit.tsx +++ b/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, { - initialData, - }) + 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 = () => { {t("products.variant.edit.header")} - {ready && ( + {variant && ( { 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 (!isLoading && !option) { + if (!isPending && !isFetching && !option) { throw json({ message: `An option with ID ${option_id} was not found` }, 404) } @@ -28,7 +26,7 @@ export const ProductEditOption = () => { {t("products.options.edit.header")} - {ready && } + {option && } ) }