# Rendering JSON with GraphQL in GatsbyJS

**URL:** <https://forum.freecodecamp.org/t/rendering-json-with-graphql-in-gatsbyjs/264064>\
**Category:** General\
**Created:** [March 10, 2019, 11:16pm UTC](https://forum.freecodecamp.org/t/rendering-json-with-graphql-in-gatsbyjs/264064 "2019-03-10T23:16:24Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jawaka72](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jawaka72/32/159028_2.png) [@jawaka72](https://forum.freecodecamp.org/u/jawaka72)\
**Post date:** [March 10, 2019, 11:16pm UTC](https://forum.freecodecamp.org/t/rendering-json-with-graphql-in-gatsbyjs/264064/1 "2019-03-10T23:16:24Z")

</div>

I’ve been stuck hours and I have no idea what’s wrong. I’m new to GraphQL and Gatsby.

I have a JSON that I’m trying to render. Each object should have its own url path. I’m able to query the data with GraphQL, set up CreatePages in my gatsby-node.js file and then query again in my template file, but for some reason I’m only getting `null` in the template.

I’m pretty sure I’m using gatsby-plugin-transformer-json too. I’m at a loss right now. Any help is much appreciated.

gatsby-node.js

```auto
/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// You can delete this file if you're not using it
const path = require('path');

exports.createPages = ({actions, graphql}) => {
	const { createPage } = actions;
	const postTemplate = path.resolve(`src/templates/post.js`);
	const projectTemplate = path.resolve(`src/templates/project.js`);

	return graphql(`{
		allProjectsJson {
		    edges {
		      node {
		        id
		        name
		        description
		        path
		      }
		    }
		  }
		allMarkdownRemark {
			edges {
				node {
					html
					id
					frontmatter {
						path
						title
						date
					}
				}
			}
		}
	}`)
	.then(res => {
		if(res.errors) {
			return Promise.reject(res.errors);
		}
		// blogs
		res.data.allMarkdownRemark.edges.forEach(({node}) => {
			createPage({
				path: node.frontmatter.path,
				component: postTemplate
			})
		})
		// projects
		res.data.allProjectsJson.edges.forEach(({node}) => {
			createPage({
				path: node.path,
				component: projectTemplate
			})
		})
	})
}

```

templates/project.js

```auto
import React from 'react';
import { graphql } from 'gatsby'
import Layout from "../components/layout"
// import Helmet from 'react-helmet';

export default function Project({data}) {
	const { projectsJson: project } = data;
	console.log(data)
	return (
		<Layout>
			<div>
				<h1>Projects!!!</h1>
				<p>One single</p>
			</div>
		</Layout>
	);
}

export const projectQuery = graphql`
  query ProjectByPath($path: String!) {
  	projectsJson(path: { eq: $path }) {
  		name
  		path
  		description
  	}
  }
`

```

---

<div class="post-metadata">

**Author:** ![scottalan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/scottalan/32/123773_2.png) [@scottalan](https://forum.freecodecamp.org/u/scottalan)\
**Post date:** [September 9, 2019, 7:36am UTC](https://forum.freecodecamp.org/t/rendering-json-with-graphql-in-gatsbyjs/264064/2 "2019-09-09T07:36:02Z")

</div>

Thought I’d provide a solution that worked for me in case anyone else comes across this post.

Given a json file (all-projects.json) with the following contents:

```auto
[
  {
    "projects": [
      {
        "id": 1,
        "name": "My Project 1",
        "description": "My description 1",
        "path": "#"
      },
      {
        "id": 2,
        "name": "My Project 2",
        "description": "My description 2",
        "path": "#"
      }
    ]
  }
]

```

Formatting the json this way seems a lot cleaner too me and you don’t have to deal with edges \> node…

This is the query:

```auto
const data = useStaticQuery(
    graphql`
      query ProjectsQuery {
        allProjectsJson {
          projects {
            id
            name
            description
            path
          }
        }
      }
    `
  );

const { projects } = data.allProjectsJson;

```

Now you can iterate over your projects, e.g.,

```auto
projects.map(({id, name, description, path}) => {
  // Logic here
});

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:28am UTC](https://forum.freecodecamp.org/t/rendering-json-with-graphql-in-gatsbyjs/264064/3 "2021-01-17T09:28:25Z")

</div>

Closed on January 17, 2021, 9:28am UTC