Last week, we held a one hour webinar along with Mediacurrent’s Head of Engineering, Jay Callicott, called “Integrating the Latest Gatsby Module for Drupal”. If you missed it, you can sign up to receive the captioned recording (and slides) now.
Just like every Gatsby webinar, the live attendees posed many excellent questions during the live Q&A session and we thought it’d be helpful to share more in depth answers — and links — for five of them with you all here today. So, let’s get into it!
Question 1: When using gatsby-source-drupal with JSON:API if I do not have a field with a value (an optional field) and try to use it within my Gatsby site, the builds will fail. Is there a way around needing to populate every field in my Drupal site?
There are ways around this. The easiest solution is to use the Gatsby Schema Snapshot Plugin. This allows you to create a snapshot of your schema and commit that to your Git repo. The next time you run a build it will use that schema snapshot to generate the GraphQL schema if it exists. This means you can have a development Drupal site where every field you want to use can have a value, generate the Schema Snapshot, and your production builds would use the generated schema. This means even if your content editors do not fill in a field, the build will still succeed.
An alternative option is to use Gatsby’s Schema customization API’s to manually add fields that are optional to prevent a missing field value from failing a build. You can read more about this aproach on JD Flynn’s blog post called Create Custom GraphQL Schema for Empty Fields
Q2: If we want to lock down the view published content to an authenticated user, how do we config gatsby source drupal for both previewing permissions and build permissions?
When configuring gatsby-source-drupal, you can configure Basic Auth to use a Drupal user when sourcing data from Drupal’s JSON:API. The easiest way to do this is to set up a “preview” role and a “production” role in your Drupal site. Then configure two users, one assigned to each role. In your ENV variables use the correct user based on the permissions you want each environment to have. If you follow these steps, you can allow your preview environment to view unpublished content while making sure production builds only have access to published content.
Q3: Let’s assume it takes 100 hrs to build a site in drupal ( 50 hrs custom module & 50 hrs theme development) How much time would it take to make the same site in drupal + gatsby. Will it be around 100hrs or will it be 150 hrs?
This isn’t an easy one to answer because there are several considerations to make. A lot of it depends on who is building the site and how experienced they are building Drupal themes vs. building with React. The first time you build a site with Gatsby, it might take a little more than 100 hours if your team is still learning React. Once your team is familiar with Gatsby and React, it’s very likely that it will take you less than 100 hours.
Another thing to consider is the ability to parallelize the work. In Drupal, it’s very difficult to start theming before you have all of the data models and set up and a lot of custom development completed. This means the backend work usually starts first and the frontend works comes after. When you decouple your frontend from your backend, you can work on these things in parallel. This typically means meeting ahead of time and determining a “contract” of how the data model will be set up, and then both teams can begin working. At the end, the frontend team will need to wire up the backend, but since the React components will already exist, it can be as simple as writing the GraphQL queries to get the data.
In your Drupal project example, if your project consisted of two developers one focusing on frontend and one on backend, and each worked 25 hours on the project per week. It would take 4 weeks to finish. Let’s assume you went the decoupled route and it took the same amount of time (100 hours). You could likely finish this project in two weeks since the work can begin at the same time. Even if it took a little longer (if you were less familiar with Gatsby/React on your first project), the total time to complete the project would still likely be less (even if the billable hours were more). This ability to finish projects more quickly can be very valuable to clients.
Q4: How would we integrate bricks(drupal module https://www.drupal.org/project/bricks) and gatsby?
Integrating Bricks is very similar to implementing Paragraphs. In Drupal, all the data comes through as entity reference fields. In Gatsby, you can query for this data through `relationships` in your GraphQL queries. The important part would be mapping your Bricks to React Components. Then creating GraphQL fragments in Gatsby for pulling data for each type of Brick.
There are many Gatsby + Drupal projects that have integrated with Paragraphs, and a few that have integrated with Layout Builder (which is much more complicated). Integrating with Bricks would be closer to the Paragraphs approach.
You can learn how to integrate Gatsby with Drupal Paragraphs in the Decoupling Drupal Using Gatsby workshop by Jesus Olivas. From there, you should have enough information to do something similar with the Drupal Bricks module.
Q5: Is it possible to manage content for multiple different Gatsby sites from a single Drupal site?
Yes! Check out the Gatsby Endpoints module! However, it’s important to keep in mind that this use case isn’t as popular and therefore the module isn’t as well supported. It uses Drupal’s JSON:API and allows you to configure JSON:API Endpoint URL’s that can be used with gatsby-source-drupal. It’s easy to configure multiple endpoints (one for each Gatsby site) and changing content for those Endpoints will trigger builds on the Gatsby sites as expected.
Not all the features of the Gatsby Drupal module are currently available on the Gatsby Endpoints module, so it’s better suited for multiple smaller Gatsby sites. This will likely change as the module continues to improve and it gets closer to feature parity with the main module.
To everyone who joined us live, thank you! I appreciate you taking time to spend an hour with me and Jay and for asking such insightful questions. If you missed last week’s webinar, watch it on demand now and check out all of the Gatsby Webinars — We’ll send you the on-demand version of any of those past webinars straight to your inbox.
If you have more questions about this webinar, you can find me, Jay Callicott, and lots of fellow Drupal friends over on the Drupal slack channel.