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

docs: improves hooks docs (#7133)

Browse Source
This commit is contained in:
Jacob Fletcher
2024-07-12 15:51:17 -04:00
committed by GitHub
parent b750ebf166
commit 6578b85057
19 changed files with 472 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/live-preview/client.mdx
View File

@@ -246,7 +246,7 @@ For a working demonstration of this, check out the official [Live Preview Exampl
## Troubleshooting
### Relationships and/or uploads are not populating
#### Relationships and/or uploads are not populating
If you are using relationships or uploads in your front-end application, and your front-end application runs on a different domain than your Payload server, you may need to configure [CORS](../configuration/overview) to allow requests to be made between the two domains. This includes sites that are running on a different port or subdomain. Similarly, if you are protecting resources behind user authentication, you may also need to configure [CSRF](../authentication/overview#csrf-protection) to allow cookies to be sent between the two domains. For example:
@@ -271,7 +271,7 @@ If you are using relationships or uploads in your front-end application, and you
}
```
### Relationships and/or uploads disappear after editing a document
#### Relationships and/or uploads disappear after editing a document
It is possible that either you are setting an improper [`depth`](../queries/depth) in your initial request and/or your `useLivePreview` hook, or they're mismatched. Ensure that the `depth` parameter is set to the correct value, and that it matches exactly in both places. For example:
@@ -297,7 +297,7 @@ const { data } = useLivePreview<PageType>({
})
```
### Iframe refuses to connect
#### Iframe refuses to connect
If your front-end application has set a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) that blocks the Admin Panel from loading your front-end application, the iframe will not be able to load your site. To resolve this, you can whitelist the Admin Panel's domain in your CSP by setting the `frame-ancestors` directive:

16
docs/live-preview/overview.mdx
View File

@@ -10,12 +10,6 @@ With Live Preview you can render your front-end application directly within the
Live Preview works by rendering an iframe on the page that loads your front-end application. The Admin Panel communicates with your app through [`window.postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) events. These events are emitted every time a change is made to the document. Your app then listens for these events and re-renders itself with the data it receives.
{/* IMAGE OF LIVE PREVIEW HERE */}
## Setup
Setting up Live Preview is easy. This can be done either globally through the [Root Config](../configuration/overview), or on individual [Collection](../configuration/collections) and [Global](../configuration/globals) configs. Once configured, a new "Live Preview" tab will appear at the top of enabled documents. Navigating to this tab opens the preview window and loads your front-end application.
To add Live Preview, use the `admin.livePreview` property in your [Payload Config](../configuration/overview):
```ts
@@ -27,14 +21,20 @@ const config = buildConfig({
// ...
// highlight-start
livePreview: {
url: 'http://localhost:3000', // The URL to your front-end, this can also be a function (see below)
collections: ['pages'], // The Collection(s) to enable Live Preview on (Globals are also possible)
url: 'http://localhost:3000',
collections: ['pages']
},
// highlight-end
}
})
```
{/* IMAGE OF LIVE PREVIEW HERE */}
## Options
Setting up Live Preview is easy. This can be done either globally through the [Root Config](../configuration/overview), or on individual [Collection](../configuration/collections) and [Global](../configuration/globals) configs. Once configured, a new "Live Preview" tab will appear at the top of enabled documents. Navigating to this tab opens the preview window and loads your front-end application.
The following options are available:
| Path | Description |

4
docs/live-preview/server.mdx
View File

@@ -164,7 +164,7 @@ For a working demonstration of this, check out the official [Live Preview Exampl
## Troubleshooting
### Updates do not appear as fast as client-side Live Preview
#### Updates do not appear as fast as client-side Live Preview
If you are noticing that updates feel less snappy than client-side Live Preview (i.e. the `useLivePreview` hook), this is because of how the two differ in how they work—instead of emitting events against _form state_, server-side Live Preview refreshes the route after a new document is _saved_.
@@ -183,7 +183,7 @@ Use [Autosave](../versions/autosave) to mimic this effect server-side. Try decre
}
```
### Iframe refuses to connect
#### Iframe refuses to connect
If your front-end application has set a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) that blocks the Admin Panel from loading your front-end application, the iframe will not be able to load your site. To resolve this, you can whitelist the Admin Panel's domain in your CSP by setting the `frame-ancestors` directive: