[ui] Add query to return list of organization names

Adds the 'findOrganization' query, which only returns the organizations data needed to affiliate an individual instead of all the fields. The 'getOrganizations' query is replaced with this one on the Individual view to improve the organization selector loading time. Signed-off-by: Eva Millán <[email protected]>
chaoss · Dec 13, 2023 · 3a6b385 · 3a6b385
1 parent 742d582
commit 3a6b385
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml b/releases/unreleased/improve-loading-time-when-looking-for-organizations.yml
@@ -0,0 +1,9 @@
+---
+title: Improved loading time when looking for organizations
+category: added
+author: Eva Millán <[email protected]>
+issue: null
+notes: >
+  The autocomplete field that is used to affiliate individuals
+  to organizations now makes fewer and lighter requests to find
+  them, resulting in faster loading times.
diff --git a/ui/src/apollo/queries.js b/ui/src/apollo/queries.js
@@ -277,6 +277,21 @@ const GET_SCHEDULED_TASKS = gql`
   }
 `;
 
+const FIND_ORGANIZATION = gql`
+  query findOrganization(
+    $page: Int
+    $pageSize: Int
+    $filters: OrganizationFilterType
+  ) {
+    organizations(page: $page, pageSize: $pageSize, filters: $filters) {
+      entities {
+        id
+        name
+      }
+    }
+  }
+`;
+
 const getIndividualByUuid = (apollo, uuid) => {
   let response = apollo.query({
     query: GET_INDIVIDUAL_BYUUID,
@@ -445,6 +460,17 @@ const getScheduledTasks = (apollo, jobType, backend) => {
   });
 };
 
+const findOrganization = (apollo, page, pageSize, filters) => {
+  return apollo.query({
+    query: FIND_ORGANIZATION,
+    variables: {
+      page,
+      pageSize,
+      filters,
+    },
+  });
+};
+
 export {
   getCountries,
   getIndividuals,
@@ -460,4 +486,5 @@ export {
   getImportIdentitiesTasks,
   getOrganization,
   getScheduledTasks,
+  findOrganization,
 };
diff --git a/ui/src/views/Individual.vue b/ui/src/views/Individual.vue
@@ -410,7 +410,7 @@
 import {
   getCountries,
   getIndividualByUuid,
-  getPaginatedOrganizations,
+  findOrganization,
 } from "../apollo/queries";
 import {
   deleteIdentity,
@@ -682,7 +682,7 @@ export default {
       this.individual = formatIndividual(newData[0]);
     },
     async fetchOrganizations(page, items, filters) {
-      const response = await getPaginatedOrganizations(
+      const response = await findOrganization(
         this.$apollo,
         page,
         items,