How to view draft/published JSON file

In the writing room, how can I view a JSON file of the outputted draft/published page that I am on? Sometimes I like to check things are formatting correctly by viewing the exposed JSON file especially before it hits any technologies like Gatsby. This way I can be sure there are no caching issues.

For example, I recently changed some copy from using an H2 to use a P tag instead, and as I’m pulling that through into Gatsby it’s still giving me an H2. I want to make sure this is correctly changing in Prismic before I start checking for any cache issues.

Hi @chrish, thanks for reaching out about this. Yes, you can check the JSON using either the REST API browser or the GraphiQL explorer. Here are the links, you’ll just need to replace ‘your-repo-name’ with the name of your repo.

REST API Browser: https://your-repo-name.prismic.io/api/v2
GraphiQL Explorer: https://your-repo-name.prismic.io/graphql

Here are the docs for the API Broswer and the GraphiQL explorer. When you publish any changes, you just need to make sure to refresh the explorer. For the API Browser, you’ll need to click the little circular arrow icon at the top to refresh the Browser.

My guess for your issue is that you need to rebuild your Gatsby site after making changes. The Gatsby/Prismic plugin only pulls content from Prismic when it builds. So if you make any changes, you need to re-build the site to see those changes. You might also have to run gatsby clean to clear your cache. Let me know if that’s the issue or if it’s something else.

Thanks @levi — I knew I’d seen this browser before but I honestly couldn’t remember if it was for Prismic or another headless service I’d used. Thanks for linking!

Now I’ve looked at the JSON I can see the actual field I have is a heading2 field so it’s kind of forcing the output to that. I have a styled H2 tag, end up with this <h2 className="styled-h2"><h2>Content...</h2></h2> which is bad juju!

You’re right in having to run gatsby clean, I’ve been doing this every time I update the CMS and generally it works. The problem is my config in Prismic :slight_smile:

EDIT

I found the .asText() function in https://github.com/prismicio/prismic-reactjs — just gets the text without rendering any tags. Perfect!

Excellent, I’m glad that you were able to figure out why this was happening for you :grinning: