fix: #598 Handle non-existent CRUD item with error and redirect

packages/backend/apps/demo/schema.py

@@ -141,7 +141,7 @@ def resolve_all_document_demo_items(root, info, **kwargs):
     def resolve_crud_demo_item(root, info, id, tenant_id, **kwargs):
         _, pk = from_global_id(id)
         _, tenant_pk = from_global_id(tenant_id)
-        return models.CrudDemoItem.objects.filter(pk=pk, tenant=tenant_pk).first()
+        return get_object_or_404(models.CrudDemoItem, pk=pk, tenant=tenant_pk)
 
 
 @permission_classes(IsTenantMemberAccess)

packages/backend/apps/demo/tests/test_schema.py

@@ -133,6 +133,20 @@ def test_return_item(self, graphene_client, crud_demo_item_factory, user, tenant
             }
         }
 
+    def test_return_404_for_non_existent_item(self, graphene_client, user, tenant, tenant_membership_factory):
+        non_existent_item_id = to_global_id("CrudDemoItemType", "non-existent-id")
+        tenant_membership_factory(tenant=tenant, user=user, role=TenantUserRole.MEMBER)
+
+        graphene_client.force_authenticate(user)
+        graphene_client.set_tenant_dependent_context(tenant, TenantUserRole.MEMBER)
+        executed = graphene_client.query(
+            self.CRUD_DEMO_ITEM_QUERY,
+            variable_values={"id": non_existent_item_id, "tenantId": to_global_id("TenantType", tenant.id)},
+        )
+
+        assert executed["errors"]
+        assert executed["errors"][0]["message"] == "No CrudDemoItem matches the given query."
+
     def test_tenant_no_membership(self, graphene_client, crud_demo_item_factory, user, tenant):
         crud_demo_item = crud_demo_item_factory(tenant=tenant)
         item_global_id = to_global_id("CrudDemoItemType", str(crud_demo_item.id))

packages/webapp-libs/webapp-crud-demo/src/routes/crudDemoItem/crudDemoItemDetails/crudDemoItemDetails.component.tsx

@@ -4,8 +4,13 @@ import { PageHeadline } from '@sb/webapp-core/components/pageHeadline';
 import { PageLayout } from '@sb/webapp-core/components/pageLayout';
 import { Separator } from '@sb/webapp-core/components/separator';
 import { Skeleton } from '@sb/webapp-core/components/skeleton';
+import { useGenerateLocalePath } from '@sb/webapp-core/hooks';
+import { useToast } from '@sb/webapp-core/toast';
 import { useCurrentTenant } from '@sb/webapp-tenants/providers';
-import { useParams } from 'react-router';
+import { useIntl } from 'react-intl';
+import { useNavigate, useParams } from 'react-router';
+
+import { RoutesConfig } from '../../../config/routes';
 
 export const crudDemoItemDetailsQuery = gql(/* GraphQL */ `
   query crudDemoItemDetailsQuery($id: ID!, $tenantId: ID!) {
@@ -22,12 +27,32 @@ export const CrudDemoItemDetails = () => {
   };
   const { id } = useParams<keyof Params>() as Params;
   const { data: currentTenant } = useCurrentTenant();
+  const { toast } = useToast();
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const generateLocalePath = useGenerateLocalePath();
+  const errorMessage = intl.formatMessage({
+    id: 'CrudDemoItem / CrudDemoItemDetails / ErrorMessage',
+    defaultMessage: 'Failed to load item details',
+  });
+  const notFoundMessage = intl.formatMessage({
+    id: 'CrudDemoItem / CrudDemoItemDetails / NotFoundMessage',
+    defaultMessage: 'The requested item does not exist',
+  });
 
   const { loading, data } = useQuery(crudDemoItemDetailsQuery, {
     variables: {
       id,
       tenantId: currentTenant?.id || '',
     },
+    onError: (error) => {
+      if (error.message.includes('No CrudDemoItem matches the given query')) {
+        toast({ description: notFoundMessage, variant: 'destructive' });
+      } else {
+        toast({ description: errorMessage, variant: 'destructive' });
+      }
+      navigate(generateLocalePath(RoutesConfig.crudDemoItem.list));
+    },
     skip: !currentTenant,
   });