From f2820a65a0638a754062460f4de2b453808e096f Mon Sep 17 00:00:00 2001 From: Paul Hachmang Date: Thu, 4 Jul 2024 21:18:51 +0200 Subject: [PATCH] Added preview mode docs --- docs/framework/preview-mode.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 docs/framework/preview-mode.md diff --git a/docs/framework/preview-mode.md b/docs/framework/preview-mode.md new file mode 100644 index 0000000000..26d487f4dd --- /dev/null +++ b/docs/framework/preview-mode.md @@ -0,0 +1,31 @@ +# Preview mode + +GraphCommerce implements Next.js' preview mode which allows you to view the +realtime data from Magento and Hygraph. + +You can select whether to view Hygraph content in the DRAFT of PUBLISHED stage +(or other if configured). + +You can Revalidate / Regenerate a page to make sure it is always up to date when +viewing. + +It bypasses all caches from Next.js, Magento and Hygraph (this means that +Preview Mode is expdcted to be slower but does show your changes directly). + +## Accessing preview mode + +To enter preview mode press `ALT + Backtick` (\`) on your keyboard. This will +open the preview mode toolbar on the bottom of the screen. + +![Toolbar requesting secret](https://github.com/graphcommerce-org/graphcommerce/assets/1244416/5064dbf0-e491-4d14-9c44-17754941d193) + +Fill in the secret and press the chevron button to enter preview mode. + +You are now greeted with the preview mode toolbar: + +![Scherm­afbeelding 2024-07-04 om 21 09 58](https://github.com/graphcommerce-org/graphcommerce/assets/1244416/f6a2224b-ad0a-429d-bd1b-ad924a3f81e5) + +## Enabling preview mode + +Configure the `previewSecret` in your `graphcommerce.config.js` file to enable +preview mode.