UI Field - Display Data related to other documents

[junwen-k]

Greetings,
Thank you for writing up this amazing CMS.

Consider the following collections,

• Referrers
• Transactions

Whenever a new transaction is created, it can have an optional referrer field, e.g,

collections/Referrers.ts

...
{
  name: 'totalReferral',
  label: 'Total Referral(s)',
  type: 'ui',
  admin: {
    components: {
      Field: RefereeCountField,
      Cell: RefereeCountCell,
    },
  },
},
...

colletions/Transaction.ts

...
{
  name: 'referrer',
  label: {
    zh: '推荐人',
    en: 'Referred By',
  },
  type: 'relationship',
  relationTo: 'referrers',
  admin: {
    description: 'The referrer of this transaction.',
  },
},
...

Currently, I am trying to create a custom UI field that only display the number of referrals in the referrers listing and edit page.

components/RefereeCountCell.tsx

import { useConfig } from 'payload/components/utilities';
import type { Props } from 'payload/components/views/Cell';
import type { PaginatedDocs } from 'payload/dist/mongoose/types';
import type { Transaction } from 'payload/generated-types';
import qs from 'qs';
import React, { useEffect, useState } from 'react';

const RefereeCountCell = ({ rowData: { id } }: Props) => {
  const [totalDocs, setTotalDocs] = useState(0);

  const config = useConfig();

  useEffect(() => {
    const fetchTotalReferrals = async () => {
      const query = {
        depth: 1,
        where: {
          referrer: { equals: id },
        },
      };
      const resp = await fetch(
        `${config.serverURL}/api/transactions${qs.stringify(query, {
          addQueryPrefix: true,
        })}`
      );
      const paginatedDocs =
        (await resp.json()) as PaginatedDocs<Transaction>;
      setTotalDocs(paginatedDocs.totalDocs);
    };
    fetchTotalReferrals();
  }, []);

  return <span>{totalDocs}</span>;
};

export default RefereeCountCell;

components/RefereeCountField.tsx

import { TextInput } from 'payload/components/forms';
import { useConfig, useDocumentInfo } from 'payload/components/utilities';
import type { PaginatedDocs } from 'payload/dist/mongoose/types';
import type { Transaction } from 'payload/generated-types';
import type { UIField } from 'payload/types';
import qs from 'qs';
import React, { useEffect, useState } from 'react';

const RefereeCountField = ({ name }: UIField) => {
  const [totalDocs, setTotalDocs] = useState(0);

  const { id } = useDocumentInfo();
  const config = useConfig();

  useEffect(() => {
    const fetchTotalReferrals = async () => {
      const query = {
        depth: 1,
        where: {
          referrer: { equals: id },
        },
      };
      const resp = await fetch(
        `${config.serverURL}/api/transactions${qs.stringify(query, {
          addQueryPrefix: true,
        })}`
      );
      const paginatedDocs =
        (await resp.json()) as PaginatedDocs<Transaction>;
      setTotalDocs(paginatedDocs.totalDocs);
    };
    fetchTotalReferrals();
  }, []);

  return (
    <div>
      <TextInput
        name={name}
        path={name}
        readOnly
        value={`${totalDocs}`}
        description="Total referrals by this referrer."
      />
    </div>
  );
};

export default RefereeCountField;

So far, things seems to be working but I have a few questions:

1. Is this the recommended approach on building the Field / Cell component?

For me, the API looks a bit awkward especially where I need to import import type { PaginatedDocs } from 'payload/dist/mongoose/types'; , typing props with import type { Props } from 'payload/components/views/Cell';. I had to dig out the internals of Payload to inspect which type to use. I've also tried directly importing the Payload instance using the Local API but it does not work. If I understand it correctly, this is due to the Admin portal being in the client side but not server side rendered hence it cannot work.

Imagine I am able to do it like so:

const referrers = await payload.find({
  collection: "referrers",
  where: {
    referrer: { equals: id },
  },
});
// ...

It is also not that easy to reuse existing Payload's component. I've tried using TextInput component but I have no idea what the prop path is supposed to be.

Overall the DX is not as good as it seems when I tried to create custom UI component.

2. In the listing page, I cannot sort by the total number of referrers like how Payload's default cell does. (And I do not know how to implement it.)
3. Should we update the documentation to include some examples on this, maybe here as well?

Anyway, this is still an incredibly good CMS and I appreciate that. If there is better way of implementing this please let me know.