![getting-started-with-gatsby-js-part-3]()
In this tutorial you will be Learning
- Getting Data in Gatsby
- GraphQl
#### Requirements
- Node.js and NPM installed on your System
- Know basics of HTML, CSS and JavaScript, though not mandatory
#### Difficulty
- Intermediate
#### Tutorial Contents
We all know a website is made up of a lot of components and in that Data is one of the important component. Just think about Utopian.io without any posts, would it attract users, no it will not. So to make people come and enjoy any website by reading or doing something you need Data and this tutorial is about getting Data into Gatsby Site.
Now we talked about Data, what exactly is data. If I talked about Utopian.io, whatever posts we write are data because it is outside the Code base of Utopian thus its called a Data similarly whatever is outside of Gatsby Component are data. We will be bringing the data from outside and show it from the component whenever we need it. Data can be anywhere a file, database, through the API or even from the Wordpress.
Gatsby uses GraphQL to pull data from outside to the components. According to [GraphQL.org](GraphQL.org)
>GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
In this tutorial we will be building a page which looks like below which gives the details about the Utopian Moderators. Now since the data is outside of React Components we need to have some mechanism of getting it.
We will be using a simple File System where all my moderator JSON response is kept. So to do that we have to install `gatsby-source-filesystem` and `gatsby-transformer-json` and then change the gatsby-config.js as below :
```
module.exports = {
siteMetadata: {
title: 'Utopian Moderator',
},
plugins: ['gatsby-plugin-react-helmet', 'gatsby-transformer-json', 'gatsby-plugin-glamor',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'src',
path: 'Path of your file',
},
},
],
};
```
Now once done we have to write your GraphQL query. Whenever you start your Gatsby site you might have seen something like below where its written that GraphiQL is an in-browser IDE to explore site's data and schema which can be seen at http://localhost:8000/___graphql.
When you head over to the http://localhost:8000/___graphql you will see something like below where left hand side you will be writing the query and right hand side will give you the result of the query.
Since we already got teh data from Utopian API we will be writing the query as below where allSrcJson is the root entity and then we have edges and node. Inside node we get all the results of the moderators.
```
{
allSrcJson {
totalCount
edges {
node {
total
results {
account
total_paid_rewards
should_receive_rewards
total_moderated
percentage_total_rewards_moderators
supermoderator
referrer
}
}
}
}
}
```
which gives the result as
Now once we get the GraphQL query, now its time to create the page which we have shown earlier. So to include the query in your Gatsby we just have to write our query inside IndexQuery with graphql tag. This graphql tag is provided by the Gatsby where in Gatsby Build Process the queries are parsed before using. We are also using the result in our component as `data.allSrcJson.edges.map` why because nodes is an array of objects where we need to get an object from the entire lists. Since in our case we have defined total moderators inside the node itself we can get that value using `node.total`. No again the results is an array of objects so we need to map that too and get the values out of it.
```
import React from "react"
export default ({ data }) =>
Utopian Moderator
{data.allSrcJson.edges.map(({ node }) => (
Total Modeartors : {node.total}
{node.results.map(obj => {
if (obj) {
var value = Number(obj.percentage_total_rewards_moderators).toFixed(2);
return
{obj.account} Moderator modearted {obj.total_moderated} posts
who has Moderation Percentage of {value}% out of 100%
} else return null
})}
))}
export const query = graphql`
query IndexQuery {
allSrcJson {
totalCount
edges {
node {
total
results {
account
total_paid_rewards
should_receive_rewards
total_moderated
percentage_total_rewards_moderators
supermoderator
referrer
}
}
}
}
}
`;
```
#### Curriculum
- [Getting Started With Gatsby.js - Part 1](https://utopian.io/utopian-io/@codingdefined/getting-started-with-gatsby-js-part-1)
- [Getting Started With Gatsby.js - Part 2](https://utopian.io/utopian-io/@codingdefined/getting-started-with-gatsby-js-part-2)
Posted on Utopian.io - Rewarding Open Source Contributors
