Alt Text

Welcome to part-12 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

Let’s start by creating our Places component. Open your Places.js file and update as below. We are basically using the graphql query, which we created in GraphiQL in the previous part.

Places.jsPlaces.js

As we are getting the places, we are passing it to the PlaceList component. Let’s create a simple PlaceList component now.

PlaceListPlaceList

Next, we will show our Places component in our places.js page.

places.jsplaces.js

Let’s now update our PlaceList.js to show all the Places. Here we are using a Class based component and accessing the places passes from Places component, by this.props.places.

We are also having two local state of places and sortedPlaces. It gets updated by the this.props.places, once the components loads and updated by a React lifecycle componentDidMount()

After, that we are sorting over sortedPlaces and passing it’s value to an already created Place component.

PlaceList.jsPlaceList.js

Now, when we move to http://localhost:8000/places , it will show all the 22 places.

placesplaces

Next, we will create template to show when we go to a single place. Head over to your code editor and create a templates folder inside src folder. Create a file place-template.js inside it. Also, put the basic code in it.

templatestemplates

We are basically creating our pages programmatically through the templates. So, create a file gatsby-node.js in the root directory.

gatsby-node.jsgatsby-node.js

Let’s first create the query in GraphiQL, so head over to http://localhost:8000/___graphql and create the below query which gives us all the slugs.

slugsslugs

Now, head over to file gatsby-node.js and add the below content. Here, we are using async-await syntax to make the call. We are using the graphql query, we had created in the Graphiql.

Once we receive the data, we are looping over it and creating the pages with slug and the template.

graphqlgraphql

After, saving the file we need to restart the server. After the restart in your browser, goto any non-existing page and you will be shown the 404 page with all pages. We can see all the pages dynamically created.

All pagesAll pages

If we click on any of page, it will show us data from place-template.js

Dummy PlaceDummy Place

We will create the place-template.js in the next part. This completes part-12 of the series. You can find my code in my github account here.

Also, because of the continuous deployment it got successfully pushed to netlify site.

This post is also available on DEV.