Skip to content
Drupal Decoupled

Paragraphs

Paragraphs

This guide covers how to add Paragraphs to a content type in Drupal and then expose them to the GraphQL schema to be consumed by a front end application.

Additional information about Paragraphs can be found on the Concepts documentation.

Drupal setup

To get started, you need a Drupal instance with the following modules installed and enabled

Install dependencies

If you’re using the drupal-decoupled-graphql-basic-recipe recipe. You’ll need to install the Paragraphs module:

Terminal window
ddev composer require 'drupal/paragraphs'

Next, enable the Paragraphs module.

Terminal window
ddev drush en paragraphs

Add a new Paragraph type

Once you have the Paragraphs module enabled, you can add a new Paragraph type under the Structure > Paragraph types > Add paragraph type section. As an example you can name it Rich Text.

Add a field to the Paragraph type

Now you’ll add a new field to the Paragraph type you created in the previous step. Click on Create a new field, select Plain text and name it Name and hit Save settings.

Add a second field to the Paragraph type

Now you’ll add another field to the Paragraph type. Click on Create a new field, select Formatted text name it Description, set it as Text (formatted, long) and in the Allowed text format select Full HTML and hit Save settings.

Add a new Paragraph field

To add a new Paragraph field to the Article content type, navigate to the content type’s manage fields page: https://drupal-decoupled.ddev.site/admin/structure/types/manage/article/fields

Click on the Create a new field button and select the Paragraphs field type. Name it Components.

Scroll down and make sure to select the Rich Text Paragraph type created on the Add a new Paragraph type section. Finally, click on the Save Settings button to save the field.

Expose the Paragraph field to the GraphQL schema

By default new types are not exposed to the GraphQL schema. So in order to expose the Rich Text Paragraph type:

Navigate to the GraphQL Compose configuration https://drupal-decoupled.ddev.site/admin/config/graphql_compose, under the Schema tab click on Paragraph > Rich Text and enable the following toggles:

  • Enable GraphQL
  • Enable single query
  • Enable edge query

Under Paragraph > Rich Text > Fields section expand the Name and Description fields and enable the “Enable field” toggle.

Lastly, navigate to Content > Article > Fields and expand the Components field, make sure to enable the “Enable field” toggle.

Hit Save configuration.

Add content with Paragraphs

Navigate an edit an existing Article under the Content section here: https://drupal-decoupled.ddev.site/admin/content.

Add a new Paragraph by clicking on the Add Rich Text button under the Components section.

Fill Name with “First Paragraph” and Description with “This is the first Paragraph”. Feel free to add bullet items. Then click on the Save button, to save the Paragraph and update the Article.

Frontend setup

Update the content query

On the front end, update the content query to also fetch the Paragraphs.

If you came from the Remix Guide, you should have a splat route with a getNodeArticleByPath query. Update this query to fetch the components Paragraph for the Article; place the suggested query changes under NodeArticle right after the metatag field.

/app/routes/$.tsx
query getNodeArticleByPath($path: String!) {
  route(path: $path) {
    ... on RouteInternal {
      entity {
        ... on NodeArticle {
          ...
          body {
            value
          }
          metatag {
            __typename
            ...
          }
          // highlight-addition-start
          components {
            ... on ParagraphRichText {
              __typename
              name
              description {
                value
              }
            }
          }
        // highlight-addition-end
        }
      }
    }
  }
}

Render the Paragraph components

Now that the query is updated to fetch the Paragraph components, you can render them in the page. Place the suggested code changes after the usage of the body field, before the ending div tag.

/app/routes/$.tsx
export default function Index() {
  ...
      <div
        className="max-w-sm lg:max-w-4xl mx-auto text-lg"
        dangerouslySetInnerHTML={{ __html: node.body.value }}
      />
      // highlight-addition-start
      {node.components &&
        node.components.map((component) => {
          if (component.__typename === "ParagraphRichText") {
            return (
              <div key={component.name} className="mb-6">
                <h2 className="text-4xl font-bold tracking-tighter leading-none mb-6 text-left">
                  {component.name}
                </h2>
                <div
                  className="max-w-sm lg:max-w-4xl mx-auto text-lg"
                  dangerouslySetInnerHTML={{
                    __html: component.description.value,
                  }}
                />
              </div>
            )
          }
        })
      }
      // highlight-addition-end
    </div>
  )
}


export function ErrorBoundary() {

Now, the new Paragraph component should render in the page, you can check by visiting the page in the browser.