tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat!: on demand rsc (#8364)

Browse Source 
Currently, Payload renders all custom components on initial compile of
the admin panel. This is problematic for two key reasons:
1. Custom components do not receive contextual data, i.e. fields do not
receive their field data, edit views do not receive their document data,
etc.
2. Components are unnecessarily rendered before they are used

This was initially required to support React Server Components within
the Payload Admin Panel for two key reasons:
1. Fields can be dynamically rendered within arrays, blocks, etc.
2. Documents can be recursively rendered within a "drawer" UI, i.e.
relationship fields
3. Payload supports server/client component composition 

In order to achieve this, components need to be rendered on the server
and passed as "slots" to the client. Currently, the pattern for this is
to render custom server components in the "client config". Then when a
view or field is needed to be rendered, we first check the client config
for a "pre-rendered" component, otherwise render our client-side
fallback component.

But for the reasons listed above, this pattern doesn't exactly make
custom server components very useful within the Payload Admin Panel,
which is where this PR comes in. Now, instead of pre-rendering all
components on initial compile, we're able to render custom components
_on demand_, only as they are needed.

To achieve this, we've established [this
pattern](https://github.com/payloadcms/payload/pull/8481) of React
Server Functions in the Payload Admin Panel. With Server Functions, we
can iterate the Payload Config and return JSX through React's
`text/x-component` content-type. This means we're able to pass
contextual props to custom components, such as data for fields and
views.

## Breaking Changes

1. Add the following to your root layout file, typically located at
`(app)/(payload)/layout.tsx`:

    ```diff
    /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
    /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
    + import type { ServerFunctionClient } from 'payload'

    import config from '@payload-config'
    import { RootLayout } from '@payloadcms/next/layouts'
    import { handleServerFunctions } from '@payloadcms/next/utilities'
    import React from 'react'

    import { importMap } from './admin/importMap.js'
    import './custom.scss'

    type Args = {
      children: React.ReactNode
    }

+ const serverFunctions: ServerFunctionClient = async function (args) {
    +  'use server'
    +  return handleServerFunctions({
    +    ...args,
    +    config,
    +    importMap,
    +  })
    + }

    const Layout = ({ children }: Args) => (
      <RootLayout
        config={config}
        importMap={importMap}
    +  serverFunctions={serverFunctions}
      >
        {children}
      </RootLayout>
    )

    export default Layout
    ```

2. If you were previously posting to the `/api/form-state` endpoint, it
no longer exists. Instead, you'll need to invoke the `form-state` Server
Function, which can be done through the _new_ `getFormState` utility:

    ```diff
    - import { getFormState } from '@payloadcms/ui'
    - const { state } = await getFormState({
    -   apiRoute: '',
    -   body: {
    -     // ...
    -   },
    -   serverURL: ''
    - })

    + const { getFormState } = useServerFunctions()
    +
    + const { state } = await getFormState({
    +   // ...
    + })
    ```

## Breaking Changes

```diff
- useFieldProps()
- useCellProps()
```

More details coming soon.

---------

Co-authored-by: Alessio Gravili <alessio@gravili.de>
Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>
Co-authored-by: James <james@trbl.design>
This commit is contained in:
Jacob Fletcher
2024-11-11 13:59:05 -05:00
committed by GitHub
parent 3e954f45c7
commit c96fa613bc
657 changed files with 34245 additions and 21057 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
test/collections-graphql/int.spec.ts
View File

@@ -23,17 +23,6 @@ const dirname = path.dirname(filename)
describe('collections-graphql', () => {
beforeAll(async () => {
;({ payload, restClient } = await initPayloadInt(dirname))
// Wait for indexes to be created,
// as we need them to query by point
if (payload.db.name === 'mongoose') {
await new Promise((resolve, reject) => {
payload.db?.collections?.point?.ensureIndexes(function (err) {
if (err) {reject(err)}
resolve(true)
})
})
}
})
afterAll(async () => {
@@ -583,7 +572,9 @@ describe('collections-graphql', () => {
const [lat, lng] = point
it('should return a document near a point', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
const nearQuery = `
query {
Points(
@@ -609,7 +600,9 @@ describe('collections-graphql', () => {
})
it('should not return a point far away', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
const nearQuery = `
query {
Points(
@@ -635,7 +628,9 @@ describe('collections-graphql', () => {
})
it('should sort find results by nearest distance', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
// creating twice as many records as we are querying to get a random sample
await mapAsync([...Array(10)], async () => {
// randomize the creation timestamp
@@ -692,7 +687,9 @@ describe('collections-graphql', () => {
]
it('should return a document with the point inside the polygon', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
const query = `
query {
Points(
@@ -721,7 +718,9 @@ describe('collections-graphql', () => {
})
it('should not return a document with the point outside the polygon', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
const reducedPolygon = polygon.map((vertex) => vertex.map((coord) => coord * 0.1))
const query = `
query {
@@ -761,7 +760,9 @@ describe('collections-graphql', () => {
]
it('should return a document with the point intersecting the polygon', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
const query = `
query {
Points(
@@ -790,7 +791,9 @@ describe('collections-graphql', () => {
})
it('should not return a document with the point not intersecting a smaller polygon', async () => {
if (payload.db.name === 'sqlite') {return}
if (payload.db.name === 'sqlite') {
return
}
const reducedPolygon = polygon.map((vertex) => vertex.map((coord) => coord * 0.1))
const query = `
query {
@@ -1192,7 +1195,7 @@ describe('collections-graphql', () => {
expect(errors[0].path[0]).toEqual('test2')
expect(errors[0].extensions.name).toEqual('ValidationError')
expect(errors[0].extensions.data.errors[0].message).toEqual('This field is required.')
expect(errors[0].extensions.data.errors[0].field).toEqual('password')
expect(errors[0].extensions.data.errors[0].path).toEqual('password')
expect(Array.isArray(errors[1].locations)).toEqual(true)
expect(errors[1].message).toEqual('The following field is invalid: email')
@@ -1201,7 +1204,7 @@ describe('collections-graphql', () => {
expect(errors[1].extensions.data.errors[0].message).toEqual(
'A user with the given email is already registered.',
)
expect(errors[1].extensions.data.errors[0].field).toEqual('email')
expect(errors[1].extensions.data.errors[0].path).toEqual('email')
expect(Array.isArray(errors[2].locations)).toEqual(true)
expect(errors[2].message).toEqual('The following field is invalid: email')
@@ -1210,7 +1213,7 @@ describe('collections-graphql', () => {
expect(errors[2].extensions.data.errors[0].message).toEqual(
'Please enter a valid email address.',
)
expect(errors[2].extensions.data.errors[0].field).toEqual('email')
expect(errors[2].extensions.data.errors[0].path).toEqual('email')
})
it('should return the minimum allowed information about internal errors', async () => {

289
test/collections-graphql/payload-types.ts
View File

@@ -23,17 +23,41 @@ export interface Config {
'content-type': ContentType;
'cyclical-relationship': CyclicalRelationship;
media: Media;
'payload-locked-documents': PayloadLockedDocument;
'payload-preferences': PayloadPreference;
'payload-migrations': PayloadMigration;
};
collectionsJoins: {};
collectionsSelect: {
users: UsersSelect<false> | UsersSelect<true>;
point: PointSelect<false> | PointSelect<true>;
posts: PostsSelect<false> | PostsSelect<true>;
'custom-ids': CustomIdsSelect<false> | CustomIdsSelect<true>;
relation: RelationSelect<false> | RelationSelect<true>;
dummy: DummySelect<false> | DummySelect<true>;
'error-on-hooks': ErrorOnHooksSelect<false> | ErrorOnHooksSelect<true>;
'payload-api-test-ones': PayloadApiTestOnesSelect<false> | PayloadApiTestOnesSelect<true>;
'payload-api-test-twos': PayloadApiTestTwosSelect<false> | PayloadApiTestTwosSelect<true>;
'content-type': ContentTypeSelect<false> | ContentTypeSelect<true>;
'cyclical-relationship': CyclicalRelationshipSelect<false> | CyclicalRelationshipSelect<true>;
media: MediaSelect<false> | MediaSelect<true>;
'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
'payload-migrations': PayloadMigrationsSelect<false> | PayloadMigrationsSelect<true>;
};
db: {
defaultIDType: string;
};
globals: {};
globalsSelect: {};
locale: 'en' | 'es';
user: User & {
collection: 'users';
};
jobs?: {
tasks: unknown;
workflows?: unknown;
};
}
export interface UserAuthOperations {
forgotPassword: {
@@ -244,6 +268,69 @@ export interface Media {
focalX?: number | null;
focalY?: number | null;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-locked-documents".
*/
export interface PayloadLockedDocument {
id: string;
document?:
| ({
relationTo: 'users';
value: string | User;
} | null)
| ({
relationTo: 'point';
value: string | Point;
} | null)
| ({
relationTo: 'posts';
value: string | Post;
} | null)
| ({
relationTo: 'custom-ids';
value: number | CustomId;
} | null)
| ({
relationTo: 'relation';
value: string | Relation;
} | null)
| ({
relationTo: 'dummy';
value: string | Dummy;
} | null)
| ({
relationTo: 'error-on-hooks';
value: string | ErrorOnHook;
} | null)
| ({
relationTo: 'payload-api-test-ones';
value: string | PayloadApiTestOne;
} | null)
| ({
relationTo: 'payload-api-test-twos';
value: string | PayloadApiTestTwo;
} | null)
| ({
relationTo: 'content-type';
value: string | ContentType;
} | null)
| ({
relationTo: 'cyclical-relationship';
value: string | CyclicalRelationship;
} | null)
| ({
relationTo: 'media';
value: string | Media;
} | null);
globalSlug?: string | null;
user: {
relationTo: 'users';
value: string | User;
};
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-preferences".
@@ -278,6 +365,208 @@ export interface PayloadMigration {
updatedAt: string;
createdAt: string;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "users_select".
*/
export interface UsersSelect<T extends boolean = true> {
updatedAt?: T;
createdAt?: T;
email?: T;
resetPasswordToken?: T;
resetPasswordExpiration?: T;
salt?: T;
hash?: T;
loginAttempts?: T;
lockUntil?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "point_select".
*/
export interface PointSelect<T extends boolean = true> {
point?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "posts_select".
*/
export interface PostsSelect<T extends boolean = true> {
title?: T;
description?: T;
number?: T;
min?: T;
relationField?: T;
relationToCustomID?: T;
relationHasManyField?: T;
relationMultiRelationTo?: T;
relationMultiRelationToHasMany?: T;
A1?:
| T
| {
A2?: T;
};
B1?:
| T
| {
B2?: T;
};
C1?:
| T
| {
C2Text?: T;
C2?:
| T
| {
C3?: T;
};
};
D1?:
| T
| {
D2?:
| T
| {
D3?:
| T
| {
D4?: T;
};
};
};
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "custom-ids_select".
*/
export interface CustomIdsSelect<T extends boolean = true> {
id?: T;
title?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "relation_select".
*/
export interface RelationSelect<T extends boolean = true> {
name?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "dummy_select".
*/
export interface DummySelect<T extends boolean = true> {
name?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "error-on-hooks_select".
*/
export interface ErrorOnHooksSelect<T extends boolean = true> {
title?: T;
errorBeforeChange?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-api-test-ones_select".
*/
export interface PayloadApiTestOnesSelect<T extends boolean = true> {
payloadAPI?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-api-test-twos_select".
*/
export interface PayloadApiTestTwosSelect<T extends boolean = true> {
payloadAPI?: T;
relation?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "content-type_select".
*/
export interface ContentTypeSelect<T extends boolean = true> {
contentType?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "cyclical-relationship_select".
*/
export interface CyclicalRelationshipSelect<T extends boolean = true> {
title?: T;
relationToSelf?: T;
media?: T;
updatedAt?: T;
createdAt?: T;
_status?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "media_select".
*/
export interface MediaSelect<T extends boolean = true> {
title?: T;
updatedAt?: T;
createdAt?: T;
url?: T;
thumbnailURL?: T;
filename?: T;
mimeType?: T;
filesize?: T;
width?: T;
height?: T;
focalX?: T;
focalY?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-locked-documents_select".
*/
export interface PayloadLockedDocumentsSelect<T extends boolean = true> {
document?: T;
globalSlug?: T;
user?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-preferences_select".
*/
export interface PayloadPreferencesSelect<T extends boolean = true> {
user?: T;
key?: T;
value?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "payload-migrations_select".
*/
export interface PayloadMigrationsSelect<T extends boolean = true> {
name?: T;
batch?: T;
updatedAt?: T;
createdAt?: T;
}
/**
* This interface was referenced by `Config`'s JSON-Schema
* via the `definition` "auth".