Show field from related collection

dland84505 months ago

5

export const Users: CollectionConfig = {
    slug: 'users',
    fields: [
        {
            name: 'externalId',
            type: 'text'
        },
        {
            name: 'firstName',
            type: 'text',
            required: true
        }
    ]
}

export const RelatedUserInfo: CollectionConfig = {
    slug: 'related-user-info',
    fields: [
        {
            name: 'userExternId',
            type: 'text'
        },
        {
            name: 'email',
            type: 'text',
            required: true
        }
    ]
}

• 

  rubixvi5 months ago

  Didnt read the docs? You use relationship field.

• 

  dland84505 months ago

  I think maybe I'm not explaining my goal very well. I don't want the payload user to have to select a

  User

  value within the

  RelatedUserInfo

  collection via a dropdown list or something like that. The data in both of these collections is not managed by the user. It's entered via the api and it's constantly changing. I want payload to basically join the two tables together and show the email of the corresponding

  User

  record (assuming one exists) within the

  RelatedUserInfo

  record . In order to do that I need a way to tell payload that those two collections are related via the

  Users.ExternalId

  and

  RelatedUserInfo.UserExternId

  fields. That's what I'm not sure how to do.

• 

  rubixvi5 months ago

  using hooks combined with relationship will solve that

• 

  puzzleno0395 months ago

  Are you trying to display

  email

  on the User info?

  
  

  You could build a custom field for

  externalID

  that will query based on the value.

  
  

  {
    name: 'userExternalId',
    type: 'text',
    required: false,
    admin: {
      allowEdit: false,
      components: {
         Field: "@/components/RelatedInfo" // the custom component
      },
    },
  }

  
  

  Here's the custom component might looks like :

  
  

  export default function RelatedInfo() {
    const {value, setValue} = useField<string | undefined>() // value of userExternalId field earlier
    
    // states
    const [relatedUser, setRelatedUser] = useState<User | null>(null)
    const [loadingUser, setLoadingUser] = useState(false)
  
    useEffect(() => {
  
      setLoadingUser(true)
      getUser(value)
        .then(setRelatedUser)
        .catch(console.error)
        .finally(() => setLoadingUser(false))
    }, [value])
  
    const getUser = async (userExternalId: string): Promise<User | null> => {
    // we query user collection 
      const res = await fetch(
        `/api/users?where[userExternalId][equals]=${encodeURIComponent(email)}`,
        { headers: { 'Content-Type': 'application/json' } }
      )
  
      const json = await res.json()
      return json.docs?.[0] ?? null
    }
  
    if (value) {
      return (
        <>
            {loadingUser && <p>Loading user…</p>}
            {relatedUser && (
              <h1>{relatedUser.email}</h1>
            )}
        </>
      )
    }
  }

  
  

  I'd say this one prob fit ur case better, and custom field allows you do much much more.

  
  
  
  

  Or, have a duplicate of the

  email

  on your

  RelatedUser

  collection. Then you had a hook every

  email

  change to update the data on

  RelatedUser

  collection based on

  externalId

  or something .

  
  

  Although this meant that there will be duplicate data and you might not want that.

  
  
  

  You can see more on querying [here](

  https://payloadcms.com/docs/queries/overview#writing-queries

  ) and building custom field [here](

  https://payloadcms.com/docs/custom-components/overview#building-custom-component

  )

• 

  dland84504 months ago

  Okay, interesting solution, thank you for putting that together.

  
  
  

  Okay, I ended up solving by using a virtual field with a hook to query for the data I wanted from the other table. I added this to the

  RelatedUserInfo

  table:

  
  

  {
      name: 'userExternId',
      type: 'text'
  },
  {
      name: 'userEmail',
      type: 'text',
      virtual: true,
      hooks: {
          afterRead: [
              async ({ siblingData }) => {
                  const payload = await getPayload({ config });
  
                  const res = await payload.find({
                      collection: 'users',
                      select: { email: true },
                      where: { externalId: { equals: siblingData.userExternId }}
                  });
                  
                  if (res.docs.length === 1) {
                      return res.docs[0].email;
                  }
              }
          ]
      }
  }