Repository: payloadcms/payload
File: packages/ui/src/elements/Table/RelationshipProvider/index.tsx (TypeScript)

Code before:
    (reloadAll = false) => {
      Object.entries(debouncedDocuments).forEach(async ([slug, docs]) => {
        const idsToLoad: (number | string)[] = []

        Object.entries(docs).forEach(([id, value]) => {
          if (value === null || reloadAll) {
            idsToLoad.push(id)
          }
        })

        if (idsToLoad.length > 0) {
          const url = `${serverURL}${api}/${slug}`

          const params = new URLSearchParams()

          params.append('depth', '0')
          params.append('limit', '250')

          const collection = collections.find((c) => c.slug === slug)
          if (collection.admin.enableListViewSelectAPI) {
            const fieldToSelect = collection.admin.useAsTitle ?? 'id'
            params.append(`select[${fieldToSelect}]`, 'true')

            if (collection.upload) {
              // for upload enabled collections, the FileCell component needs the following fields:
              const fieldsToSelect = [
                'thumbnailURL',
                'url',
                'mimeType',
                'filesize',
                'width',
                'height',
                'focalX',
                'focalY',
                'sizes',
              ]

              fieldsToSelect.forEach((field) => params.append(`select[${field}]`, 'true'))
            }
          }

          if (locale) {
            params.append('locale', locale)
          }

          const idsToString = idsToLoad.map((id) => String(id))
          params.append('where[id][in]', idsToString.join(','))

          const query = `?${params.toString()}`

          const result = await fetch(`${url}${query}`, {

Review comment (suggestion):
This is fine for now, but in the future we ought to share this with `getBaseUploadFields` so that any future fields get automatically selected. And probably even some of it's logic too so that only the necessary fields are selected. For example, `focalY` only if `focalPoint` is not disabled.

Code after:

  const loadRelationshipDocs = useCallback(
    (reloadAll = false) => {
      Object.entries(debouncedDocuments).forEach(async ([slug, docs]) => {
        const idsToLoad: (number | string)[] = []

        Object.entries(docs).forEach(([id, value]) => {
          if (value === null || reloadAll) {
            idsToLoad.push(id)
          }
        })

        if (idsToLoad.length > 0) {
          const url = `${serverURL}${api}/${slug}`

          const params = new URLSearchParams()
          const select: SelectType = {}

          params.append('depth', '0')
          params.append('limit', '250')

          const collection = collections.find((c) => c.slug === slug)
          if (collection.admin.enableListViewSelectAPI) {
            const fieldToSelect = collection.admin.useAsTitle ?? 'id'
            select[fieldToSelect] = true

            if (collection.upload) {
              appendUploadSelectFields({ collectionConfig: collection, select })
            }
          }

          if (locale) {
            params.append('locale', locale)
          }

          const idsToString = idsToLoad.map((id) => String(id))
          params.append('where[id][in]', idsToString.join(','))

          const query = `?${params.toString()}&${qs.stringify({ select })}`

          const result = await fetch(`${url}${query}`, {
            credentials: 'include',
            headers: {
              'Accept-Language': i18n.language,
            },
          })

          if (result.ok) {
            const json = await result.json()
            if (json.docs) {
              dispatchDocuments({