OUT-4208: collapse duplicate custom-fields requests on client pageload

src/app/routes.ts

@@ -13,7 +13,7 @@ export const ROUTES = Object.freeze({
     users: '/api/users',
     clientContext: '/api/client-context',
     notificationCounts: '/api/users/:id/notification-counts',
-    listCustomFields: '/api/custom-fields/:entityType',
+    listCustomFields: '/api/custom-fields',
     customFieldOptionsMap: '/api/custom-fields/options-map',
     segments: '/api/segments',
     segment: '/api/segments/:segmentId',

src/features/custom-fields/hooks/useCustomFields.ts

@@ -8,6 +8,7 @@ import {
 } from '@assembly/types'
 import type { IconType } from '@assembly-js/design-system'
 import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
 import { api } from '@/lib/core/axios.instance'
 
 const CUSTOM_FIELDS_QUERY_KEY = 'custom-fields'
@@ -35,43 +36,40 @@ export type CustomFieldItem = {
 /** Nested map: { [entityType]: { [fieldKey]: { [optionKey]: optionLabel } } } */
 export type CustomFieldOptionsMap = Record<string, Record<string, Record<string, string>>>
 
-export function useCustomFields() {
-  const { data: clientCustomFields, isLoading: clientIsLoading } = useQuery({
-    queryKey: [CUSTOM_FIELDS_QUERY_KEY, CustomFieldEntityType.CLIENT],
-    queryFn: async (): Promise<CustomFieldItem[]> => {
-      const res = await api.get(`/api/custom-fields/${CustomFieldEntityType.CLIENT}`)
-      const parsed = ListCustomFieldResponseSchema.parse(res.data)
-      return parsed.data
-        .sort((a, b) => a.order - b.order)
-        .map(({ id, key, name, type, options }) => ({
-          id,
-          key,
-          name,
-          type,
-          options,
-          icon: CUSTOM_FIELD_TYPE_ICON[type],
-        }))
-    },
-  })
+type CustomFieldItemWithEntity = CustomFieldItem & { entityType: CustomFieldEntityType }
 
-  const { data: companyCustomFields, isLoading: companyIsLoading } = useQuery({
-    queryKey: [CUSTOM_FIELDS_QUERY_KEY, CustomFieldEntityType.COMPANY],
-    queryFn: async (): Promise<CustomFieldItem[]> => {
-      const res = await api.get(`/api/custom-fields/${CustomFieldEntityType.COMPANY}`)
+export const useCustomFields = () => {
+  const { data: customFields, isLoading: fieldsIsLoading } = useQuery({
+    queryKey: [CUSTOM_FIELDS_QUERY_KEY],
+    queryFn: async (): Promise<CustomFieldItemWithEntity[]> => {
+      const res = await api.get('/api/custom-fields')
       const parsed = ListCustomFieldResponseSchema.parse(res.data)
       return parsed.data
         .sort((a, b) => a.order - b.order)
-        .map(({ id, key, name, type, options }) => ({
+        .map(({ id, key, name, type, options, entityType }) => ({
           id,
           key,
           name,
           type,
           options,
+          entityType,
           icon: CUSTOM_FIELD_TYPE_ICON[type],
         }))
     },
   })
 
+  // Split the single response by entity type, since field keys are only
+  // unique within an entity type (client vs company).
+  const { clientCustomFields, companyCustomFields } = useMemo(() => {
+    const client: CustomFieldItem[] = []
+    const company: CustomFieldItem[] = []
+    for (const { entityType, ...field } of customFields ?? []) {
+      if (entityType === CustomFieldEntityType.CLIENT) client.push(field)
+      else if (entityType === CustomFieldEntityType.COMPANY) company.push(field)
+    }
+    return { clientCustomFields: client, companyCustomFields: company }
+  }, [customFields])
+
   const { data: optionsMap, isLoading: optionsMapIsLoading } = useQuery({
     queryKey: [CUSTOM_FIELD_OPTIONS_MAP_QUERY_KEY],
     queryFn: async (): Promise<CustomFieldOptionsMap> => {
@@ -81,9 +79,9 @@ export function useCustomFields() {
   })
 
   return {
-    clientCustomFields: clientCustomFields ?? [],
-    companyCustomFields: companyCustomFields ?? [],
+    clientCustomFields,
+    companyCustomFields,
     optionsMap: optionsMap ?? {},
-    isLoading: clientIsLoading || companyIsLoading || optionsMapIsLoading,
+    isLoading: fieldsIsLoading || optionsMapIsLoading,
   }
 }

src/features/custom-fields/lib/custom-fields.controller.ts

@@ -1,26 +1,16 @@
 import AssemblyClient from '@assembly/assembly-client'
-import { CustomFieldEntityType } from '@assembly/types'
 import { authenticateHeaders } from '@auth/lib/authenticate'
 import { type NextRequest, NextResponse } from 'next/server'
-import z from 'zod'
 import type { APIResponse } from '@/app/types'
-import { NotFoundError } from '@/errors/not-found.error'
 
-export const listCustomFields = async (
-  req: NextRequest,
-  { params }: { params: Promise<{ entityType: string }> },
-): Promise<NextResponse<APIResponse>> => {
+// Returns custom fields for all entity types in a single call.
+// The client splits them by entityType, avoiding one request per type.
+export const listCustomFields = async (req: NextRequest): Promise<NextResponse<APIResponse>> => {
   const user = authenticateHeaders(req.headers)
 
   const assembly = new AssemblyClient(user.token)
 
-  const entityTypeResult = z.enum(CustomFieldEntityType).safeParse((await params).entityType)
-
-  if (entityTypeResult.error) {
-    throw new NotFoundError()
-  }
-
-  const response = await assembly.listCustomFields({ entityType: entityTypeResult.data })
+  const response = await assembly.listCustomFields()
 
   return NextResponse.json(response)
 }