Blog / Culture / Contentful Developer Community: GraphQL and live preview publishing in our first Discord AMA

Contentful Developer Community: GraphQL and live preview publishing in our first Discord AMA

Published on November 21, 2023

Written by

Katie Hines

Developer Community Lead, Contentful

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.

The Contentful Discord server recently played host to its first-ever Ask Me Anything (AMA) session, delving into the dynamic world of GraphQL and live preview publishing. The event, which took place Nov. 16, 2023, featured three exceptional hosts: Alex Wake, Lara Isak, and Josh Berry, each bringing a wealth of knowledge and expertise to the table.

Meet the hosts

Alex Wake / Senior Product Manager

Alex has worked at Contentful for 16 months and as a PM for five years. Currently, he works with two teams focusing on the scalability and performance of the platform with specific investments in GraphQL to make it easy and flexible to query content models. For fun, he experiments with making his own ice cream in his spare time.

Lara Isak / Junior Frontend Engineer

Lara has been at Contentful for two years now, and has spent the same amount of time as a frontend developer. Prior to that, she worked in IT for 10 years in Germany, Sweden, and Croatia, where she is from. She loves music (from Tool to Taylor Swift) and loves going to concerts. So far her weekly concert attendance record is five!

Josh Berry / Senior Software Engineer

Josh has been at Contentful just under one year. He started in software engineering after giving up teaching about seven years ago. He couldn’t think of any cool facts about himself, but once he evacuated an entire hotel because he tried to kill a spider that was sitting on a fire alarm with spray deodorant. Whoops!

Highlights of the AMA

The AMA kicked off with an engaging introduction from the hosts, setting the tone for an informative and collaborative session. Participants flooded the chat with questions, covering a wide array of topics within GraphQL and live preview publishing. Here are some key highlights and notable questions asked during the AMA:

"Can you explain the core concepts of GraphQL for someone new to it?"

Answered by Josh: GraphQL is a strongly typed query language really designed for building frontend experiences across multiple platforms. It was invented by Facebook, so you can see that they have lots of data, but across multiple devices only need some subset of that data. Because it is strongly typed, you can generate tooling and queries based off of the schema and know that your request will always work the same way. It's also a great way to visualize the way your data fits together, because of the tooling around GraphQL, you can inspect your schema and see how different parts of your schema connect together.

“How do I activate live preview and what is live preview publishing?”

Answered by Lara: Live preview can be activated in two ways, depending on which live preview features you want to use.

Live preview features are:

Side-by-side previewing and editing
Live updates (preview your changes without clicking the "Refresh preview" button)
Inspector Mode

To activate side-by-side previewing and editing, no code changes are required (no Live Preview SDK initialization required), but for live updates and “Inspector Mode, the Live Preview SDK has to be initialized, meaning you have to make changes to your code.

Prior to activating any of the live preview features, content preview must be set up inside Contentful, in the master environment of the space you want to have the live preview features in. Oh, and it has to be set up by the space administrator(s).

Live preview publishing is an option to publish the entry you’re working on in the live preview pane, along with all of the draft(s) and changed entries that are referenced by that entry.

When you click on the “Publish” button, the publish window opens up. There you can click “Select all” in the draft and change the references of your entry that you would like to publish together with the entry itself. References on your entry which are already published or haven’t been changed won’t show up in the reference list. There is also a warning indicator for an entry that is referenced not just by the current entry you’re working on, but also in other (unrelated) entries. The warning indicator is there to let you know that by publishing these reference entries, you’ll be changing the content on other pages as well.

Live preview publishing is currently only available to customers participating in our Early Access Program (EAP). You can also sign up to see it for yourself HERE

“When might we mix our use of REST and GraphQL for querying content? What are some scenarios for each?”

Answered by Josh: The first one that comes to mind is if you only need part of the data in your content model, then GraphQL would be a good choice. This will reduce network overhead for your clients by only giving you the data you need. If you care about the relationships between your content types and require filtering on those relationships, GraphQL may be a more expressive choice. If, however, you just need all the data related to your content model and you want to build your website all at once, then the REST API may be a good choice.

“What does nested filtering do? Do I have to use an intermediary layer like BFF (Backend for Frontend)?”

Answered by Alex: Nested filtering applies to queries in which a developer is looking to filter specific data that is nested within another data type. In Contentful terms, this may be a content type that has a reference to another content type.

We don’t want customers to have to download a load of data just to sort through it. Instead, you can refine your query using a filter to minimize the amount of data we need to send over the wire and download to your clients. With nested filtering, you can repeat this process again and again to fetch exactly the data your application needs for improved performance and simpler frontend development by allowing queries that have filters within filters.

The idea with nested filtering is to ensure that you don’t need an intermediary layer and call exactly the data you need from your frontend.

“In live preview, I see there is an ‘inspector mode’. What is it and how do I set it up?”

Answered by Lara: Inspector mode is one of the features inside the live preview pane which allows you to locate and edit any piece of website content with a single click.

By clicking on the “Edit” button, you get redirected to the corresponding field within the entry where you can make content changes to that specific field without having to leave the Live Preview pane.

To activate the Inspector Mode feature, the Live Preview SDK needs to be initialized and corresponding field(s) need to be tagged with required data attributes: (data-contentful-entry-id and data-contentful-field-id).

Fields without the required data attributes aren't seen as tagged so the Inspector Mode won’t work on them. The required data attributes can be added directly into the code or by running the helper function from the Live Preview SDK. For the full Inspector Mode setup info please check out this document for more information.

Answered by Alex: Indeed, nesting of content can result in a quite confusing editing experience, especially for users who are new to headless CMS. For this reason, we built Inspector Mode in live preview, where users can simply click on an element and start editing, without the need to understand how referenced content is nested. We will be further investing into these visual editing experiences that are designed to manage pages/websites. We also plan to make improvements on the core entry editor experience. Please reach out to us in case you have any suggestions.