Relationship Field

The Relationship Field is one of the most powerful fields Payload features. It provides the ability to easily relate documents together.

<LightDarkImage srcLight="https://payloadcms.com/images/docs/fields/relationship.png" srcDark="https://payloadcms.com/images/docs/fields/relationship-dark.png" alt="Shows a relationship field in the Payload Admin Panel" caption="Admin Panel screenshot of a Relationship field" />

The Relationship field is used in a variety of ways, including:

• To add Product documents to an Order document
• To allow for an Order to feature a placedBy relationship to either an Organization or User collection
• To assign Category documents to Post documents

To add a Relationship Field, set the type to relationship in your Field Config:

import type { Field } from 'payload'

export const MyRelationshipField: Field = {
  // ...
  // highlight-start
  type: 'relationship',
  relationTo: 'products',
  // highlight-end
}

Config Options

* An asterisk denotes that a property is required.

Admin Options

To the appearance and behavior of the Relationship Field in the Admin Panel, you can use the admin option:

import type { Field } from 'payload'

export const MyRelationshipField: Field = {
  // ...
  admin: {
    // highlight-line
    // ...
  },
}

The Relationship Field inherits all of the default admin options from the base Field Admin Config, plus the following additional options:

Sort Options

You can specify sortOptions in two ways:

As a string:

Provide a string to define a global default sort field for all relationship field dropdowns across different collections. You can prefix the field name with a minus symbol ("-") to sort in descending order.

Example:

sortOptions: 'fieldName',

This configuration will sort all relationship field dropdowns by "fieldName" in ascending order.

As an object :

Specify an object where keys are collection slugs and values are strings representing the field names to sort by. This allows for different sorting fields for each collection's relationship dropdown.

Example:

sortOptions: {
  "pages": "fieldName1",
  "posts": "-fieldName2",
  "categories": "fieldName3"
}

In this configuration:

• Dropdowns related to pages will be sorted by "fieldName1" in ascending order.
• Dropdowns for posts will use "fieldName2" for sorting in descending order (noted by the "-" prefix).
• Dropdowns associated with categories will sort based on "fieldName3" in ascending order.

Note: If sortOptions is not defined, the default sorting behavior of the Relationship field dropdown will be used.

Filtering relationship options

Options can be dynamically limited by supplying a query constraint, which will be used both for validating input and filtering available relationships in the UI.

The filterOptions property can either be a Where query, or a function returning true to not filter, false to prevent all, or a Where query. When using a function, it will be called with an argument object with the following properties:

Example

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      name: 'purchase',
      type: 'relationship',
      relationTo: ['products', 'services'],
      filterOptions: ({ relationTo, siblingData }) => {
        // returns a Where query dynamically by the type of relationship
        if (relationTo === 'products') {
          return {
            stock: { greater_than: siblingData.quantity },
          }
        }

        if (relationTo === 'services') {
          return {
            isAvailable: { equals: true },
          }
        }
      },
    },
  ],
}

You can learn more about writing queries here.

When a relationship field has both filterOptions and a custom validate function, the api will not validate filterOptions unless you call the default relationship field validation function imported from payload/shared in your validate function.

Bi-directional relationships

The relationship field on its own is used to define relationships for the document that contains the relationship field, and this can be considered as a "one-way" relationship. For example, if you have a Post that has a category relationship field on it, the related category itself will not surface any information about the posts that have the category set.

However, the relationship field can be used in conjunction with the Join field to produce powerful bi-directional relationship authoring capabilities. If you're interested in bi-directional relationships, check out the documentation for the Join field.

How the data is saved

Given the variety of options possible within the relationship field type, the shape of the data needed for creating and updating these fields can vary. The following sections will describe the variety of data shapes that can arise from this field.

Has One

The most simple pattern of a relationship is to use hasMany: false with a relationTo that allows for only one type of collection.

{
  slug: 'example-collection',
  fields: [
    {
      name: 'owner', // required
      type: 'relationship', // required
      relationTo: 'users', // required
      hasMany: false,
    }
  ]
}

The shape of the data to save for a document with the field configured this way would be:

{
  // ObjectID of the related user
  "owner": "6031ac9e1289176380734024"
}

When querying documents in this collection via REST API, you could query as follows:

?where[owner][equals]=6031ac9e1289176380734024.

Has One - Polymorphic

