{Werner Glinka}

Minneapolis - getting the content from WordPress

At this stage of our project review, we have successfully installed and configured our WordPress site. We have defined the different sections of our pages and demonstrated how these sections can be utilized to compose an engaging home page. In this blog post, our focus will be on explaining the process of creating queries to retrieve content data for Metalsmith, our chosen static site generator.

During the setup of our WordPress site, we made use of the WP GraphQL plugin. This powerful plugin offers an extendable GraphQL schema and API that seamlessly integrates with our WordPress site. Additionally, we needed to access the Advanced Custom Fields (ACF) and utilize any available SEO information provided by the Yoast plugin. To achieve this, we employed the WPGraphQL for Advanced Custom Fields plugin and the Add WPGraphQL SEO plugin.

To ensure that all ACF fields are accessible through the GraphQL API, it is crucial to enable the "Show in GraphQL" toggle for each respective field.

Building GraphQL queries

The WP GraphQL plugin includes the GraphiQL IDE, an invaluable tool that allows us to explore the available schema. The GraphQL schema essentially defines the various types of data and operations that can be performed through the API. It provides a comprehensive overview of the queries, mutations, and data structures that are at our disposal.

Once we have gained insights from exploring the schema, we can begin constructing GraphQL queries to retrieve the specific content we need. These queries are structured and precisely define the data we want to fetch.

Typically, a query is written starting with an entry point, such as query {}, and within the curly braces, we specify the fields we wish to retrieve.

Read more for a thorough introduction to GraphQL. Jason Bahl also has several helpful videos on YouTube about WP GraphQL. I'd recommend to start with this one.

Let's have a look at how we can use the GraphiQL IDE to build a query string for our home page.

Open the IDE by clicking the GraphQL link on the left side of the WP dashboard. Click on the Query Composer button.

GraphQL Query Composer

In the Query Composer, scroll down to find and open pages, then find edges, then node. The node presents a single page.

GraphQL Query Page

Find and open sections and then click the checkbox sections. We'll now see all ACF page sections.

GraphQL Query Sections

Click on Page_Sections_Sections_Media and open media. We'll see the four fields groups commonSectionFields, cta, image and text, as well as the mediaPosition checkbox. We can now open all field groups and arrive at the complete schema for the media section.

GraphQL Query Media

This schema represents the settings of the example media section that we reviewed in the previous blog post.

And this is the response we get when we run the query for a media section.

{
  "media": {
    "commonSectionFields": {
      "backgroundColor": null,
      "hasBackground": true,
      "isDark": null,
      "sectionClasses": null,
      "settings": [
        "in_container"
      ],
      "usage": "default",
      "wrapperElement": "section",
      "backgroundImage": {
        "url": null
      }
    },
    "cta": {
      "buttonType": "primary",
      "ctaClasses": null,
      "isButton": true,
      "isExternal": null,
      "label": "Read More",
      "target": {
        "url": "https://www.minneapolisparks.org/parks-destinations/parks-lakes/lake_of_the_isles_park/"
      }
    },
    "image": {
      "altText": "Lake of the Isles",
      "credits": "Sollicitudin Venenatis Aenean",
      "url": {
        "mediaItemUrl": "https://res.cloudinary.com/djd0plux8/images/w_2560,h_1707/f_auto,q_auto/v1681925514/minneapolis/rod-m-uvPm9PsAWz4-unsplash/rod-m-uvPm9PsAWz4-unsplash.jpg?_i=AA",
        "mediaDetails": {
          "file": "2023/04/rod-m-uvPm9PsAWz4-unsplash-scaled.jpg",
          "height": 1707,
          "width": 2560
        }
      }
    },
    "text": {
      "headingLevel": "h2",
      "prose": "<p>The name of the lake, referring to the islands in the lake, was used from the earliest days of the settlement of Minneapolis. At one time the lake contained four islands. Two islands near the south shore of the lake were converted to land as the lake was developed.</p>\n",
      "subtitle": null,
      "title": "<p>Lake of the Isles</p>\n"
    },
    "mediaPosition": "media_right"
  }
}

This is how we can build our queries which will be part of the GraphQL requests that are sent to the WordPress site at

  https://dev-mpls.pantheonsite.io/graphql/<query string here>

The query string needs to include all known page sections so it will be quite long. In the next blog post, we will review the Metalsmith end and how the queries are assembled, and the content is fetched.

Scroll to top