Create your Bedrock application:
composer create-project roots/bedrock wordpress-bedrock
Create a new database for your app and configure it inside of your wordpress-bedrock/.env
file.
Then, visit your new local WordPress application instance via:
http://wordpress-bedrock.test
Setup your administrator username and password, and you will be brought to the WordPress admin dashboard.
Setup your Bedrock application for GraphQL:
Install the WPGraphQL package by running the following in the root directory:
composer require wp-graphql/wp-graphql
Then, enable the plugin in your WordPress admin dashboard.
Navigate to the newly visible GraphQL Settings page on your WordPress dashboard, click the GraphQL endpoint link shown (i.e. http://wordpress-bedrock.test/wp/graphql). You should see the following error:
Warning: require(/Users/stevebauman/Sites/Work/wordpress-bedrock/web/wp/graphql): failed to open stream: No such file or directory in /Users/stevebauman/.composer/vendor/laravel/valet/server.php on line 191
Fatal error: require(): Failed opening required '/Users/stevebauman/Sites/Work/wordpress-bedrock/web/wp/graphql' (include_path='.:/usr/local/Cellar/php/7.4.6_1/share/php/pear') in /Users/stevebauman/.composer/vendor/laravel/valet/server.php on line 191
Laravel supporting local application drivers really save us here.
Let's create one in the root directory of our WordPress application:
<?php
// wordpress-bedrock/LocalValetDriver.php
class LocalValetDriver extends LaravelValetDriver
{
public function serves($sitePath, $siteName, $uri)
{
return $uri === "/wp/graphql";
}
public function frontControllerPath($sitePath, $siteName, $uri)
{
return $sitePath.'/web/index.php';
}
}
Now visit the same WPGraphQL endpoint and you should see a different error in JSON:

We're almost there. Install the below composer package into your Bedrock application:
composer require gatsbyjs/wp-gatsby
Setup your Gatsby application:
On your Gatsby application, install the following npm packages:
gatsby-plugin-sharp
gatsby-transformer-sharp
gatsby-source-wordpress-experimental
Then, configure the your WordPress endpoint:
{
resolve: `gatsby-source-wordpress-experimental`,
options: {
url: `http://wordpress-bedrock.test/wp/graphql`,
},
},
Build your application using npm run develop
, open up your Gatsby GraphQL dashboard and you should now see all of your WordPress content available in Gatsby!