Also known as dynamic references, in this configuration, the relationTo field is an array of Collection slugs that tells Payload which Collections are valid to reference.

{
  slug: 'example-collection',
  fields: [
    {
      name: 'owner', // required
      type: 'relationship', // required
      relationTo: ['users', 'organizations'], // required
      hasMany: false,
    }
  ]
}

The shape of the data to save for a document with more than one relationship type would be:

{
  "owner": {
    "relationTo": "organizations",
    "value": "6031ac9e1289176380734024"
  }
}

Here is an example for how to query documents by this data (note the difference in referencing the owner.value):

?where[owner.value][equals]=6031ac9e1289176380734024.

You can also query for documents where a field has a relationship to a specific Collection:

?where[owners.relationTo][equals]=organizations.

This query would return only documents that have an owner relationship to organizations.

Has Many

The hasMany tells Payload that there may be more than one collection saved to the field.

{
  slug: 'example-collection',
  fields: [
    {
      name: 'owners', // required
      type: 'relationship', // required
      relationTo: 'users', // required
      hasMany: true,
    }
  ]
}

To save to the hasMany relationship field we need to send an array of IDs:

{
  "owners": ["6031ac9e1289176380734024", "602c3c327b811235943ee12b"]
}

When querying documents, the format does not change for arrays:

?where[owners][equals]=6031ac9e1289176380734024.

Has Many - Polymorphic

{
  slug: 'example-collection',
  fields: [
    {
      name: 'owners', // required
      type: 'relationship', // required
      relationTo: ['users', 'organizations'], // required
      hasMany: true,
      required: true,
    }
  ]
}

Relationship fields with hasMany set to more than one kind of collections save their data as an array of objects—each containing the Collection slug as the relationTo value, and the related document id for the value:

{
  "owners": [
    {
      "relationTo": "users",
      "value": "6031ac9e1289176380734024"
    },
    {
      "relationTo": "organizations",
      "value": "602c3c327b811235943ee12b"
    }
  ]
}

Querying is done in the same way as the earlier Polymorphic example:

?where[owners.value][equals]=6031ac9e1289176380734024.

Querying and Filtering Polymorphic Relationships

Polymorphic and non-polymorphic relationships must be queried differently because of how the related data is stored and may be inconsistent across different collections. Because of this, filtering polymorphic relationship fields from the Collection List admin UI is limited to the id value.

For a polymorphic relationship, the response will always be an array of objects. Each object will contain the relationTo and value properties.

The data can be queried by the related document ID:

?where[field.value][equals]=6031ac9e1289176380734024.

Or by the related document Collection slug:

?where[field.relationTo][equals]=your-collection-slug.

However, you cannot query on any field values within the related document. Since we are referencing multiple collections, the field you are querying on may not exist and break the query.

You cannot query on a field within a polymorphic relationship as you would with a non-polymorphic relationship.

Custom Components

Field

Server Component

import type React from 'react'
import { RelationshipField } from '@payloadcms/ui'
import type { RelationshipFieldServerComponent } from 'payload'

export const CustomRelationshipFieldServer: RelationshipFieldServerComponent =
  ({ clientField, path, schemaPath, permissions }) => {
    return (
      <RelationshipField
        field={clientField}
        path={path}
        schemaPath={schemaPath}
        permissions={permissions}
      />
    )
  }

Client Component

'use client'
import React from 'react'
import { RelationshipField } from '@payloadcms/ui'
import type { RelationshipFieldClientComponent } from 'payload'

export const CustomRelationshipFieldClient: RelationshipFieldClientComponent = (
  props,
) => {
  return <RelationshipField {...props} />
}

Label

Server Component

import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RelationshipFieldLabelServerComponent } from 'payload'

export const CustomRelationshipFieldLabelServer: RelationshipFieldLabelServerComponent =
  (clientField, path) => {
    return (
      <FieldLabel
        label={clientField?.label || clientField?.name}
        path={path}
        required={clientField?.required}
      />
    )
  }

Client Component

'use client'
import React from 'react'
import { FieldLabel } from '@payloadcms/ui'
import type { RelationshipFieldLabelClientComponent } from 'payload'

export const CustomRelationshipFieldLabelClient: RelationshipFieldLabelClientComponent =
  ({ field, path }) => {
    return (
      <FieldLabel
        label={field?.label || field?.name}
        path={path}
        required={field?.required}
      />
    )
  }