In the previous post, I and everyone practiced using custom fields from WordPress to render to Gatsby’s homepage interface. Then, with this article, we will practice together more through rendering news on the homepage.
Render breaking news to Gatsby
To get started, let’s go into the WordPress dashboard. I will create 4 more articles to create data render on gatsby.
Then I turned on Gatsby to check the data poured into GraphQL. You type the command:
<code>gatsby develop</code><div><span>1</span></div>
Then you go to GraphQL and check the following array object:
<code>query MyQuery {
allWordpressPost {
edges {
node {
title
slug
featured_media {
source_url
alt_text
}
}
}
}
}
</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>
</div>
And the result returned is as follows:
<code>{
"data": {
"allWordpressPost": {
"edges": [
{
"node": {
"title": "Featured New",
"slug": "featured-new",
"featured_media": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
"alt_text": ""
}
}
},
{
"node": {
"title": "Lastest New",
"slug": "lastest-new",
"featured_media": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
"alt_text": ""
}
}
},
{
"node": {
"title": "News Post",
"slug": "news-post",
"featured_media": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
"alt_text": ""
}
}
},
{
"node": {
"title": "Hello world!",
"slug": "hello-world",
"featured_media": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2-1.jpg",
"alt_text": ""
}
}
}
]
}
}
}</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><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span><span>47</span><span>48</span>
</div>
Next we create the file news.js and import it into index.js then initialize and import the necessary components into news.js :
<code>
import React, { Component } from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
import {Link } from "gatsby"
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
Next, like the previous post, you put the query data into the data variable in the index.js file and then pass the props to the News component.
<code>const data = useStaticQuery(graphql`
{
allWordpressPost {
edges {
node {
title
slug
featured_media {
source_url
alt_text
}
}
}
}
}
`)</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 pass props to the News component
<code><news newlist="{data.allWordpressPost.edges}"></news></code><div><span>1</span></div>
Then you go to news.js to get props
<code></code>
<code>export default class News extends Component {
state = {
responsive: { 1024: { items: 4} },
} render() {
const { responsive} = this.state
const handleOnDragStart = (e) => e.preventDefault();
const{sliderNewsData} = this.props;
const elm = sliderNewsData.map((sliderItem,index) => {
return (
<link key="{index}" classname="carousel" ondragstart="{handleOnDragStart}" to="{sliderItem.node.slug}">
<img data-src="{sliderItem.node.featured_media.source_url}" alt="{sliderItem.node.featured_media.alt_text}" classname="lazyload"><h3>{sliderItem.node.title}</h3>
);
});
return (
<alicecarousel buttonsdisabled="{true}" responsive="{responsive}" items="{elm}" autoplayinterval="{5000}" autoplaydirection="ltr" autoplay="{true}" stopautoplayonhover="{true}" mousetrackingenabled="{true}"></alicecarousel>
)
}
}</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><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span>
</div>
And you reset gatsby you will see the slider has been rendered and the rest is the css for the news section. When you click through the news, you may get a 404 error. Because you and I have not created a page for posts yet. In the next post, I will talk more about how to automatically create pages for posts.
summary
Through this article, I have helped you to render news from WordPress to Gatsby. And probably also partly help you better understand when pulling data from WordPress through GraphQL. In the next article, I will guide you to make Page template and post template on Gatsby.
