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.