How can I query a headless CMS to fetch data to be passed in Previews ?

[jbtheard]

Is your feature request related to a problem? Please describe. My emails content is currently stored in a headless CMS so that marketer can easily edit them.

Describe the solution you'd like A way to retrieve content via GraphQL so that I can build previews with data from the CMS instead of mocking the data.

Describe alternatives you've considered Manually copy/pasting result of query as source data

Additional context Perhaps we could query data from each Preview file ? Next 13 may allow that ?

[psugihara]

I like this idea, @jbtheard! I've heard similar requirements a couple times now so I'd like to prioritize a solution. I think we should support async Preview functions so that you could prepare whatever data you need.

That way you could do something like this with a preview function....

export async function welcome() {
  const res = await fetch("my.cool.api/data.json");
  const data = await res.json()
  return <Welcome data={data} />
}

Would that work for you?

We do a 1-pass render via mjml-react so hooks or more familiar react solutions are hard to implement, but this would be relatively easy.

[jbtheard]

You're absolutely right; using a hook would feel more familiar but your suggestion would absolutely work and fit the need. I'm happy to test it if/when sth becomes available on the matter. So happy this could land on the backlog soon!

[psugihara]

released in v0.8.18

LMK if you have any issues @jbtheard. Thanks for your help understanding the use-case!

[jbtheard]

I confirm that's working brilliantly! Thanks a lot, really helpful. Now very close to being able to create emails on my headless CMS and automatically update template in my CRM

[psugihara]

Very cool. Would love to read a mini write-up about your setup if you ever have the chance to document how you're doing it!

[jbtheard]

Will definitely try to take time to do that! (likely next week though)