Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Context

The context object is used to share data across different Hooks. This persists throughout the entire lifecycle of a request and is available within every Hook. By setting properties to req.context, you can effectively logic across multiple Hooks.

When To Use Context

Context gives you a way forward on otherwise difficult problems such as:

  1. Passing data between Hooks: Needing data in multiple Hooks from a 3rd party API, it could be retrieved and used in beforeChange and later used again in an afterChange hook without having to fetch it twice.
  2. Preventing infinite loops: Calling payload.update() on the same document that triggered an afterChange hook will create an infinite loop, control the flow by assigning a no-op condition to context
  3. Passing data to local API: Setting values on the req.context and pass it to payload.create() you can provide additional data to hooks without adding extraneous fields.
  4. Passing data between hooks and middleware or custom endpoints: Hooks could set context across multiple collections and then be used in a final postMiddleware.

How To Use Context

Let's see examples on how context can be used in the first two scenarios mentioned above:

Passing Data Between Hooks

To pass data between hooks, you can assign values to context in an earlier hook in the lifecycle of a request and expect it the context in a later hook.

For example:

1
import type { CollectionConfig } from 'payload'
2
3
const Customer: CollectionConfig = {
4
slug: 'customers',
5
hooks: {
6
beforeChange: [
7
async ({ context, data }) => {
8
// assign the customerData to context for use later
9
context.customerData = await fetchCustomerData(data.customerID)
10
return {
11
...data,
12
// some data we use here
13
name: context.customerData.name,
14
}
15
},
16
],
17
afterChange: [
18
async ({ context, doc, req }) => {
19
// use context.customerData without needing to fetch it again
20
if (context.customerData.contacted === false) {
21
createTodo('Call Customer', context.customerData)
22
}
23
},
24
],
25
},
26
fields: [
27
/* ... */
28
],
29
}

Preventing Infinite Loops

Let's say you have an afterChange hook, and you want to do a calculation inside the hook (as the document ID needed for the calculation is available in the afterChange hook, but not in the beforeChange hook). Once that's done, you want to update the document with the result of the calculation.

Bad example:

1
import type { CollectionConfig } from 'payload'
2
3
const Customer: CollectionConfig = {
4
slug: 'customers',
5
hooks: {
6
afterChange: [
7
async ({ doc }) => {
8
await payload.update({
9
// DANGER: updating the same slug as the collection in an afterChange will create an infinite loop!
10
collection: 'customers',
11
id: doc.id,
12
data: {
13
...(await fetchCustomerData(data.customerID)),
14
},
15
})
16
},
17
],
18
},
19
fields: [
20
/* ... */
21
],
22
}

Instead of the above, we need to tell the afterChange hook to not run again if it performs the update (and thus not update itself again). We can solve that with context.

Fixed example:

1
import type { CollectionConfig } from 'payload'
2
3
const MyCollection: CollectionConfig = {
4
slug: 'slug',
5
hooks: {
6
afterChange: [
7
async ({ context, doc }) => {
8
// return if flag was previously set
9
if (context.triggerAfterChange === false) {
10
return
11
}
12
await payload.update({
13
collection: contextHooksSlug,
14
id: doc.id,
15
data: {
16
...(await fetchCustomerData(data.customerID)),
17
},
18
context: {
19
// set a flag to prevent from running again
20
triggerAfterChange: false,
21
},
22
})
23
},
24
],
25
},
26
fields: [
27
/* ... */
28
],
29
}

TypeScript

The default TypeScript interface for context is { [key: string]: unknown }. If you prefer a more strict typing in your project or when authoring plugins for others, you can override this using the declare syntax.

This is known as "type augmentation", a TypeScript feature which allows us to add types to existing types. Simply put this in any .ts or .d.ts file:

1
import { RequestContext as OriginalRequestContext } from 'payload'
2
3
declare module 'payload' {
4
// Create a new interface that merges your additional fields with the original one
5
export interface RequestContext extends OriginalRequestContext {
6
myObject?: string
7
// ...
8
}
9
}

This will add the property myObject with a type of string to every context object. Make sure to follow this example correctly, as type augmentation can mess up your types if you do it wrong.

Next

Local API