[Question] How to use live preview

[bufke]

Hello,

First off, nice project! I'm hoping to migrate my open source Angular and NextJS wagtail integrations to this project instead of my own backend implementation.

I'm not sure how to use live preview however. I can use the rest API without live preview successfully. I know generally how to set up channels. But I think I'm missing some information on how live preview is supposed to work.

• Why does the edit page JS make GET requests to /wagtail/pages/<page-id>/edit/preview/?live_preview=true&[object%20FormData] upon typing? Wouldn't the request come from the iframed client in a new tab (from clicking preview)?
• I would assume that since channels is required, websockets are used. Is there an example of this? I tried making a web socket request to the rest preview API but it doesn't send anything. I don't see any code in this project that would add websockets to the API. Is this left to the end user to implement?
• Is it possible only GraphQL is supported and not rest?

[zerolab]

Hey @bufke,

To be honest, I have never used Django Channels with the REST API, so I don't yet have the mechanics of making that happen.

Why does the edit page JS make GET requests [..] upon typing

This is from https://github.com/torchbox/wagtail-headless-preview/blob/master/wagtail_headless_preview/static/js/live-preview.js which ensures that

1. a preview entry is created (if it doesn't exists), then it gets updated (rather than create numerous preview entries)
2. refreshes the preview tab (a similar thing should happen if you have a regular site, click preview, make some changes then click preview again) which also triggers a preview update signal (https://github.com/torchbox/wagtail-headless-preview/blob/0d89fb2e4140d6eaabe62e0a7428424c9e848c3c/wagtail_headless_preview/models.py#L98)

With GraphQL (and wagtail-grapple) + Channels you'd do something like https://github.com/torchbox/wagtail-grapple/blob/ad1ad1961b1c7da9fc117be49d0f9b2c8b509830/grapple/types/pages.py#L189. https://wagtail-grapple.readthedocs.io/en/latest/general-usage/preview.html has the user facing explanation

While writing (and rewriting the reply) I tried to do some research and you'd likely need something like https://github.com/linuxlewis/channels-api to make the REST API play nicely with Django Channels, then use the preview_update signal to pull in the preview.

Unfortunately I don't have any project that requires live preview via the REST API, so it may be a while until I get to sit down and tinker with this