Section 2: WordPress and WPGraphQL

Using WordPress as a headless CMS requires a working WordPress site and a GraphQL endpoint.

• The content will be stored on WordPress

• The GraphQL endpoint will expose the content so the frontend can request it

1. Setting up a new WordPress site

This tutorial uses WordPress Studio by Automattic, a tool that allows you run WordPress sites locally on your computer.

1. Download WordPress Studio from this webpage, install it on your computer and open it

2. Select Create a new site, enter a site name and click Add Site

3. To access the admin of your new site, click WP admin under your site name

   • In your WP admin, go to Settings > Permalinks

   • Change "Plain" to "Post name" and click Save

The /graphql endpoint requires a permalink structure to properly route requests. It won’t work with ‘Plain’ permalinks.

2. Add content to WordPress

Let's add some posts to the new WordPress site.

• The content in these posts will be displayed on the front end application later

• In the interest of time, i've put together some content of my trading card collection for you to use.

Follow the steps below to import it to your WordPress Site:

1. Download the XML file from this link

2. In the left sidebar of your WP admin, click on Tools > Import

3. Click Install now under the WordPress option and click Run Importer when the installation is done

4. On the Importer page, upload the .XML file you downloaded in step 1 and click Upload file and Import

5. On the Import WordPress page, select these options and click Submit:

   1. Assign posts to an existing user: admin

   2. Download and import file attachments (check this box)

   3. Change all imported URLs that currently link to the previous site so that they now link to this site (check this box)

The import should complete without errors. Head over to the WordPress Studio and click on Open Site to check out the posts that were imported.

You can view your posts in the WP admin:

1. In the left sidebar of your WP admin, click on Posts

2. Delete(Trash) the Hello World post, we won't use it in the tutorial

3. Installing WPGraphQL 

WPGraphQL is a plugin that creates a GraphQL API endpoint for a WordPress site

• This endpoint will expose the WordPress data in a structured format that for other systems to access.  

1. In your WordPress dashboard, navigate to Plugins > Add New

2. Search for "WPGraphQL"

3. Click Install Now on the first result (by Jason Bahl)

4. Click Activate

5. You'll see a new GraphQL menu item appear in your left sidebar.

4. Your First GraphQL Endpoint

WPGraphQL automatically creates your GraphQL API endpoint.

• You can find it in the GraphQL plugin > Settings

The table below contains the available fields in the API:

Each field represents a the data that can be requested from WordPress.