docs: removes express

This commit is contained in:
Jacob Fletcher
2024-05-13 10:29:59 -04:00
parent 0886e4e972
commit a20cf70105
73 changed files with 141 additions and 280 deletions

View File

@@ -3,7 +3,7 @@ title: Collection Access Control
label: Collections label: Collections
order: 20 order: 20
desc: With Collection-level Access Control you can define which users can create, read, update or delete Collections. desc: With Collection-level Access Control you can define which users can create, read, update or delete Collections.
keywords: collections, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: collections, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
You can define Collection-level Access Control within each Collection's `access` property. All Access Control functions accept one `args` argument. You can define Collection-level Access Control within each Collection's `access` property. All Access Control functions accept one `args` argument.
@@ -51,10 +51,10 @@ Returns a boolean which allows/denies access to the `create` request.
**Available argument properties:** **Available argument properties:**
| Option | Description | | Option | Description |
| ---------- | -------------------------------------------------------------------------- | | ---------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`data`** | The data passed to create the document with. | | **`data`** | The data passed to create the document with. |
**Example:** **Example:**
@@ -80,7 +80,7 @@ Read access functions can return a boolean result or optionally return a [query
| Option | Description | | Option | Description |
| --------- | -------------------------------------------------------------------------- | | --------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`id`** | `id` of document requested, if within `findByID` | | **`id`** | `id` of document requested, if within `findByID` |
**Example:** **Example:**
@@ -111,7 +111,7 @@ Update access functions can return a boolean result or optionally return a [quer
| Option | Description | | Option | Description |
| ---------- | -------------------------------------------------------------------------- | | ---------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`id`** | `id` of document requested to update | | **`id`** | `id` of document requested to update |
| **`data`** | The data passed to update the document with | | **`data`** | The data passed to update the document with |
@@ -138,7 +138,7 @@ Similarly to the Update function, returns a boolean or a [query constraint](/doc
| Option | Description | | Option | Description |
| --------- | --------------------------------------------------------------------------------------------------- | | --------- | --------------------------------------------------------------------------------------------------- |
| **`req`** | The Express `request` object with additional `user` property, which is the currently logged in user | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object with additional `user` property, which is the currently logged in user |
| **`id`** | `id` of document requested to delete | | **`id`** | `id` of document requested to delete |
**Example:** **Example:**
@@ -173,7 +173,7 @@ If the Collection is [used to access the Payload Admin panel](/docs/admin/overvi
| Option | Description | | Option | Description |
| --------- | -------------------------------------------------------------------------- | | --------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
### Unlock ### Unlock
@@ -183,4 +183,4 @@ Determines which users can [unlock](/docs/authentication/operations#unlock) othe
| Option | Description | | Option | Description |
| --------- | -------------------------------------------------------------------------- | | --------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |

View File

@@ -3,7 +3,7 @@ title: Field-level Access Control
label: Fields label: Fields
order: 30 order: 30
desc: Field-level Access Control is specified within a field's config, and allows you to define which users can create, read or update Fields. desc: Field-level Access Control is specified within a field's config, and allows you to define which users can create, read or update Fields.
keywords: fields, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: fields, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Field Access Control is specified with functions inside a field's config. All field-level Controls return a boolean value to allow or deny access for the specified operation. No field-level Access Controls support returning query constraints. All Access Control functions accept one `args` argument. Field Access Control is specified with functions inside a field's config. All field-level Controls return a boolean value to allow or deny access for the specified operation. No field-level Access Controls support returning query constraints. All Access Control functions accept one `args` argument.
@@ -47,7 +47,7 @@ Returns a boolean which allows or denies the ability to set a field's value when
| Option | Description | | Option | Description |
| ----------------- | -------------------------------------------------------------------------- | | ----------------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`data`** | The full data passed to create the document. | | **`data`** | The full data passed to create the document. |
| **`siblingData`** | Immediately adjacent field data passed to create the document. | | **`siblingData`** | Immediately adjacent field data passed to create the document. |
@@ -59,7 +59,7 @@ Returns a boolean which allows or denies the ability to read a field's value. If
| Option | Description | | Option | Description |
| ----------------- | -------------------------------------------------------------------------- | | ----------------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`id`** | `id` of the document being read | | **`id`** | `id` of the document being read |
| **`doc`** | The full document data. | | **`doc`** | The full document data. |
| **`siblingData`** | Immediately adjacent field data of the document being read. | | **`siblingData`** | Immediately adjacent field data of the document being read. |
@@ -74,7 +74,7 @@ If `false` is returned and you attempt to update the field's value, the operatio
| Option | Description | | Option | Description |
| ----------------- | -------------------------------------------------------------------------- | | ----------------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`id`** | `id` of the document being updated | | **`id`** | `id` of the document being updated |
| **`data`** | The full data passed to update the document. | | **`data`** | The full data passed to update the document. |
| **`siblingData`** | Immediately adjacent field data passed to update the document with. | | **`siblingData`** | Immediately adjacent field data passed to update the document with. |

View File

@@ -3,7 +3,7 @@ title: Globals Access Control
label: Globals label: Globals
order: 40 order: 40
desc: Global-level Access Control is specified within each Global's `access` property and allows you to define which users can read or update Globals. desc: Global-level Access Control is specified within each Global's `access` property and allows you to define which users can read or update Globals.
keywords: globals, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: globals, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
You can define Global-level Access Control within each Global's `access` property. All Access Control functions accept one `args` argument. You can define Global-level Access Control within each Global's `access` property. All Access Control functions accept one `args` argument.
@@ -45,7 +45,7 @@ Returns a boolean result or optionally a [query constraint](/docs/queries/overvi
| Option | Description | | Option | Description |
| --------- | -------------------------------------------------------------------------- | | --------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
### Update ### Update
@@ -55,5 +55,5 @@ Returns a boolean result or optionally a [query constraint](/docs/queries/overvi
| Option | Description | | Option | Description |
| ---------- | -------------------------------------------------------------------------- | | ---------- | -------------------------------------------------------------------------- |
| **`req`** | The Express `request` object containing the currently authenticated `user` | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object containing the currently authenticated `user` |
| **`data`** | The data passed to update the global with. | | **`data`** | The data passed to update the global with. |

View File

@@ -3,7 +3,7 @@ title: Access Control
label: Overview label: Overview
order: 10 order: 10
desc: Payload makes it simple to define and manage access control. By declaring roles, you can set permissions and restrict what your users can interact with. desc: Payload makes it simple to define and manage access control. By declaring roles, you can set permissions and restrict what your users can interact with.
keywords: overview, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: overview, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Access control within Payload is extremely powerful while remaining easy and intuitive to manage. Declaring who should have access to what documents is no more complex than writing a simple JavaScript function that either returns a `boolean` or a [`query`](/docs/queries/overview) constraint to restrict which documents users can interact with. Access control within Payload is extremely powerful while remaining easy and intuitive to manage. Declaring who should have access to what documents is no more complex than writing a simple JavaScript function that either returns a `boolean` or a [`query`](/docs/queries/overview) constraint to restrict which documents users can interact with.
@@ -21,7 +21,7 @@ Access control within Payload is extremely powerful while remaining easy and int
## Default Settings ## Default Settings
**By default, all Collections and Globals require that a user is logged in to be able to interact in any way.** The default Access Control function evaluates the `user` from the Express `req` and returns `true` if a user is logged in, and `false` if not. **By default, all Collections and Globals require that a user is logged in to be able to interact in any way.** The default Access Control function evaluates the `user` from the `req` and returns `true` if a user is logged in, and `false` if not.
**Default Access function:** **Default Access function:**
@@ -37,9 +37,11 @@ const defaultPayloadAccess = ({ req: { user } }) => {
<strong>Note:</strong> <strong>Note:</strong>
<br /> <br />
In the Local API, all Access Control functions are skipped by default, allowing your server to do In the Local API, all Access Control functions are skipped by default, allowing your server to do
whatever it needs. But, you can opt back in by setting the option <strong> whatever it needs. But, you can opt back in by setting the option
<strong>
overrideAccess overrideAccess
</strong>{' '} </strong>
{' '}
to <strong>false</strong>. to <strong>false</strong>.
</Banner> </Banner>

View File

@@ -3,7 +3,7 @@ title: Swap in your own React components
label: Custom Components label: Custom Components
order: 20 order: 20
desc: Fully customize your Admin Panel by swapping in your own React components. Add fields, remove views, update routes and change functions to sculpt your perfect Dashboard. desc: Fully customize your Admin Panel by swapping in your own React components. Add fields, remove views, update routes and change functions to sculpt your perfect Dashboard.
keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
The [Payload Admin](./overview) panel is designed to be as minimal and straightforward as possible to allow easy customization and control. In order for Payload to support this level of customization without introducing versioning or future-proofing issues, Payload provides a pattern for you to supply your own React components via your Payload config. The [Payload Admin](./overview) panel is designed to be as minimal and straightforward as possible to allow easy customization and control. In order for Payload to support this level of customization without introducing versioning or future-proofing issues, Payload provides a pattern for you to supply your own React components via your Payload config.

View File

@@ -3,7 +3,7 @@ title: Customizing CSS & SCSS
label: Customizing CSS label: Customizing CSS
order: 60 order: 60
desc: Customize your Payload admin panel further by adding your own CSS or SCSS style sheet to the configuration, powerful theme and design options are waiting for you. desc: Customize your Payload admin panel further by adding your own CSS or SCSS style sheet to the configuration, powerful theme and design options are waiting for you.
keywords: admin, css, scss, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: admin, css, scss, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
## Adding your own CSS / SCSS ## Adding your own CSS / SCSS

View File

@@ -3,7 +3,7 @@ title: React Hooks
label: React Hooks label: React Hooks
order: 50 order: 50
desc: Make use of all of the powerful React hooks that Payload provides. desc: Make use of all of the powerful React hooks that Payload provides.
keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload provides a variety of powerful hooks that can be used within your own React components. With them, you can interface with Payload itself and build just about any type of complex customization you can think of—directly in familiar React code. Payload provides a variety of powerful hooks that can be used within your own React components. With them, you can interface with Payload itself and build just about any type of complex customization you can think of—directly in familiar React code.

View File

@@ -3,7 +3,7 @@ title: The Admin Panel
label: Overview label: Overview
order: 10 order: 10
desc: Manage your data and customize the Admin Panel by swapping in your own React components. Create, modify or remove views, fields, styles and much more. desc: Manage your data and customize the Admin Panel by swapping in your own React components. Create, modify or remove views, fields, styles and much more.
keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload dynamically generates a beautiful, fully functional Admin Panel to manage your users and data. The Payload Admin Panel is highly performant, even with 100+ fields, and is written fully in TypeScript. It is built with [React](https://react.dev) using the [Next.js App Router](https://nextjs.org/docs/app) and fully supports [React Server Components](https://react.dev/reference/rsc/server-components) which enables the use of the [Local API](/docs/local-api/overview) on the front-end. Payload dynamically generates a beautiful, fully functional Admin Panel to manage your users and data. The Payload Admin Panel is highly performant, even with 100+ fields, and is written fully in TypeScript. It is built with [React](https://react.dev) using the [Next.js App Router](https://nextjs.org/docs/app) and fully supports [React Server Components](https://react.dev/reference/rsc/server-components) which enables the use of the [Local API](/docs/local-api/overview) on the front-end.

View File

@@ -3,7 +3,7 @@ title: Managing User Preferences
label: Preferences label: Preferences
order: 50 order: 50
desc: Store the preferences of your users as they interact with the Admin panel. desc: Store the preferences of your users as they interact with the Admin panel.
keywords: admin, preferences, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: admin, preferences, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
As your users interact with your Admin panel, you might want to store their preferences in a persistent manner, so that when they revisit the Admin panel, they can pick right back up where they left off. As your users interact with your Admin panel, you might want to store their preferences in a persistent manner, so that when they revisit the Admin panel, they can pick right back up where they left off.

View File

@@ -3,7 +3,7 @@ title: Authentication Config
label: Config label: Config
order: 20 order: 20
desc: Enable and customize options in the Authentication config for features including Forgot Password, Login Attempts, API key usage and more. desc: Enable and customize options in the Authentication config for features including Forgot Password, Login Attempts, API key usage and more.
keywords: authentication, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: authentication, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload's Authentication is extremely powerful and gives you everything you need when you go to build a new app or site in a secure and responsible manner. Payload's Authentication is extremely powerful and gives you everything you need when you go to build a new app or site in a secure and responsible manner.
@@ -18,7 +18,7 @@ To enable Authentication on a collection, define an `auth` property and set it t
| **`tokenExpiration`** | How long (in seconds) to keep the user logged in. JWTs and HTTP-only cookies will both expire at the same time. | | **`tokenExpiration`** | How long (in seconds) to keep the user logged in. JWTs and HTTP-only cookies will both expire at the same time. |
| **`maxLoginAttempts`** | Only allow a user to attempt logging in X amount of times. Automatically locks out a user from authenticating if this limit is passed. Set to `0` to disable. | | **`maxLoginAttempts`** | Only allow a user to attempt logging in X amount of times. Automatically locks out a user from authenticating if this limit is passed. Set to `0` to disable. |
| **`lockTime`** | Set the time (in milliseconds) that a user should be locked out if they fail authentication more times than `maxLoginAttempts` allows for. | | **`lockTime`** | Set the time (in milliseconds) that a user should be locked out if they fail authentication more times than `maxLoginAttempts` allows for. |
| **`depth`** | How many levels deep a `user` document should be populated when creating the JWT and binding the `user` to the express `req`. Defaults to `0` and should only be modified if absolutely necessary, as this will affect performance. | | **`depth`** | How many levels deep a `user` document should be populated when creating the JWT and binding the `user` to the `req`. Defaults to `0` and should only be modified if absolutely necessary, as this will affect performance. |
| **`cookies`** | Set cookie options, including `secure`, `sameSite`, and `domain`. For advanced users. | | **`cookies`** | Set cookie options, including `secure`, `sameSite`, and `domain`. For advanced users. |
| **`forgotPassword`** | Customize the way that the `forgotPassword` operation functions. [More](/docs/authentication/config#forgot-password) | | **`forgotPassword`** | Customize the way that the `forgotPassword` operation functions. [More](/docs/authentication/config#forgot-password) |
| **`verify`** | Set to `true` or pass an object with verification options to require users to verify by email before they are allowed to log into your app. [More](/docs/authentication/config#email-verification) | | **`verify`** | Set to `true` or pass an object with verification options to require users to verify by email before they are allowed to log into your app. [More](/docs/authentication/config#email-verification) |

View File

@@ -3,7 +3,7 @@ title: Authentication Operations
label: Operations label: Operations
order: 30 order: 30
desc: Enabling Authentication automatically makes key operations available such as Login, Logout, Verify, Unlock, Reset Password and more. desc: Enabling Authentication automatically makes key operations available such as Login, Logout, Verify, Unlock, Reset Password and more.
keywords: authentication, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: authentication, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Enabling Authentication on a Collection automatically exposes additional auth-based operations in the Local, REST, and GraphQL APIs. Enabling Authentication on a Collection automatically exposes additional auth-based operations in the Local, REST, and GraphQL APIs.
@@ -107,7 +107,7 @@ query {
## Login ## Login
Accepts an `email` and `password`. On success, it will return the logged in user as well as a token that can be used to authenticate. In the GraphQL and REST APIs, this operation also automatically sets an HTTP-only cookie including the user's token. If you pass an Express `res` to the Local API operation, Payload will set a cookie there as well. Accepts an `email` and `password`. On success, it will return the logged in user as well as a token that can be used to authenticate. In the GraphQL and REST APIs, this operation also automatically sets an HTTP-only cookie including the user's token. If you pass a `res` to the Local API operation, Payload will set a cookie there as well.
**Example REST API login**: **Example REST API login**:

View File

@@ -3,7 +3,7 @@ title: Authentication Overview
label: Overview label: Overview
order: 10 order: 10
desc: Payload provides highly secure user Authentication out of the box, and you can fully customize, override, or remove the default Authentication support. desc: Payload provides highly secure user Authentication out of the box, and you can fully customize, override, or remove the default Authentication support.
keywords: authentication, config, configuration, overview, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: authentication, config, configuration, overview, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<YouTube <YouTube
@@ -77,14 +77,14 @@ Once enabled, each document that is created within the Collection can be thought
## Token-based auth ## Token-based auth
Successfully logging in returns a `JWT` (JSON web token) which is how a user will identify themselves to Payload. By providing this JWT via either an HTTP-only cookie or an `Authorization: JWT` or `Authorization: Bearer` header, Payload will automatically identify the user and add its user JWT data to the Express `req`, which is available throughout Payload including within access control, hooks, and more. Successfully logging in returns a `JWT` (JSON web token) which is how a user will identify themselves to Payload. By providing this JWT via either an HTTP-only cookie or an `Authorization: JWT` or `Authorization: Bearer` header, Payload will automatically identify the user and add its user JWT data to the `req`, which is available throughout Payload including within access control, hooks, and more.
You can specify what data gets encoded to the JWT token by setting `saveToJWT` to true in your auth collection fields. If you wish to use a different key other than the field `name`, you can provide it to `saveToJWT` as a string. It is also possible to use `saveToJWT` on fields that are nested in inside groups and tabs. If a group has a `saveToJWT` set it will include the object with all sub-fields in the token. You can set `saveToJWT: false` for any fields you wish to omit. If a field inside a group has `saveToJWT` set, but the group does not, the field will be included at the top level of the token. You can specify what data gets encoded to the JWT token by setting `saveToJWT` to true in your auth collection fields. If you wish to use a different key other than the field `name`, you can provide it to `saveToJWT` as a string. It is also possible to use `saveToJWT` on fields that are nested in inside groups and tabs. If a group has a `saveToJWT` set it will include the object with all sub-fields in the token. You can set `saveToJWT: false` for any fields you wish to omit. If a field inside a group has `saveToJWT` set, but the group does not, the field will be included at the top level of the token.
<Banner type="success"> <Banner type="success">
<strong>Tip:</strong> <strong>Tip:</strong>
<br /> <br />
You can access the logged-in user from access control functions and hooks via the Express{' '} You can access the logged-in user from access control functions and hooks via the{' '}
<strong>req</strong>. The logged-in user is automatically added as the <strong>user</strong>{' '} <strong>req</strong>. The logged-in user is automatically added as the <strong>user</strong>{' '}
property. property.
</Banner> </Banner>

View File

@@ -1,56 +0,0 @@
---
title: Using the Payload Auth Middleware
label: Using the Middleware
order: 40
desc: Make full use of Payload's built-in authentication with your own custom Express endpoints by adding Payload's authentication middleware.
keywords: authentication, middleware, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
Because Payload uses your existing Express server, you are free to add whatever logic you need to your app through endpoints of your own. However, Payload does not add its middleware to your Express app itself—instead, it scopes all of its middleware to Payload-specific routers.
This approach has a ton of benefits - it's great for isolation of concerns and limiting scope, but it also means that your additional routes won't have access to Payload's user authentication.
<Banner type="success">
You can make full use of Payload's built-in authentication within your own custom Express
endpoints by adding Payload's authentication middleware.
</Banner>
<Banner type="warning">
Payload must be initialized before the `payload.authenticate` middleware can be used. This is done
by calling `payload.init()` prior to adding the middleware.
</Banner>
Example in `server.js`:
```ts
import express from 'express'
import payload from 'payload'
const app = express()
const start = async () => {
await payload.init({
secret: 'PAYLOAD_SECRET_KEY',
express: app,
})
const router = express.Router()
// Note: Payload must be initialized before the `payload.authenticate` middleware can be used
router.use(payload.authenticate) // highlight-line
router.get('/', (req, res) => {
if (req.user) {
return res.send(`Authenticated successfully as ${req.user.email}.`)
}
return res.send('Not authenticated')
})
app.use('/some-route-here', router)
app.listen(3000)
}
start()
```

View File

@@ -3,7 +3,7 @@ title: Collection Configs
label: Collections label: Collections
order: 20 order: 20
desc: Structure your Collections for your needs by defining fields, adding slugs and labels, establishing access control, tying in hooks, setting timestamps and more. desc: Structure your Collections for your needs by defining fields, adding slugs and labels, establishing access control, tying in hooks, setting timestamps and more.
keywords: collections, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: collections, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload Collections are defined through configs of their own, and you can define as many as your application needs. Each Payload Collections are defined through configs of their own, and you can define as many as your application needs. Each

View File

@@ -1,81 +0,0 @@
---
title: Express
label: Express
order: 60
desc: Payload utilizes Express middleware packages, you can customize how they work by passing in configuration options.
keywords: config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
---
Payload utilizes a few Express-specific middleware packages within its own routers. You can customize how they work by passing in configuration options to the main Payload config's `express` property.
## Custom Middleware
Payload allows you to pass in custom Express middleware to be used on all of the routes it opens. This is useful for adding logging or any other custom functionality to your endpoints.
There are 2 exposed properties. Each property is an array of middleware functions.
- `preMiddleware` - runs before any of the Payload middleware
- `postMiddleware` - runs after all of the Payload middleware
```ts
{
express: {
preMiddleware: [
(req, res, next) => {
// do something
next()
}
],
postMiddleware: [
(req, res, next) => {
// do something
next()
}
]
}
}
// Example logging middleware function
const requestLoggerMiddleware = (req, res, next) => {
req.payload.logger.info(`request: ${req.method} ${req.url}`)
next()
}
```
## JSON
`express.json()` is used to parse JSON body content into JavaScript objects accessible on the Express `req`. Payload allows you to customize all of the `json` method's options. Common examples of customization use-cases are increasing the max allowed JSON body size which defaults to `2MB`.
**Example payload.config.js for how to increase the max JSON size allowed to be sent to Payload endpoints:**
```js
{
express: {
json: {
limit: '4mb',
}
}
}
```
You can find a list of all available options that are able to be passed to `express.json()` [here](https://expressjs.com/en/api.html).
## Compression
Payload uses the `compression` package to optimize transfer size for all of the routes it opens, and you can pass customization options through the Payload config.
To customize compression options, pass an object to the Payload config's `express` property.
**Example payload.config.js:**
```js
{
express: {
compression: {
// settings go here
}
}
}
```
Typically, the default options for this package are suitable. However, for a list of all available customization options, [click here](http://expressjs.com/en/resources/middleware/compression.html).

View File

@@ -3,7 +3,7 @@ title: Global Configs
label: Globals label: Globals
order: 30 order: 30
desc: Set up your Global config for your needs by defining fields, adding slugs and labels, establishing access control, tying in hooks and more. desc: Set up your Global config for your needs by defining fields, adding slugs and labels, establishing access control, tying in hooks and more.
keywords: globals, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: globals, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Global configs are in many ways similar to [Collections](/docs/configuration/collections). The big difference is that Collections will potentially contain _many_ documents, while a Global is a "one-off". Globals are perfect for things like header nav, site-wide banner alerts, app-wide localized strings, and other "global" data that your site or app might rely on. Global configs are in many ways similar to [Collections](/docs/configuration/collections). The big difference is that Collections will potentially contain _many_ documents, while a Global is a "one-off". Globals are perfect for things like header nav, site-wide banner alerts, app-wide localized strings, and other "global" data that your site or app might rely on.

View File

@@ -3,7 +3,7 @@ title: I18n
label: I18n label: I18n
order: 40 order: 40
desc: Manage and customize internationalization support in your CMS editor experience desc: Manage and customize internationalization support in your CMS editor experience
keywords: internationalization, i18n, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: internationalization, i18n, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Not only does Payload support managing localized content, it also has internationalization support so that users in the [Admin Panel](../admin/overview) can work in their preferred language. Payload's i18n comes by default without any additional setup, and you can extend the default settings to customize the language settings to your needs. Not only does Payload support managing localized content, it also has internationalization support so that users in the [Admin Panel](../admin/overview) can work in their preferred language. Payload's i18n comes by default without any additional setup, and you can extend the default settings to customize the language settings to your needs.
@@ -99,11 +99,10 @@ After a user logs in, they can change their language selection in the `/account`
[contributions](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md). [contributions](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md).
</Banner> </Banner>
## Node Express ## Node
Payload's backend uses express middleware to set the language on incoming requests before they are handled. This allows backend validation to return error messages in the user's own language or system generated emails to be sent using the correct translation. You can make HTTP requests with the `accept-language` header and Payload will use that language. Payload's backend sets the language on incoming requests before they are handled. This allows backend validation to return error messages in the user's own language or system generated emails to be sent using the correct translation. You can make HTTP requests with the `accept-language` header and Payload will use that language.
<<<<<<< HEAD
Anywhere in your Payload app that you have access to the `req` object, you can access payload's extensive internationalization features assigned to `req.i18n`. To access text translations you can use `req.t('namespace:key')`. Anywhere in your Payload app that you have access to the `req` object, you can access payload's extensive internationalization features assigned to `req.i18n`. To access text translations you can use `req.t('namespace:key')`.
## Configuration Options ## Configuration Options
@@ -196,8 +195,3 @@ const field: Field = {
} }
``` ```
=======
Anywhere in your Payload app that you have access to the `req` object, you can access i18next's extensive internationalization features assigned to `req.i18n`. To access text translations you can use `req.t('namespace:key')`.
Read the i18next [API documentation](https://www.i18next.com/overview/api) to learn more.
>>>>>>> bce4876e8 (docs(admin): updates admin overview doc)

View File

@@ -3,7 +3,7 @@ title: Localization
label: Localization label: Localization
order: 50 order: 50
desc: Add and maintain as many locales as you need by adding Localization to your Payload config, set options for default locale, fallbacks, fields and more. desc: Add and maintain as many locales as you need by adding Localization to your Payload config, set options for default locale, fallbacks, fields and more.
keywords: localization, internationalization, i18n, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: localization, internationalization, i18n, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload features deep field-based localization support. Maintaining as many locales as you need is easy. All Payload features deep field-based localization support. Maintaining as many locales as you need is easy. All

View File

@@ -3,7 +3,7 @@ title: The Payload Config
label: Overview label: Overview
order: 10 order: 10
desc: The Payload config is central to everything that Payload does, from adding custom React components, to modifying collections, controlling localization and much more. desc: The Payload config is central to everything that Payload does, from adding custom React components, to modifying collections, controlling localization and much more.
keywords: overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload is a _config-based_, code-first CMS and application framework. The Payload config is central to everything that Payload does. It scaffolds the data that Payload stores as well as maintains custom React components, hook logic, custom validations, and much more. Payload is a _config-based_, code-first CMS and application framework. The Payload config is central to everything that Payload does. It scaffolds the data that Payload stores as well as maintains custom React components, hook logic, custom validations, and much more.
@@ -38,7 +38,6 @@ Payload is a _config-based_, code-first CMS and application framework. The Paylo
| `upload` | Base Payload upload configuration. [More](/docs/upload/overview#payload-wide-upload-options). | | `upload` | Base Payload upload configuration. [More](/docs/upload/overview#payload-wide-upload-options). |
| `routes` | Control the routing structure that Payload binds itself to. Specify `admin`, `api`, `graphQL`, and `graphQLPlayground`. | | `routes` | Control the routing structure that Payload binds itself to. Specify `admin`, `api`, `graphQL`, and `graphQLPlayground`. |
| `email` | Base email settings to allow Payload to generate email such as Forgot Password requests and other requirements. [More](/docs/email/overview#configuration) | | `email` | Base email settings to allow Payload to generate email such as Forgot Password requests and other requirements. [More](/docs/email/overview#configuration) |
| `express` | Express-specific middleware options such as compression and JSON parsing. [More](/docs/configuration/express) |
| `debug` | Enable to expose more detailed error information. | | `debug` | Enable to expose more detailed error information. |
| `telemetry` | Disable Payload telemetry by passing `false`. [More](/docs/configuration/overview#telemetry) | | `telemetry` | Disable Payload telemetry by passing `false`. [More](/docs/configuration/overview#telemetry) |
| `rateLimit` | Control IP-based rate limiting for all Payload resources. Used to prevent DDoS attacks and [more](/docs/production/preventing-abuse#rate-limiting-requests). | | `rateLimit` | Control IP-based rate limiting for all Payload resources. Used to prevent DDoS attacks and [more](/docs/production/preventing-abuse#rate-limiting-requests). |

View File

@@ -2,7 +2,7 @@
title: Migrations title: Migrations
label: Migrations label: Migrations
order: 20 order: 20
keywords: database, migrations, ddl, sql, mongodb, postgres, documentation, Content Management System, cms, headless, typescript, node, react, express keywords: database, migrations, ddl, sql, mongodb, postgres, documentation, Content Management System, cms, headless, typescript, node, react, nextjs
desc: Payload features first-party database migrations all done in TypeScript. desc: Payload features first-party database migrations all done in TypeScript.
--- ---

View File

@@ -3,7 +3,7 @@ title: MongoDB
label: MongoDB label: MongoDB
order: 40 order: 40
desc: Payload has supported MongoDB natively since we started. The flexible nature of MongoDB lends itself well to Payload's powerful fields. desc: Payload has supported MongoDB natively since we started. The flexible nature of MongoDB lends itself well to Payload's powerful fields.
keywords: MongoDB, documentation, typescript, Content Management System, cms, headless, javascript, node, react, express keywords: MongoDB, documentation, typescript, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
To use Payload with MongoDB, install the package `@payloadcms/db-mongodb`. It will come with everything you need to To use Payload with MongoDB, install the package `@payloadcms/db-mongodb`. It will come with everything you need to

View File

@@ -2,7 +2,7 @@
title: Database title: Database
label: Overview label: Overview
order: 10 order: 10
keywords: database, mongodb, postgres, documentation, Content Management System, cms, headless, typescript, node, react, express keywords: database, mongodb, postgres, documentation, Content Management System, cms, headless, typescript, node, react, nextjs
desc: With Payload, you bring your own database and own your data. You have full control. desc: With Payload, you bring your own database and own your data. You have full control.
--- ---

View File

@@ -3,7 +3,7 @@ title: Postgres
label: Postgres label: Postgres
order: 50 order: 50
desc: Payload supports Postgres through an officially supported Drizzle database adapter. desc: Payload supports Postgres through an officially supported Drizzle database adapter.
keywords: Postgres, documentation, typescript, Content Management System, cms, headless, javascript, node, react, express keywords: Postgres, documentation, typescript, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
To use Payload with Postgres, install the package `@payloadcms/db-postgres`. It leverages Drizzle ORM and `node-postgres` to interact with a Postgres database that you provide. To use Payload with Postgres, install the package `@payloadcms/db-postgres`. It leverages Drizzle ORM and `node-postgres` to interact with a Postgres database that you provide.

View File

@@ -2,7 +2,7 @@
title: Transactions title: Transactions
label: Transactions label: Transactions
order: 30 order: 30
keywords: database, transactions, sql, mongodb, postgres, documentation, Content Management System, cms, headless, typescript, node, react, express keywords: database, transactions, sql, mongodb, postgres, documentation, Content Management System, cms, headless, typescript, node, react, nextjs
desc: Database transactions are fully supported within Payload. desc: Database transactions are fully supported within Payload.
--- ---

View File

@@ -3,7 +3,7 @@ title: Email Functionality
label: Overview label: Overview
order: 10 order: 10
desc: Payload uses an adapter pattern to enable email functionality. Set up email functions such as password resets, order confirmations and more. desc: Payload uses an adapter pattern to enable email functionality. Set up email functions such as password resets, order confirmations and more.
keywords: email, overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: email, overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
## Introduction ## Introduction

View File

@@ -3,7 +3,7 @@ title: Array Field
label: Array label: Array
order: 20 order: 20
desc: Array fields are intended for sets of repeating fields, that you define. Learn how to use array fields, see examples and options. desc: Array fields are intended for sets of repeating fields, that you define. Learn how to use array fields, see examples and options.
keywords: array, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: array, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Blocks Field
label: Blocks label: Blocks
order: 30 order: 30
desc: The Blocks field type is a great layout build and can be used to construct any flexible content model. Learn how to use Block fields, see examples and options. desc: The Blocks field type is a great layout build and can be used to construct any flexible content model. Learn how to use Block fields, see examples and options.
keywords: blocks, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: blocks, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Checkbox Field
label: Checkbox label: Checkbox
order: 40 order: 40
desc: Checkbox field types allow the developer to save a boolean value in the database. Learn how to use Checkbox fields, see examples and options. desc: Checkbox field types allow the developer to save a boolean value in the database. Learn how to use Checkbox fields, see examples and options.
keywords: checkbox, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: checkbox, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner>The Checkbox field type saves a boolean in the database.</Banner> <Banner>The Checkbox field type saves a boolean in the database.</Banner>

View File

@@ -4,7 +4,7 @@ label: Code
order: 50 order: 50
desc: The Code field type will store any string in the Database. Learn how to use Code fields, see examples and options. desc: The Code field type will store any string in the Database. Learn how to use Code fields, see examples and options.
keywords: code, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: code, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Collapsible Field
label: Collapsible label: Collapsible
order: 60 order: 60
desc: With the Collapsible field, you can place fields within a collapsible layout component that can be collapsed / expanded. desc: With the Collapsible field, you can place fields within a collapsible layout component that can be collapsed / expanded.
keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Date Field
label: Date label: Date
order: 70 order: 70
desc: The Date field type stores a Date in the database. Learn how to use and customize the Date field, see examples and options. desc: The Date field type stores a Date in the database. Learn how to use and customize the Date field, see examples and options.
keywords: date, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: date, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Email Field
label: Email label: Email
order: 80 order: 80
desc: The Email field enforces that the value provided is a valid email address. Learn how to use Email fields, see examples and options. desc: The Email field enforces that the value provided is a valid email address. Learn how to use Email fields, see examples and options.
keywords: email, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: email, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner>The Email field enforces that the value provided is a valid email address.</Banner> <Banner>The Email field enforces that the value provided is a valid email address.</Banner>

View File

@@ -3,7 +3,7 @@ title: Group Field
label: Group label: Group
order: 90 order: 90
desc: The Group field allows other fields to be nested under a common property. Learn how to use Group fields, see examples and options. desc: The Group field allows other fields to be nested under a common property. Learn how to use Group fields, see examples and options.
keywords: group, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: group, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -4,7 +4,7 @@ label: JSON
order: 50 order: 50
desc: The JSON field type will store any string in the Database. Learn how to use JSON fields, see examples and options. desc: The JSON field type will store any string in the Database. Learn how to use JSON fields, see examples and options.
keywords: json, jsonSchema, schema, validation, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: json, jsonSchema, schema, validation, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Number Field
label: Number label: Number
order: 100 order: 100
desc: Number fields store and validate numeric data. Learn how to use and format Number fields, see examples and Number field options. desc: Number fields store and validate numeric data. Learn how to use and format Number fields, see examples and Number field options.
keywords: number, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: number, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Fields Overview
label: Overview label: Overview
order: 10 order: 10
desc: Fields are the building blocks of Payload, find out how to add or remove a field, change field type, add hooks, define access control and validation. desc: Fields are the building blocks of Payload, find out how to add or remove a field, change field type, add hooks, define access control and validation.
keywords: overview, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: overview, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner type="info"> <Banner type="info">

View File

@@ -4,7 +4,7 @@ label: Point
order: 110 order: 110
desc: The Point field type stores coordinates in the database. Learn how to use Point field for geolocation and geometry. desc: The Point field type stores coordinates in the database. Learn how to use Point field for geolocation and geometry.
keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: point, geolocation, geospatial, geojson, 2dsphere, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Radio Group Field
label: Radio Group label: Radio Group
order: 120 order: 120
desc: The Radio field type allows for the selection of one value from a predefined set of possible values. Learn how to use Radio fields, see examples and options. desc: The Radio field type allows for the selection of one value from a predefined set of possible values. Learn how to use Radio fields, see examples and options.
keywords: radio, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: radio, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Relationship Field
label: Relationship label: Relationship
order: 130 order: 130
desc: The Relationship field provides the ability to relate documents together. Learn how to use Relationship fields, see examples and options. 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 keywords: relationship, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Rich Text Field
label: Rich Text label: Rich Text
order: 140 order: 140
desc: The Rich Text field allows dynamic content to be written through the Admin Panel. Learn how to use Rich Text fields, see examples and options. desc: The Rich Text field allows dynamic content to be written through the Admin Panel. Learn how to use Rich Text fields, see examples and options.
keywords: rich text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: rich text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Row Field
label: Row label: Row
order: 150 order: 150
desc: With the Row field you can arrange fields next to each other in the Admin Panel to help you customize your Dashboard. desc: With the Row field you can arrange fields next to each other in the Admin Panel to help you customize your Dashboard.
keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Select Field
label: Select label: Select
order: 160 order: 160
desc: The Select field provides a dropdown-style interface for choosing options from a predefined list. Learn how to use Select fields, see examples and options. desc: The Select field provides a dropdown-style interface for choosing options from a predefined list. Learn how to use Select fields, see examples and options.
keywords: select, multi-select, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: select, multi-select, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Tabs Field
label: Tabs label: Tabs
order: 170 order: 170
desc: The Tabs field is a great way to organize complex editing experiences into specific tab-based areas. desc: The Tabs field is a great way to organize complex editing experiences into specific tab-based areas.
keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Text Field
label: Text label: Text
order: 180 order: 180
desc: Text field types simply save a string to the database and provide the Admin panel with a text input. Learn how to use Text fields, see examples and options. desc: Text field types simply save a string to the database and provide the Admin panel with a text input. Learn how to use Text fields, see examples and options.
keywords: text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: text, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Textarea Field
label: Textarea label: Textarea
order: 190 order: 190
desc: Textarea field types save a string to the database, similar to the Text field type but equipped for longer text. Learn how to use Textarea fields, see examples and options. desc: Textarea field types save a string to the database, similar to the Text field type but equipped for longer text. Learn how to use Textarea fields, see examples and options.
keywords: textarea, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: textarea, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: UI Field
label: UI label: UI
order: 200 order: 200
desc: UI fields are purely presentational and allow developers to customize the admin panel to a very fine degree, including adding actions and other functions. desc: UI fields are purely presentational and allow developers to customize the admin panel to a very fine degree, including adding actions and other functions.
keywords: custom field, react component, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: custom field, react component, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Upload Field
label: Upload label: Upload
order: 210 order: 210
desc: Upload fields will allow a file to be uploaded, only from a collection supporting Uploads. Learn how to use Upload fields, see examples and options. desc: Upload fields will allow a file to be uploaded, only from a collection supporting Uploads. Learn how to use Upload fields, see examples and options.
keywords: upload, images media, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: upload, images media, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>

View File

@@ -3,7 +3,7 @@ title: Payload Concepts
label: Concepts label: Concepts
order: 20 order: 20
desc: Payload is based around a small and intuitive set of concepts. Key concepts include collections, globals, fields and more. desc: Payload is based around a small and intuitive set of concepts. Key concepts include collections, globals, fields and more.
keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, express keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload is based around a small and intuitive set of concepts. Before starting to work with Payload, it's a good idea to familiarize yourself with the following: Payload is based around a small and intuitive set of concepts. Before starting to work with Payload, it's a good idea to familiarize yourself with the following:

View File

@@ -3,7 +3,7 @@ title: Installation
label: Installation label: Installation
order: 30 order: 30
desc: To quickly get started with Payload, simply run npx create-payload-app or install from scratch. desc: To quickly get started with Payload, simply run npx create-payload-app or install from scratch.
keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, express keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
## Software Requirements ## Software Requirements
@@ -30,7 +30,7 @@ Then just follow the prompts! You'll get set up with a new folder and a function
## Adding to an existing app ## Adding to an existing app
Adding Payload to either a new or existing TypeScript + Express app is super straightforward. To add to an existing app, just run `npm install --save --legacy-peer-deps payload`. Adding Payload to either a new or existing TypeScript + Next.js app is super straightforward. To add to an existing app, just run `npm install --save --legacy-peer-deps payload`.
From there, the first step is writing a baseline config. Create a new `payload.config.ts` in your project's `/src` directory (or whatever your root TS dir is). The simplest config contains the following: From there, the first step is writing a baseline config. Create a new `payload.config.ts` in your project's `/src` directory (or whatever your root TS dir is). The simplest config contains the following:

View File

@@ -3,7 +3,7 @@ title: What is Payload?
label: What is Payload? label: What is Payload?
order: 10 order: 10
desc: Payload is a next-gen headless Content Management System (CMS) and application framework. desc: Payload is a next-gen headless Content Management System (CMS) and application framework.
keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, express keywords: documentation, getting started, guide, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<YouTube <YouTube

View File

@@ -3,7 +3,7 @@ title: Adding your own Queries and Mutations
label: Custom Queries and Mutations label: Custom Queries and Mutations
order: 20 order: 20
desc: Payload allows you to add your own GraphQL queries and mutations, simply set up GraphQL in your main Payload config by following these instructions. desc: Payload allows you to add your own GraphQL queries and mutations, simply set up GraphQL in your main Payload config by following these instructions.
keywords: graphql, resolvers, mutations, custom, queries, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: graphql, resolvers, mutations, custom, queries, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
You can add your own GraphQL queries and mutations to Payload, making use of all the types that Payload has defined for you. You can add your own GraphQL queries and mutations to Payload, making use of all the types that Payload has defined for you.

View File

@@ -3,7 +3,7 @@ title: GraphQL Schema
label: GraphQL Schema label: GraphQL Schema
order: 30 order: 30
desc: Output your own GraphQL schema based on your collections and globals to a file. desc: Output your own GraphQL schema based on your collections and globals to a file.
keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
When working with GraphQL it is useful to have the schema for development of other projects that need to call on your GraphQL endpoint. In Payload the schema is controlled by your collections and globals and is made available to the developer or third parties, it is not necessary for developers using Payload to write schema types manually. When working with GraphQL it is useful to have the schema for development of other projects that need to call on your GraphQL endpoint. In Payload the schema is controlled by your collections and globals and is made available to the developer or third parties, it is not necessary for developers using Payload to write schema types manually.

View File

@@ -3,7 +3,7 @@ title: GraphQL Overview
label: Overview label: Overview
order: 10 order: 10
desc: Payload ships with a fully featured and extensible GraphQL API, which can be used in addition to the REST and Local APIs to give you more flexibility. desc: Payload ships with a fully featured and extensible GraphQL API, which can be used in addition to the REST and Local APIs to give you more flexibility.
keywords: graphql, resolvers, mutations, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: graphql, resolvers, mutations, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
In addition to its REST and Local APIs, Payload ships with a fully featured and extensible GraphQL API. In addition to its REST and Local APIs, Payload ships with a fully featured and extensible GraphQL API.

View File

@@ -3,7 +3,7 @@ title: Collection Hooks
label: Collections label: Collections
order: 20 order: 20
desc: You can add hooks to any Collection, several hook types are available including beforeChange, afterRead, afterDelete and more. desc: You can add hooks to any Collection, several hook types are available including beforeChange, afterRead, afterDelete and more.
keywords: hooks, collections, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: hooks, collections, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Collections feature the ability to define the following hooks: Collections feature the ability to define the following hooks:
@@ -75,7 +75,7 @@ import { CollectionBeforeOperationHook } from 'payload/types'
const beforeOperationHook: CollectionBeforeOperationHook = async ({ const beforeOperationHook: CollectionBeforeOperationHook = async ({
args, // original arguments passed into the operation args, // original arguments passed into the operation
operation, // name of the operation operation, // name of the operation
req, // full express request req, // full Request object
}) => { }) => {
return args // return modified operation arguments as necessary return args // return modified operation arguments as necessary
} }
@@ -96,7 +96,7 @@ import { CollectionBeforeValidateHook } from 'payload/types'
const beforeValidateHook: CollectionBeforeValidateHook = async ({ const beforeValidateHook: CollectionBeforeValidateHook = async ({
data, // incoming data to update or create with data, // incoming data to update or create with
req, // full express request req, // full Request object
operation, // name of the operation ie. 'create', 'update' operation, // name of the operation ie. 'create', 'update'
originalDoc, // original document originalDoc, // original document
}) => { }) => {
@@ -113,7 +113,7 @@ import { CollectionBeforeChangeHook } from 'payload/types'
const beforeChangeHook: CollectionBeforeChangeHook = async ({ const beforeChangeHook: CollectionBeforeChangeHook = async ({
data, // incoming data to update or create with data, // incoming data to update or create with
req, // full express request req, // full Request object
operation, // name of the operation ie. 'create', 'update' operation, // name of the operation ie. 'create', 'update'
originalDoc, // original document originalDoc, // original document
}) => { }) => {
@@ -130,7 +130,7 @@ import { CollectionAfterChangeHook } from 'payload/types'
const afterChangeHook: CollectionAfterChangeHook = async ({ const afterChangeHook: CollectionAfterChangeHook = async ({
doc, // full document data doc, // full document data
req, // full express request req, // full Request object
previousDoc, // document data before updating the collection previousDoc, // document data before updating the collection
operation, // name of the operation ie. 'create', 'update' operation, // name of the operation ie. 'create', 'update'
}) => { }) => {
@@ -147,7 +147,7 @@ import { CollectionBeforeReadHook } from 'payload/types'
const beforeReadHook: CollectionBeforeReadHook = async ({ const beforeReadHook: CollectionBeforeReadHook = async ({
doc, // full document data doc, // full document data
req, // full express request req, // full Request object
query, // JSON formatted query query, // JSON formatted query
}) => { }) => {
return doc return doc
@@ -163,7 +163,7 @@ import { CollectionAfterReadHook } from 'payload/types'
const afterReadHook: CollectionAfterReadHook = async ({ const afterReadHook: CollectionAfterReadHook = async ({
doc, // full document data doc, // full document data
req, // full express request req, // full Request object
query, // JSON formatted query query, // JSON formatted query
findMany, // boolean to denote if this hook is running against finding one, or finding many findMany, // boolean to denote if this hook is running against finding one, or finding many
}) => { }) => {
@@ -179,7 +179,7 @@ Runs before the `delete` operation. Returned values are discarded.
import { CollectionBeforeDeleteHook } from 'payload/types'; import { CollectionBeforeDeleteHook } from 'payload/types';
const beforeDeleteHook: CollectionBeforeDeleteHook = async ({ const beforeDeleteHook: CollectionBeforeDeleteHook = async ({
req, // full express request req, // full Request object
id, // id of document to delete id, // id of document to delete
}) => {...} }) => {...}
``` ```
@@ -192,7 +192,7 @@ Runs immediately after the `delete` operation removes records from the database.
import { CollectionAfterDeleteHook } from 'payload/types'; import { CollectionAfterDeleteHook } from 'payload/types';
const afterDeleteHook: CollectionAfterDeleteHook = async ({ const afterDeleteHook: CollectionAfterDeleteHook = async ({
req, // full express request req, // full Request object
id, // id of document to delete id, // id of document to delete
doc, // deleted document doc, // deleted document
}) => {...} }) => {...}
@@ -210,7 +210,7 @@ import { CollectionAfterOperationHook } from 'payload/types'
const afterOperationHook: CollectionAfterOperationHook = async ({ const afterOperationHook: CollectionAfterOperationHook = async ({
args, // arguments passed into the operation args, // arguments passed into the operation
operation, // name of the operation operation, // name of the operation
req, // full express request req, // full Request object
result, // the result of the operation, before modifications result, // the result of the operation, before modifications
}) => { }) => {
return result // return modified result as necessary return result // return modified result as necessary
@@ -225,7 +225,7 @@ For auth-enabled Collections, this hook runs during `login` operations where a u
import { CollectionBeforeLoginHook } from 'payload/types' import { CollectionBeforeLoginHook } from 'payload/types'
const beforeLoginHook: CollectionBeforeLoginHook = async ({ const beforeLoginHook: CollectionBeforeLoginHook = async ({
req, // full express request req, // full Request object
user, // user being logged in user, // user being logged in
}) => { }) => {
return user return user
@@ -240,7 +240,7 @@ For auth-enabled Collections, this hook runs after successful `login` operations
import { CollectionAfterLoginHook } from 'payload/types'; import { CollectionAfterLoginHook } from 'payload/types';
const afterLoginHook: CollectionAfterLoginHook = async ({ const afterLoginHook: CollectionAfterLoginHook = async ({
req, // full express request req, // full Request object
user, // user that was logged in user, // user that was logged in
token, // user token token, // user token
}) => {...} }) => {...}
@@ -254,7 +254,7 @@ For auth-enabled Collections, this hook runs after `logout` operations.
import { CollectionAfterLogoutHook } from 'payload/types'; import { CollectionAfterLogoutHook } from 'payload/types';
const afterLogoutHook: CollectionAfterLogoutHook = async ({ const afterLogoutHook: CollectionAfterLogoutHook = async ({
req, // full express request req, // full Request object
}) => {...} }) => {...}
``` ```
@@ -266,8 +266,8 @@ For auth-enabled Collections, this hook runs after `refresh` operations.
import { CollectionAfterRefreshHook } from 'payload/types'; import { CollectionAfterRefreshHook } from 'payload/types';
const afterRefreshHook: CollectionAfterRefreshHook = async ({ const afterRefreshHook: CollectionAfterRefreshHook = async ({
req, // full express request req, // full Request object
res, // full express response res, // full Response object
token, // newly refreshed user token token, // newly refreshed user token
}) => {...} }) => {...}
``` ```
@@ -280,7 +280,7 @@ For auth-enabled Collections, this hook runs after `me` operations.
import { CollectionAfterMeHook } from 'payload/types'; import { CollectionAfterMeHook } from 'payload/types';
const afterMeHook: CollectionAfterMeHook = async ({ const afterMeHook: CollectionAfterMeHook = async ({
req, // full express request req, // full Request object
response, // response to return response, // response to return
}) => {...} }) => {...}
``` ```

View File

@@ -3,7 +3,7 @@ title: Field Hooks
label: Fields label: Fields
order: 30 order: 30
desc: Hooks can be added to any fields, and optionally modify the return value of the field before the operation continues. desc: Hooks can be added to any fields, and optionally modify the return value of the field before the operation continues.
keywords: hooks, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: hooks, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Field-level hooks offer incredible potential for encapsulating your logic. They help to isolate concerns and package up Field-level hooks offer incredible potential for encapsulating your logic. They help to isolate concerns and package up
@@ -74,7 +74,7 @@ Field Hooks receive one `args` argument that contains the following properties:
| **`originalDoc`** | The full original document in `update` operations. In the `afterChange` hook, this is the resulting document of the operation. | | **`originalDoc`** | The full original document in `update` operations. In the `afterChange` hook, this is the resulting document of the operation. |
| **`previousDoc`** | The document before changes were applied, only in `afterChange` hooks. | | **`previousDoc`** | The document before changes were applied, only in `afterChange` hooks. |
| **`previousSiblingDoc`** | The sibling data of the document before changes being applied, only in `beforeChange` and `afterChange` hook. | | **`previousSiblingDoc`** | The sibling data of the document before changes being applied, only in `beforeChange` and `afterChange` hook. |
| **`req`** | The Express `request` object. It is mocked for Local API operations. | | **`req`** | The [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object. It is mocked for Local API operations. |
| **`value`** | The value of the field. | | **`value`** | The value of the field. |
| **`previousValue`** | The previous value of the field, before changes, only in `beforeChange` and `afterChange` hooks. | | **`previousValue`** | The previous value of the field, before changes, only in `beforeChange` and `afterChange` hooks. |
| **`context`** | Context passed to this hook. More info can be found under [Context](/docs/hooks/context) | | **`context`** | Context passed to this hook. More info can be found under [Context](/docs/hooks/context) |

View File

@@ -3,7 +3,7 @@ title: Global Hooks
label: Globals label: Globals
order: 40 order: 40
desc: Hooks can be added to any Global and allow you to validate data, flatten locales, hide protected fields, remove fields and more. desc: Hooks can be added to any Global and allow you to validate data, flatten locales, hide protected fields, remove fields and more.
keywords: hooks, globals, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: hooks, globals, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Globals feature the ability to define the following hooks: Globals feature the ability to define the following hooks:
@@ -47,7 +47,7 @@ import { GlobalBeforeValidateHook } from 'payload/types'
const beforeValidateHook: GlobalBeforeValidateHook = async ({ const beforeValidateHook: GlobalBeforeValidateHook = async ({
data, // incoming data to update or create with data, // incoming data to update or create with
req, // full express request req, // full Request object
originalDoc, // original document originalDoc, // original document
}) => { }) => {
return data // Return data to update the document with return data // Return data to update the document with
@@ -63,7 +63,7 @@ import { GlobalBeforeChangeHook } from 'payload/types'
const beforeChangeHook: GlobalBeforeChangeHook = async ({ const beforeChangeHook: GlobalBeforeChangeHook = async ({
data, // incoming data to update or create with data, // incoming data to update or create with
req, // full express request req, // full Request object
originalDoc, // original document originalDoc, // original document
}) => { }) => {
return data // Return data to update the document with return data // Return data to update the document with
@@ -80,7 +80,7 @@ import { GlobalAfterChangeHook } from 'payload/types'
const afterChangeHook: GlobalAfterChangeHook = async ({ const afterChangeHook: GlobalAfterChangeHook = async ({
doc, // full document data doc, // full document data
previousDoc, // document data before updating the collection previousDoc, // document data before updating the collection
req, // full express request req, // full Request object
}) => { }) => {
return data return data
} }
@@ -95,7 +95,7 @@ import { GlobalBeforeReadHook } from 'payload/types'
const beforeReadHook: GlobalBeforeReadHook = async ({ const beforeReadHook: GlobalBeforeReadHook = async ({
doc, // full document data doc, // full document data
req, // full express request req, // full Request object
}) => {...} }) => {...}
``` ```
@@ -108,7 +108,7 @@ import { GlobalAfterReadHook } from 'payload/types'
const afterReadHook: GlobalAfterReadHook = async ({ const afterReadHook: GlobalAfterReadHook = async ({
doc, // full document data doc, // full document data
req, // full express request req, // full Request object
findMany, // boolean to denote if this hook is running against finding one, or finding many (useful in versions) findMany, // boolean to denote if this hook is running against finding one, or finding many (useful in versions)
}) => {...} }) => {...}
``` ```

View File

@@ -3,7 +3,7 @@ title: Hooks Overview
label: Overview label: Overview
order: 10 order: 10
desc: Hooks allow you to add your own logic to Payload, including integrating with third-party APIs, adding auto-generated data, or modifing Payload's base functionality. desc: Hooks allow you to add your own logic to Payload, including integrating with third-party APIs, adding auto-generated data, or modifing Payload's base functionality.
keywords: hooks, overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: hooks, overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner type="info"> <Banner type="info">

View File

@@ -3,7 +3,7 @@ title: Vercel Content Link
label: Vercel Content Link label: Vercel Content Link
order: 10 order: 10
desc: Payload + Vercel Content Link allows yours editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it. desc: Payload + Vercel Content Link allows yours editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it.
keywords: vercel, vercel content link, visual editing, content source maps, Content Management System, cms, headless, javascript, node, react, express keywords: vercel, vercel content link, content link, visual editing, content source maps, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
[Vercel Content Link](https://vercel.com/docs/workflow-collaboration/edit-mode#content-link) will allow your editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it. This requires no changes to your front-end code and very few changes to your Payload config. [Vercel Content Link](https://vercel.com/docs/workflow-collaboration/edit-mode#content-link) will allow your editors to navigate directly from the content rendered on your front-end to the fields in Payload that control it. This requires no changes to your front-end code and very few changes to your Payload config.

View File

@@ -3,7 +3,7 @@ title: Local API
label: Overview label: Overview
order: 10 order: 10
desc: The Payload Local API allows you to interact with your database and execute the same operations that are available through REST and GraphQL within Node, directly on your server. desc: The Payload Local API allows you to interact with your database and execute the same operations that are available through REST and GraphQL within Node, directly on your server.
keywords: local api, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: local api, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
The Payload Local API gives you the ability to execute the same operations that are available through REST and GraphQL The Payload Local API gives you the ability to execute the same operations that are available through REST and GraphQL
@@ -23,7 +23,7 @@ can interact directly with your database.
Here are some common examples of how you can use the Local API: Here are some common examples of how you can use the Local API:
- Seeding data via Node seed scripts that you write and maintain - Seeding data via Node seed scripts that you write and maintain
- Opening custom Express routes which feature additional functionality but still rely on Payload - Opening custom routes which feature additional functionality but still rely on Payload
- Within access control and hook functions - Within access control and hook functions
## Accessing payload ## Accessing payload
@@ -51,7 +51,7 @@ const afterChangeHook: CollectionAfterChangeHook = async () => {
#### Accessing from the `req` #### Accessing from the `req`
Payload is available anywhere you have access to the Express `req` - including within your access control and hook Payload is available anywhere you have access to the `req` - including within your access control and hook
functions. functions.
Example: Example:
@@ -310,7 +310,7 @@ const result = await payload.login({
email: 'dev@payloadcms.com', email: 'dev@payloadcms.com',
password: 'rip', password: 'rip',
}, },
req: req, // pass an Express `req` which will be provided to all hooks req: req, // pass a Request object to be provided to all hooks
res: res, // used to automatically set an HTTP-only auth cookie res: res, // used to automatically set an HTTP-only auth cookie
depth: 2, depth: 2,
locale: 'en', locale: 'en',
@@ -330,7 +330,7 @@ const token = await payload.forgotPassword({
// required // required
email: 'dev@payloadcms.com', email: 'dev@payloadcms.com',
}, },
req: req, // pass an Express `req` which will be provided to all hooks req: req, // pass a Request object to be provided to all hooks
}) })
``` ```
@@ -349,7 +349,7 @@ const result = await payload.resetPassword({
password: req.body.password, // the new password to set password: req.body.password, // the new password to set
token: 'afh3o2jf2p3f...', // the token generated from the forgotPassword operation token: 'afh3o2jf2p3f...', // the token generated from the forgotPassword operation
}, },
req: req, // pass an Express `req` which will be provided to all hooks req: req, // pass a Request object to be provided to all hooks
res: res, // used to automatically set an HTTP-only auth cookie res: res, // used to automatically set an HTTP-only auth cookie
}) })
``` ```
@@ -364,7 +364,7 @@ const result = await payload.unlock({
// required // required
email: 'dev@payloadcms.com', email: 'dev@payloadcms.com',
}, },
req: req, // pass an Express `req` which will be provided to all hooks req: req, // pass a Request object to be provided to all hooks
overrideAccess: true, overrideAccess: true,
}) })
``` ```
@@ -427,10 +427,10 @@ const result = await payload.updateGlobal({
## Next.js Conflict with Local API ## Next.js Conflict with Local API
There is a known issue when using the Local API with Next.js version `13.4.13` and higher. Next.js executes within a There is a known issue when using the Local API with Next.js version `13.4.13` and higher. Next.js executes within a
separate child process, and Payload has not been initalized yet in these instances. That means that unless you separate child process, and Payload has not been initialized yet in these instances. That means that unless you
explicitly initialize Payload within your operation, it will not be running and return no data / an empty object. explicitly initialize Payload within your operation, it will not be running and return no data / an empty object.
As a workaround, we recommend leveraging the following pattern to determine and ensure Payload is initalized: As a workaround, we recommend leveraging the following pattern to determine and ensure Payload is initialized:
``` ```
import dotenv from 'dotenv' import dotenv from 'dotenv'

View File

@@ -3,7 +3,7 @@ title: Building Your Own Plugin
label: Build Your Own label: Build Your Own
order: 50 order: 50
desc: Starting to build your own plugin? Find everything you need and learn best practices with the Payload plugin template. desc: Starting to build your own plugin? Find everything you need and learn best practices with the Payload plugin template.
keywords: plugins, template, config, configuration, extensions, custom, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: plugins, template, config, configuration, extensions, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Building your own plugin is easy, and if you&apos;re already familiar with Payload then you&apos;ll have everything you need to get started. You can either start from scratch or use the Payload plugin template to get up and running quickly. Building your own plugin is easy, and if you&apos;re already familiar with Payload then you&apos;ll have everything you need to get started. You can either start from scratch or use the Payload plugin template to get up and running quickly.

View File

@@ -3,7 +3,7 @@ title: Plugins
label: Overview label: Overview
order: 10 order: 10
desc: Plugins provide a great way to modularize Payload functionalities into easy-to-use enhancements and extensions of your Payload apps. desc: Plugins provide a great way to modularize Payload functionalities into easy-to-use enhancements and extensions of your Payload apps.
keywords: plugins, config, configuration, extensions, custom, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: plugins, config, configuration, extensions, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload comes with a built-in Plugins infrastructure that allows developers to build their own modular and easily reusable sets of functionality. Payload comes with a built-in Plugins infrastructure that allows developers to build their own modular and easily reusable sets of functionality.

View File

@@ -3,7 +3,7 @@ title: Production Deployment
label: Deployment label: Deployment
order: 10 order: 10
desc: When your Payload based app is ready, tested, looking great, it is time to deploy. Learn how to deploy your app and what to consider before deployment. desc: When your Payload based app is ready, tested, looking great, it is time to deploy. Learn how to deploy your app and what to consider before deployment.
keywords: deployment, production, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: deployment, production, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner type="success"> <Banner type="success">
@@ -48,10 +48,14 @@ wield that power responsibly before deploying to Production.
By default, all Access Control functions require that a user is successfully logged in to By default, all Access Control functions require that a user is successfully logged in to
Payload to create, read, update, or delete data. Payload to create, read, update, or delete data.
</strong> </strong>
But, if you allow public user registration, for example, you will want to make sure that your But, if you allow public user registration, for example, you will want to make sure that your
access control functions are more strict - permitting <strong>only appropriate users</strong> to access control functions are more strict - permitting
perform appropriate actions. {' '}
<strong>
only appropriate users
</strong>
{' '}
to perform appropriate actions.
</Banner> </Banner>
### Building the Admin panel ### Building the Admin panel
@@ -181,7 +185,7 @@ _copy_ the files your users upload to a more permanent storage solution like Ama
**To automatically send uploaded files to S3 or similar, you could:** **To automatically send uploaded files to S3 or similar, you could:**
- Write an asynchronous `beforeChange` hook for all Collections that support Uploads, which takes any uploaded `file` - Write an asynchronous `beforeChange` hook for all Collections that support Uploads, which takes any uploaded `file`
from the Express `req` and sends it to an S3 bucket from the `req` and sends it to an S3 bucket
- Write an `afterRead` hook to save a `s3URL` field that automatically takes the `filename` stored and formats a full S3 - Write an `afterRead` hook to save a `s3URL` field that automatically takes the `filename` stored and formats a full S3
URL URL
- Write an `afterDelete` hook that automatically deletes files from the S3 bucket - Write an `afterDelete` hook that automatically deletes files from the S3 bucket

View File

@@ -3,7 +3,7 @@ title: Preventing Production API Abuse
label: Preventing Abuse label: Preventing Abuse
order: 20 order: 20
desc: Payload has built-in security that can be configured to combat production API abuse such as limiting login attempts and IP requests. desc: Payload has built-in security that can be configured to combat production API abuse such as limiting login attempts and IP requests.
keywords: abuse, production, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: abuse, production, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
## Introduction ## Introduction
@@ -22,7 +22,7 @@ To prevent DDoS, brute-force, and similar attacks, you can set IP-based rate lim
| ---------------- | ----------------------------------------------------------------------------------------------------------------------- | | ---------------- | ----------------------------------------------------------------------------------------------------------------------- |
| **`window`** | Time in milliseconds to track requests per IP. Defaults to `90000` (15 minutes). | | **`window`** | Time in milliseconds to track requests per IP. Defaults to `90000` (15 minutes). |
| **`max`** | Number of requests served from a single IP before limiting. Defaults to `500`. | | **`max`** | Number of requests served from a single IP before limiting. Defaults to `500`. |
| **`skip`** | Express middleware function that can return true (or promise resulting in true) that will bypass limit. | | **`skip`** | Function that can return true (or promise resulting in true) that will bypass limit. |
| **`trustProxy`** | True or false, to enable to allow requests to pass through a proxy such as a load balancer or an `nginx` reverse proxy. | | **`trustProxy`** | True or false, to enable to allow requests to pass through a proxy such as a load balancer or an `nginx` reverse proxy. |
<Banner type="warning"> <Banner type="warning">
@@ -53,7 +53,7 @@ Because GraphQL gives the power of query writing outside a server's control, som
Any GraphQL request that is calculated to be too expensive is rejected. On the Payload config, in `graphQL` you can set the `maxComplexity` value as an integer. For reference, the default complexity value for each added field is 1, and all `relationship` and `upload` fields are assigned a value of 10. Any GraphQL request that is calculated to be too expensive is rejected. On the Payload config, in `graphQL` you can set the `maxComplexity` value as an integer. For reference, the default complexity value for each added field is 1, and all `relationship` and `upload` fields are assigned a value of 10.
If you do not need GraphQL it is advised that you disable it altogether with the Payload config by setting `graphQL.disable: true`. Should you wish to enable GraphQL again, you can remove this property or set it `false`, any time. By turning it off, Payload will bypass creating schemas from your collections and will not register the express route. If you do not need GraphQL it is advised that you disable it altogether with the Payload config by setting `graphQL.disable: true`. Should you wish to enable GraphQL again, you can remove this property or set it `false`, any time. By turning it off, Payload will bypass creating schemas from your collections and will not register the route.
## Malicious File Uploads ## Malicious File Uploads

View File

@@ -3,7 +3,7 @@ title: Querying your Documents
label: Overview label: Overview
order: 10 order: 10
desc: Payload provides a querying language through all APIs, allowing you to filter or search through documents within a Collection. desc: Payload provides a querying language through all APIs, allowing you to filter or search through documents within a Collection.
keywords: query, documents, overview, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: query, documents, overview, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload provides an extremely granular querying language through all APIs. Each API takes the same syntax and fully supports all options. Payload provides an extremely granular querying language through all APIs. Each API takes the same syntax and fully supports all options.
@@ -12,9 +12,8 @@ Payload provides an extremely granular querying language through all APIs. Each
<strong> <strong>
Here, "querying" relates to filtering or searching through documents within a Collection. Here, "querying" relates to filtering or searching through documents within a Collection.
</strong> </strong>
You can build queries to pass to Find operations as well as to [restrict which documents certain You can build queries to pass to Find operations as well as to [restrict which documents certain
users can access](/docs/access-control/overview) via access control functions. users can [access](/docs/access-control/overview) via access control functions.
</Banner> </Banner>
## Simple queries ## Simple queries
@@ -146,7 +145,7 @@ query {
With the REST API, you can use the full power of Payload queries as well but they become a bit more unwieldy the more complex that they get. With the REST API, you can use the full power of Payload queries as well but they become a bit more unwieldy the more complex that they get.
Simple queries are fairly straightforward to write. To understand the syntax, you need to understand how Express and similar languages would go about parsing a complex URL search string into a JSON object. For example, the above [simple query](#simple-queries) would be parsed into a string like this: Simple queries are fairly straightforward to write. To understand the syntax, you need to understand that complex URL search strings are parsed into a JSON object. For example, the above [simple query](#simple-queries) would be parsed into a string like this:
**`https://localhost:3000/api/posts?where[color][equals]=mint`** **`https://localhost:3000/api/posts?where[color][equals]=mint`**

View File

@@ -3,7 +3,7 @@ title: Pagination
label: Pagination label: Pagination
order: 20 order: 20
desc: Payload queries are equipped with automatic pagination so you create paginated lists of documents within your app. desc: Payload queries are equipped with automatic pagination so you create paginated lists of documents within your app.
keywords: query, documents, pagination, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: query, documents, pagination, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
All collection `find` queries are paginated automatically. Responses are returned with top-level meta data related to pagination, and returned documents are nested within a `docs` array. All collection `find` queries are paginated automatically. Responses are returned with top-level meta data related to pagination, and returned documents are nested within a `docs` array.

View File

@@ -3,7 +3,7 @@ title: REST API
label: Overview label: Overview
order: 10 order: 10
desc: Payload generates a fully functional REST API from your Collection and Global configs. desc: Payload generates a fully functional REST API from your Collection and Global configs.
keywords: rest, api, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: rest, api, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>
@@ -578,8 +578,8 @@ Each endpoint object needs to have:
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`path`** | A string for the endpoint route after the collection or globals slug | | **`path`** | A string for the endpoint route after the collection or globals slug |
| **`method`** | The lowercase HTTP verb to use: 'get', 'head', 'post', 'put', 'delete', 'connect' or 'options' | | **`method`** | The lowercase HTTP verb to use: 'get', 'head', 'post', 'put', 'delete', 'connect' or 'options' |
| **`handler`** | A function or array of functions to be called with **req**, **res** and **next** arguments. [Express](https://expressjs.com/en/guide/routing.html#route-handlers) | | **`handler`** | A function or array of functions to be called with **req**, **res** and **next** arguments. [Next.js](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) |
| **`root`** | When `true`, defines the endpoint on the root Express app, bypassing Payload handlers and the `routes.api` subpath. Note: this only applies to top-level endpoints of your Payload config, endpoints defined on `collections` or `globals` cannot be root. | | **`root`** | When `true`, defines the endpoint on the root Next.js app, bypassing Payload handlers and the `routes.api` subpath. Note: this only applies to top-level endpoints of your Payload config, endpoints defined on `collections` or `globals` cannot be root. |
| **`custom`** | Extension point for adding custom data (e.g. for plugins) | | **`custom`** | Extension point for adding custom data (e.g. for plugins) |
Example: Example:

View File

@@ -3,7 +3,7 @@ title: Troubleshooting
label: Troubleshooting label: Troubleshooting
order: 10 order: 10
desc: Troubleshooting Common Issues in Payload desc: Troubleshooting Common Issues in Payload
keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express, troubleshooting keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, nextjs, troubleshooting
--- ---
## Common Issues ## Common Issues

View File

@@ -3,7 +3,7 @@ title: Generating TypeScript Interfaces
label: Generating Types label: Generating Types
order: 20 order: 20
desc: Generate your own TypeScript interfaces based on your collections and globals. desc: Generate your own TypeScript interfaces based on your collections and globals.
keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
While building your own custom functionality into Payload, like plugins, hooks, access control functions, custom views, GraphQL queries / mutations, or anything else, you may benefit from generating your own TypeScript types dynamically from your Payload config itself. While building your own custom functionality into Payload, like plugins, hooks, access control functions, custom views, GraphQL queries / mutations, or anything else, you may benefit from generating your own TypeScript types dynamically from your Payload config itself.

View File

@@ -3,7 +3,7 @@ title: TypeScript - Overview
label: Overview label: Overview
order: 10 order: 10
desc: Payload is the most powerful TypeScript headless CMS available. desc: Payload is the most powerful TypeScript headless CMS available.
keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload supports TypeScript natively, and not only that, the entirety of the CMS is built with TypeScript. To get started developing with Payload and TypeScript, you can use one of Payload's built-in boilerplates in one line via `create-payload-app`: Payload supports TypeScript natively, and not only that, the entirety of the CMS is built with TypeScript. To get started developing with Payload and TypeScript, you can use one of Payload's built-in boilerplates in one line via `create-payload-app`:

View File

@@ -3,7 +3,7 @@ title: Uploads
label: Overview label: Overview
order: 10 order: 10
desc: Payload supports uploads, storage and management of files directly on your server, combined with powerful file access control. desc: Payload supports uploads, storage and management of files directly on your server, combined with powerful file access control.
keywords: uploads, images, media, overview, documentation, Content Management System, cms, headless, javascript, node, react, express keywords: uploads, images, media, overview, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>
@@ -50,7 +50,7 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
| **`externalFileHeaderFilter`** | Accepts existing headers and can filter/modify them. | | **`externalFileHeaderFilter`** | Accepts existing headers and can filter/modify them. |
| **`focalPoint`** | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) | | **`focalPoint`** | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
| **`formatOptions`** | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat) | | **`formatOptions`** | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat) |
| **`handlers`** | Array of Express request handlers to execute before the built-in Payload static middleware executes. | | **`handlers`** | Array of [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) handlers to execute before the built-in Payload static middleware executes. |
| **`imageSizes`** | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes) | | **`imageSizes`** | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes) |
| **`mimeTypes`** | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes) | | | **`mimeTypes`** | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes) | |
| **`resizeOptions`** | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize) | | **`resizeOptions`** | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize) |

View File

@@ -3,7 +3,7 @@ title: Autosave
label: Autosave label: Autosave
order: 30 order: 30
desc: Using Payload's Draft functionality, you can configure your collections and globals to autosave changes as drafts, and publish only you're ready. desc: Using Payload's Draft functionality, you can configure your collections and globals to autosave changes as drafts, and publish only you're ready.
keywords: version history, revisions, audit log, draft, publish, autosave, Content Management System, cms, headless, javascript, node, react, expresss keywords: version history, revisions, audit log, draft, publish, autosave, Content Management System, cms, headless, javascript, node, react, nextjss
--- ---
Extending on Payload's [Draft](/docs/versions/drafts) functionality, you can configure your collections and globals to autosave changes as drafts, and publish only you're ready. The Admin UI will automatically adapt to autosaving progress at an interval that you define, and will store all autosaved changes as a new Draft version. Never lose your work - and publish changes to the live document only when you're ready. Extending on Payload's [Draft](/docs/versions/drafts) functionality, you can configure your collections and globals to autosave changes as drafts, and publish only you're ready. The Admin UI will automatically adapt to autosaving progress at an interval that you define, and will store all autosaved changes as a new Draft version. Never lose your work - and publish changes to the live document only when you're ready.

View File

@@ -3,7 +3,7 @@ title: Drafts
label: Drafts label: Drafts
order: 20 order: 20
desc: Enable drafts on collection documents or globals and build true preview environments for your data. desc: Enable drafts on collection documents or globals and build true preview environments for your data.
keywords: version history, drafts, preview, draft, restore, publish, autosave, Content Management System, cms, headless, javascript, node, react, express keywords: version history, drafts, preview, draft, restore, publish, autosave, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
Payload's Draft functionality builds on top of the Versions functionality to allow you to make changes to your collection documents and globals, but publish only when you're ready. This functionality allows you to build powerful Preview environments for your data, where you can make sure your changes look good before publishing documents. Payload's Draft functionality builds on top of the Versions functionality to allow you to make changes to your collection documents and globals, but publish only when you're ready. This functionality allows you to build powerful Preview environments for your data, where you can make sure your changes look good before publishing documents.

View File

@@ -3,7 +3,7 @@ title: Versions
label: Overview label: Overview
order: 10 order: 10
desc: Keep a version history or audit log of changes and publish collection documents and globals. desc: Keep a version history or audit log of changes and publish collection documents and globals.
keywords: version history, revisions, audit log, draft, publish, restore, autosave, Content Management System, cms, headless, javascript, node, react, express keywords: version history, revisions, audit log, draft, publish, restore, autosave, Content Management System, cms, headless, javascript, node, react, nextjs
--- ---
<Banner> <Banner>