Gatsbyjs - Getting data from external data sources




There are many ways you can do this. For this post, we will be using graphql approach.


Extend gatsby-node.js

Add the following code to gatsby-node.js

createPage({
path: `/allPokemon`,
component: require.resolve("./src/templates/all-pokemon.js"),
context: { allPokemon },
}

What is happening is that we are configuring any request that comes through /allPokemon, we will route this to a template called all-pokemon.js. Please make sure you have create following files in a template folder.

all-pokemon.js


import React from "react"
import { Link } from "gatsby"


export default ({ pageContext: { allPokemon } }) => (
<div style={{ width: 960, margin: "4rem auto" }}>
{allPokemon}
<h1></h1>
<h2>Abilities</h2>
<ul>
</ul>
    </div>
)


Start gatsby is you haven't and navigate to http://localhost:8000/allpokemon.



Comments

Popular posts from this blog

The specified initialization vector (IV) does not match the block size for this algorithm