Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Unanswered
CaptainN asked this question in Q&A
Discussion options

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.

You must be logged in to vote

Replies: 2 comments 6 replies

Comment options

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?

You must be logged in to vote
6 replies
Comment options

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

Comment options

@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.

Comment options

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

Comment options

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?

Comment options

@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.

Comment options

Thanks for the information.

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

AltStyle によって変換されたページ (->オリジナル) /