* wip moves payload, user and data into partial req * chore: adjust req type * chore(next): installs sass and resolves type errors * feat: working login route/view * fix: me route * chore(next): scaffolds access routes (#4562) * chore(next): scaffolds admin layout and dashboard view (#4566) * chore(next): builds initPage utility (#4589) * feat(3.0): next route handlers (#4590) * chore: removes old files * chore(next): ssr list view (#4594) * chore: removes old files * chore: adjusts graphql file imports to align with new operation exports * chore: allows for custom endpoints * chore: cleanup * chore(next): ssr edit view (#4614) * chore(ui): ssr main nav (#4619) * chore(next): ssr account view (#4620) * chore(next): ssr auth views and document create (#4631) * chore(next): ssr globals view (#4640) * chore(next): scaffolds document layout (#4644) * chore(next): ssr versions view (#4645) * chore(next): ssr field conditions (#4675) * chore(next): ssr field validations (#4700) * chore(next): moves dashboard view into next dir * chore(next): moves account view into next dir * chore(next): moves global edit view into next dir * chore(next): returns isolated configs and locale from initPage * chore(next): ssr api view (#4721) * feat: adds i18n functionality within Rest API, Local and Client contexts (#4749) * chore: separate client translation groups with empty line * chore: add missing translation used in db adapters * chore: simplify next/routes export and import paths * chore: renames PayloadT to Payload * chore(next): custom views (#4748) * chore: fix translation tsconfig * chore: adjust other package ts-configs that rely on translations * chore(next): installs @payloadcms/ui as direct dependency * chore(next): progress to build * chore(next): migrates types (#4792) * fixes acccept-language detection * chore(next): moves remaining components out from payload core (#4794) * chore(deps): removes all unused dependencies from payload core (#4797) * chore(next): achieves buildable state (#4803) * adds Translation component and removes more react-i18next * fixes up remaining translation strings * fixes a few i18n TODO's * chore: remaining translation strings without colons * chore: adds missing ja translations * chore(next): ssr group field (#4830) * chore: removes placeholder t function * chore: removes old file * chore(bundler-webpack): removes webpack bundler * chore(bundler-vite): removes vite bundler * chore(next): ssr tabs field (#4863) * chore(next): ssr row field * chore(next): ssr textarea field * chore(next): wires server action into document edit view (#4873) * chore(next): conditional logic (#4880) * chore(next): ssr radio, point, code, json, ui, and hidden fields (#4891) * chore(next): ssr collapsible field (#4894) * chore: remove findByID from req * chore: adjusts file property on request type * comment clarification * chore: wires up busboy with Requst readstream * chore: ports over express-fileupload into a NextJS compatible format * chore: adjust upload file structure * chore: adds try/catch around routes, corrects a few route responses * chore: renames file/function * chore: improve req type safety in local operations, misc req.files replacements * chore: misc type and fn export changes * chore: ensures root routes take pass unmodified request to root routes * chore: improve types * chore: consolidates locale api req initialization (#4922) * chore(next): overhauls field rendering strategy (#4924) * chore(next): ssr array field (#4937) * chore(next): ssr blocks field (#4942) * chore(next): ssr upload field and document drawer (#4957) * chore(next): wires form submissions (#4982) * chore: api handler adjustments * feat: adds graphql playground handler * adds credentials include setting to playground * remove old playground init, stub graphql handler location * fix: allow for null fallbackLocale * fix: correctly prioritize locales passed as null * chore: move all graphql code into next package * graphql changes * chore: semi working version of graphql http layer * gql fix attempts * rm console log * chore: partial gql changes * chore: adds gql and gql-http back into payload * chore: removes collection from req * chore: separates graphql package out for schema generation * chore: dep cleanup * chore: move graphql handlers * chore: removes unused deps * chore(next): ssr list view (#5032) * chore: refactor response handler order for custom endpoints * chore: add back in condition for collection GET path with 2 slugs * chore: rm optional chain * chore: import sort route file * chore: allows custom endpoints to attempt before erroring * feat: adds memoization to translation functions (#5036) * chore: fix APIError import * chore: return attemptCustomEndpointBeforeError responses * chore(next): properly instantiates table columns * fix(next): attaches params to req and properly assigns prefs key (#5042) * chore: reorganize next route order * chore(next): adds RouteError handler to next routes * chore: builds payload successfully * chore: misc file omissions * fix(ui): maintains proper column order * fix(ui): ensures first cell is a link * fix(next): properly copies url object in createPayloadRequest (#5064) * fix(ui): bumps react-toastify to v10.0.4 to fix hydration warnings * feat: add route for static file GET requests (#5065) * chore(next): allows resolved config promise to be thread through initPage (#5071) * chore(ui): conditionally renders field label from props * feat(next): next install script * chore: pass config to route handlers * feat: initial test suite framework (#4929) * chore(next): renderable account, api, and create first user views (#5084) * fix(next): properly parses search params in find, update, and delete handlers (#5088) * chore(next): ssr versions view (#5085) * chore: adds homepage for scss testing * chore: moves dev folder to top, establishes new test pattern * chore: working turbopack * chore: sets up working dynamic payload-config imports * remove unused code * chore: rm console log * misc * feat: correctly subs out ability to boot REST API within same process * chore: WIP dev suites * chore: removes need for REST_API folder in test dir * removes duplicate bootAdminPanel fn * misc * specify default export * chore: sets up jest to work with next/jest * chore: progress to mongodb and sharp builds * chore: passing community tests * chore: sorta workin * chore: adjust payload-config import * chore: adds rest client for Next handlers * chore: removes test garb * chore: restores payload-config tsconfig path temporarily * chore: establishes pattern for memory db during tests * chore: bumps mongoose to 7 * chore(next): 404s on nested create urls * chore: functional _community e2e * chore: increases e2e expect timeout * fix(next): sanitizes locale toString from client config * chore: type fixes * chore: pulls mongodb from main * chore: uses graphql to log user in * feat: passing auth test suite * chore(ui): threads params through context and conditionally renders document tabs (#5094) * feat(ui): adds params context (#5095) * chore: removes unecessary memory allocation for urlPropertiesObject object * chore: passing graphql test suite * chore: removes references to bson * chore: re-enables mongodb memory server for auth test suite * chore: replace bson with bson-objectid * feat: passing collections-rest int suite * chore: fixes bad imports * chore: more passing int suites * feat: passing globals int tests * feat: passing hooks int test suite * chore: remove last express file * chore: start live-preview int test migration * chore: passing localization int tests * passing relationships int tests * chore: partial passing upload int tests * chore: fixes scss imports * chore(ui): renders document info provider at root (#5106) * chore: adds schema path to useFieldPath provider, more passing tests * chore: begins work to optimize translation imports * chore: add translations to ui ts-config references * chore: add exports folder to package json exports * chore: adds readme how-to-use instructions * chore: attempts refactor of translation imports * chore: adds authentication:account translation key to server keys * chore: finishes translation optimization * chore: ignores warnings from mongodb * chore(ui): renders live document title (#5115) * chore(ui): ssr document tabs (#5116) * chore: handles redirecting from login * chore: handle redirect with no searchParams * chore: handle missing segments * chore(next): migrates server action into standalone api endpoint (#5122) * chore: adjust dashboard colection segments * test: update e2e suites * fix(ui): prevents unnecessary calls to form state * chore: fix finding global config fields from schema path * fix(next): executes root POST endpoints * chore(ui): ignores values returned by form state polling * chore: scaffolds ssr rte * chore: renders client leaves * chore: server-side rendered rich text elements * chore: defines ClientFunction pattern * chore(ui): migrates relationship field * chore: adds translations, cleans up slate * chore: functional slate link * chore: slate upload ssr * chore: relationship slate ssr * chore: remaining slate ssr * chore: fixes circular workspace dep * chore: correct broken int test import paths * chore: remove media files from root * chore: server renders custom edit view * fix(ui): resolves infinite loading in versions view * fix(next): resolves global edit view lookup * chore: payload builds * chore: delete unused files * chore: removes local property from payload * chore: adds mongodb as dev dep in db-mongodb package * chore: hide deprecation warnings for tempfile and jest-environment-jsdom * chore: remove all translations from translations dist * chore: clean ts-config files * chore: simple type fixes * chore(ui): server renders custom list view * chore: fix next config payload-config alias * chore: adds turbo alias paths * chore: adjusts translation generation * chore: improve auth function * chore: eslint config for packages/ui * chore(ui): exports FormState * chore(next): migrates account view to latest patterns * chore: disable barbie mode * chore(ui): lints * chore(next): lints * chore: for alexical * chore: custom handler type signature adjustment * fix: non-boolean condition result causes infinite looping (#4579) * chore(richtext-lexical): upgrade lexical from v0.12.5 to v0.12.6 (#4732) * chore(richtext-lexical): upgrade all lexical packages from 0.12.5 to 0.12.6 * fix(richtext-lexical): fix TypeScript errors * fix indenting * feat(richtext-lexical): Blocks: generate type definitions for blocks fields (#4529) * feat(richtext-lexical)!: Update lexical from 0.12.6 to 0.13.1, port over all useful changes from playground (#5066) * feat(richtext-lexical): Update lexical from 0.12.6 to 0.13.1, port over all useful changes from playground * chore: upgrade lexical version used in monorepo * chore: remove the 3 * chore: upgrade nodemon versions (#5059) * feat: add more options to addFieldStatePromise so that it can be used for field flattening (#4799) * feat(plugin-seo)!: remove support for payload <2.7.0 (#4765) * chore(plugin-seo): remove test script from package.json (#4762) * chore: upgrade @types/nodemailer from v6.4.8 to v6.4.14 (#4733) * chore: revert auth and initPage changes * chore(next): moves edit and list views (#5170) * fix: "The punycode module is deprecated" warning by updating nodemailer * chore: adjust translations tsconfig paths in root * chore: fix merge build --------- Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com> Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com> Co-authored-by: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com> Co-authored-by: Elliot DeNolf <denolfe@gmail.com> Co-authored-by: James <james@trbl.design> Co-authored-by: Alessio Gravili <alessio@gravili.de> Co-authored-by: Alessio Gravili <70709113+AlessioGr@users.noreply.github.com>
367 lines
14 KiB
Plaintext
367 lines
14 KiB
Plaintext
---
|
|
title: Relationship Field
|
|
label: Relationship
|
|
order: 130
|
|
desc: The Relationship field provides the ability to relate documents together. Learn how to use Relationship fields, see examples and options.
|
|
keywords: relationship, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
|
|
---
|
|
|
|
<Banner>
|
|
The Relationship field is one of the most powerful fields Payload features. It provides for the
|
|
ability to easily relate documents together.
|
|
</Banner>
|
|
|
|
<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"
|
|
/>
|
|
|
|
**Example uses:**
|
|
|
|
- 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
|
|
|
|
### Config
|
|
|
|
| Option | Description |
|
|
|---------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
| **`name`** \* | To be used as the property name when stored and retrieved from the database. [More](/docs/fields/overview#field-names) |
|
|
| **`relationTo`** \* | Provide one or many collection `slug`s to be able to assign relationships to. |
|
|
| **`filterOptions`** | A query to filter which options appear in the UI and validate against. [More](#filtering-relationship-options). |
|
|
| **`hasMany`** | Boolean when, if set to `true`, allows this field to have many relations instead of only one. |
|
|
| **`minRows`** | A number for the fewest allowed items during validation when a value is present. Used with `hasMany`. |
|
|
| **`maxRows`** | A number for the most allowed items during validation when a value is present. Used with `hasMany`. |
|
|
| **`maxDepth`** | Sets a number limit on iterations of related documents to populate when queried. [Depth](/docs/getting-started/concepts#depth) |
|
|
| **`label`** | Text used as a field label in the Admin panel or an object with keys for each language. |
|
|
| **`unique`** | Enforce that each entry in the Collection has a unique value for this field. |
|
|
| **`validate`** | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
|
|
| **`index`** | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
|
|
| **`saveToJWT`** | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
|
|
| **`hooks`** | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks) |
|
|
| **`access`** | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control) |
|
|
| **`hidden`** | Restrict this field's visibility from all APIs entirely. Will still be saved to the database, but will not appear in any API or the Admin panel. |
|
|
| **`defaultValue`** | Provide data to be used for this field's default value. [More](/docs/fields/overview#default-values) |
|
|
| **`localized`** | Enable localization for this field. Requires [localization to be enabled](/docs/configuration/localization) in the Base config. |
|
|
| **`required`** | Require this field to have a value. |
|
|
| **`admin`** | Admin-specific configuration. See the [default field admin config](/docs/fields/overview#admin-config) for more details. |
|
|
| **`custom`** | Extension point for adding custom data (e.g. for plugins) |
|
|
|
|
_\* An asterisk denotes that a property is required._
|
|
|
|
<Banner type="success">
|
|
<strong>Tip:</strong>
|
|
<br />
|
|
The [Depth](/docs/getting-started/concepts#depth) parameter can be used to automatically populate
|
|
related documents that are returned by the API.
|
|
</Banner>
|
|
|
|
### Admin config
|
|
|
|
In addition to the default [field admin config](/docs/fields/overview#admin-config), the Relationship field type also
|
|
allows for the following admin-specific properties:
|
|
|
|
**`isSortable`**
|
|
|
|
Set to `true` if you'd like this field to be sortable within the Admin UI using drag and drop (only works when `hasMany`
|
|
is set to `true`).
|
|
|
|
**`allowCreate`**
|
|
|
|
Set to `false` if you'd like to disable the ability to create new documents from within the relationship field (hides
|
|
the "Add new" button in the admin UI).
|
|
|
|
**`sortOptions`**
|
|
|
|
The `sortOptions` property allows you to define a default sorting order for the options within a Relationship field's
|
|
dropdown. This can be particularly useful for ensuring that the most relevant options are presented first to the user.
|
|
|
|
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:
|
|
|
|
```ts
|
|
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:
|
|
|
|
```ts
|
|
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](/docs/queries/overview), 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:
|
|
|
|
| Property | Description |
|
|
|---------------|--------------------------------------------------------------------------------------|
|
|
| `relationTo` | The `relationTo` to filter against (as defined on the field) |
|
|
| `data` | An object of the full collection or global document currently being edited |
|
|
| `siblingData` | An object of the document data limited to fields within the same parent to the field |
|
|
| `id` | The value of the collection `id`, will be `undefined` on create request |
|
|
| `user` | The currently authenticated user object |
|
|
|
|
### Example
|
|
|
|
```ts
|
|
import { CollectionConfig } from 'payload/types'
|
|
|
|
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](/docs/queries/overview).
|
|
|
|
<Banner type="warning">
|
|
<strong>Note:</strong>
|
|
<br />
|
|
When a relationship field has both <strong>filterOptions</strong> and a custom{' '}
|
|
<strong>validate</strong> function, the api will not validate <strong>filterOptions</strong>{' '}
|
|
unless you call the default relationship field validation function imported from{' '}
|
|
<strong>payload/fields/validations</strong> in your validate function.
|
|
</Banner>
|
|
|
|
### 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.
|
|
|
|
```ts
|
|
{
|
|
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:
|
|
|
|
```json
|
|
{
|
|
// 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.
|
|
|
|
```ts
|
|
{
|
|
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:
|
|
|
|
```json
|
|
{
|
|
"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.
|
|
|
|
```ts
|
|
{
|
|
slug: 'example-collection',
|
|
fields
|
|
:
|
|
[
|
|
{
|
|
name: 'owners', // required
|
|
type: 'relationship', // required
|
|
relationTo: 'users', // required
|
|
hasMany: true,
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
To save the to `hasMany` relationship field we need to send an array of IDs:
|
|
|
|
```json
|
|
{
|
|
"owners": [
|
|
"6031ac9e1289176380734024",
|
|
"602c3c327b811235943ee12b"
|
|
]
|
|
}
|
|
```
|
|
|
|
When querying documents, the format does not change for arrays:
|
|
|
|
`?where[owners][equals]=6031ac9e1289176380734024`.
|
|
|
|
#### Has Many - Polymorphic
|
|
|
|
```ts
|
|
{
|
|
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`:
|
|
|
|
```json
|
|
{
|
|
"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.
|
|
|
|
<Banner type="warning">
|
|
<strong>Note:</strong>
|
|
<br />
|
|
You <strong>cannot</strong> query on a field within a polymorphic relationship as you would with a non-polymorphic relationship.
|
|
</Banner>
|