In the previous post, I got acquainted with the Gatsby framework with you. Then with this article, I and my friends connect Gatsby with WordPress and get acquainted with GraphQL. To connect to WordPress we go to Gatsby’s plugin page .
Link WordPress to Gatsby
You go to the link I attached and download the plugin gatsby-source-wordpress into the project folder you created in the previous post, by turning on the terminal in the directory and using the following command:
<code>npm install --save gatsby-source-wordpress</code><div><span>1</span></div>
After the installation is complete, turn on the IDE in the project folder. If you use visual code, then type the following command in the terminal:
<code>code .</code><div><span>1</span></div>
And if you use Atom, you use the command:
<code>atom .</code><div><span>1</span></div>
After turning on the IDE in the folder you find the file gatsby-config.js as you can see, this file is used to declare the plugins that you have installed because when you initialize, the default theme has some built-in plugins. support such as: gatsby-plugin-react-helmet , gatsby-transformer-sharp , …
As for the use of these plugins, slowly through the next articles, let’s find out! Now back to the main problem of installing the gatsby-source-wordpress plugin. You add this code to serialize the plugin array in module.exports
<code>{
resolve: `gatsby-source-wordpress`,
options:{
baseUrl:`link-wordpress`,
protocol:`https`,
hostingWPCOM: false,
}
},</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
</div>
In the plugin page there will be longer and more detailed code instructions. Along with some plugins that are required to be installed in the WordPress CMS if you use more Yoast SEO and ACF In the following articles, I will mention them.
In the above code, you enter the url of the WordPress CMS and the protocol is the connection protocol like http or https depending on the domain containing your WordPress.
But I think I should use https to sync with server deploy later. As for hostingWPCOM, I leave it false because I don’t use WordPress.com hosting. So the first step we connect WordPress is done. To test us through the next section is to familiarize yourself with GraphQL.
Getting Started with GraphQL
You continue to turn on the terminal at the project directory and use the command:
<code>gatsby develop</code><div><span>1</span></div>
To enable Gatsby deployment on local. Then you go to the link to turn on GraphQL: http://localhost:8000/__graphql
If you notice the sidebar, if the fields of WordPress are displayed, congratulations, you have successfully connected to WordPress. Here, let’s render test data on GraphQL
<code>query MyQuery {
allWordpressPost {
edges {
node {
title
slug
excerpt
content
}
}
}
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
</div>
Go to the editor in your browser and then you will get something like this if you don’t have any posts in the post:
<code>{
"data": {
"allWordpressPost": {
"edges": [
{
"node": {
"title": "Hello world!",
"slug": "hello-world",
"excerpt": "<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n",
"content": "\n<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>\n"
}
}
]
}
}
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span>
</div>
And here are the results I took:
So we are familiar with and know how to get data and get acquainted with GraphQL.
summary
Through this article, I have helped you to link Gatsby with WordPress. Through the next post, I will continue to guide you to render Header on Gatbsy.
Thank you.
