Getting preview to work with nextjs - example doesn't add up

[CaptainN]

There is an example for using faust.js with nextjs, but the solution offered within that repo doesn't add up (and we can't get it to work).

Basically, it says these two things:

• Use an ENV var called FAUST_SECRET_KEY
• Preview links use client access to load preview data

These two things don't add up. The faust.js library seems to try to load data directly from the client package, but it would not have access to the value stored in FAUST_SECRET_KEY because that would be a server only ENV var.

And it doesn't work. Nothing loads through these requests (it does allow them, I guess WP is either not restricting cross site requests, or it properly sets CORS).

Anyone know how this is supposed to work?

Alternatively: If someone can point me at how I might just use the getWordPressProps function or similar to load preview data (I tried doing it in getServerSideProps, but it only seems to load the published version), I could then implement nextjs's preview mode directly, instead of using this one off route. I'd be happy to submit that implementation back to the faust.js repo through a PR - as far as I can tell, the only thing I need is to be able to load a preview document.

[theodesp]

Hey @CaptainN. Previews currently work with the Template system ATM.

The example project here uses the preview.js page to load the relevant templates as preview mode.

https://github.com/wpengine/faustjs/blob/canary/examples/next/faustwp-getting-started/pages/preview.js

The FAUST_SECRET_KEY that you mentioned before is not used in the client side. It's used on the server side to perform authentication.

The key thing to check is to accept a asPreview parameter in the template page:

https://github.com/wpengine/faustjs/blob/canary/examples/next/faustwp-getting-started/wp-templates/page.js#L58

On page previews the ctx will assign this parameter as true so it will be passed on the GraphQL request.

Would you be able to provide a small reproducible example of your issue here as well so we can troubleshoot?

[blakewilson]

This may actually be a bug related to this comment #1568 (comment)

[blakewilson]

@CaptainN The client side request to get preview data is an authenticated request using the Authorization header and a bearer token that is fetched from the Faust site (the token endpoint) a few requests prior. If you take a look at the request headers of the preview content, you should see the Authorization header with the token there. This authenticates with WPGraphQL and the WordPress user you logged in as.

[blakewilson]

However, there still very well may be a bug here with the preview links comment I mentioned above.

[CaptainN]

Is it possible that I'm not meeting some requirement? I'm running and testing on a local dev server (http://localhost:3000), does faust.js not support that?

[diegoALCE95]

@CaptainN I can't get it to work as well, were you able to do so? I was following the docs step by step and I even tried to config my own instance, but doesn't seem to work at all.

[monahmad]

Thanks for the information.