# How to support gatsby preview with Ghost?

**URL:** <https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143>\
**Category:** Developer help\
**Created:** [July 28, 2020, 7:01am UTC](https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143 "2020-07-28T07:01:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![krunal\_shah1](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/krunal_shah1/32/7988_2.png) [@krunal\_shah1](https://forum.ghost.org/u/krunal_shah1)\
**Post date:** [July 28, 2020, 7:01am UTC](https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143/1 "2020-07-28T07:01:52Z")

</div>

We are using Headless Ghost with Gatsby. We want to implement Preview with Gatsby. Any idea how we can add that into Ghost blogs?

---

<div class="post-metadata">

**Author:** ![fedetibaldo](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/fedetibaldo/32/8261_2.png) [@fedetibaldo](https://forum.ghost.org/u/fedetibaldo)\
**Post date:** [September 16, 2020, 4:32pm UTC](https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143/2 "2020-09-16T16:32:03Z")

</div>

I recently finished writing a tutorial on the topic. It’s split into three parts:

1. [Set up the environment](https://fedetibaldo.com/how-to-preview-ghosts-drafts-in-gatsbyjs-part-1/)
2. [Implement the preview page](https://fedetibaldo.com/how-to-preview-ghosts-drafts-in-gatsbyjs-part-2/)
3. [Get ready for production](https://fedetibaldo.com/how-to-preview-ghosts-drafts-in-gatsbyjs-part-3/)

Don’t hesitate to ask me if you have any questions!

---

<div class="post-metadata">

**Author:** ![vikaspotluri123](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/vikaspotluri123/32/24_2.png) [@vikaspotluri123](https://forum.ghost.org/u/vikaspotluri123)\
**Post date:** [September 16, 2020, 5:52pm UTC](https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143/3 "2020-09-16T17:52:08Z")

</div>

I think you can avoid the extra network request by using [asset].browse with a filter instead of using [asset].read:

```auto
const browseParams = {
  filter = `uuid:${post.uuid},
  formats: 'html'
}

```

---

<div class="post-metadata">

**Author:** ![fedetibaldo](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/fedetibaldo/32/8261_2.png) [@fedetibaldo](https://forum.ghost.org/u/fedetibaldo)\
**Post date:** [September 16, 2020, 6:09pm UTC](https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143/4 "2020-09-16T18:09:49Z")

</div>

Oh wow, I had no idea. Thank you very much for the tip! I’ll soon update it. Also, thank you for your time 🙂 Much appreciated!

---

<div class="post-metadata">

**Author:** ![fedetibaldo](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/fedetibaldo/32/8261_2.png) [@fedetibaldo](https://forum.ghost.org/u/fedetibaldo)\
**Post date:** [September 16, 2020, 9:26pm UTC](https://forum.ghost.org/t/how-to-support-gatsby-preview-with-ghost/16143/5 "2020-09-16T21:26:56Z")

</div>

Updated!

> **[How to Preview Ghost's Drafts in GatsbyJS (Part 2)](https://fedetibaldo.com/how-to-preview-ghosts-drafts-in-gatsbyjs-part-2/)**
>
> Buckle up! You're about to implement the heart of this guide: the preview page.