Use Gatsby’s useStaticQuery React Hook to Query Custom Sourced Data for a Web App

Colby Fayock: [0:00] We're going to start off with a Gatsby site for our Pokedex. On our page, we have some placeholder data like Pokémon 1 and Pokémon 2. In our code, those are being added to the page using an unordered list and a few list elements.

[0:10] We also have a few styles just to make sure that they show up a little nicer. Our goal here is to create a Pokedex that'll dynamically add the Pokémon from the PokeAPI. We're already sourcing those nodes and creating a new one for every single Pokémon.

[0:21] In order to query our data, we're going to use Gatsby's useStaticQuery hook. With that hook, we can use GraphQL to query our data. To start, we're going to import { useStaticQuery, graphql } from 'gatsby'.

[0:31] Next, we're going to create a query. We're going to start with a constant called data and we're going to useStaticQuery for our hook. Inside that we're going to use the graphql template tag in order to start our query.

[0:41] At this point, we already created our query inside of the GraphQL explorer, so we can use that. First, I'm going to create the query and then paste in the allPokemon query. To test that out, I'm going to console.log out all my data.

[0:51] If I reload the page, I can see all my data being logged out including all those nodes for each Pokémon. This format though is a little tougher to use because we have our types with nested type names. We're going to clean that up a little bit.

[1:02] In our code, we're going to create a new constant called allPokemon. With that, we're going to use data.allPokemon, which we're going to use our nodes to create a map where we'll create a function to map each node. What I ultimately want is my name, type, and id.

[1:15] To start, I'm going to destructure that id from each node. Then I can create my return statement with that id. At this point, if I add a console.log for allPokemon, I can see the browser log out all my ids. Next, let's destructure our name, which we can add to our return statement. I also want to grab my types from each node.

[1:30] Next, we want to add those types of the return statement, but we don't want to just pass it through. We're going to create a map on those types. For each type, we're going to return the nested type property and its name. If we look in the browser, we can see we have our id, name, and our types.

[1:42] Now that we have our data formatted the way we want it, we can actually use it. Inside our unordered list, I'm going to create a map for allPokemon. I'm going to say for each pokemon, I want to create a new map function, where we'll ultimately return a list element.

[1:52] Now that we have that pokemon data, we can destructure the name, the id, and the types from each pokemon. With our name, we can use it for our title, and then we can add our types, but because it's an array, we want to create a string out of it. We're going to join(', '). Now we can get rid of those extra two list elements. Now when we reload the page, we can see each of our Pokémon with their types.

[2:11] What if we wanted to see each number of the Pokémon? We can first grab the index from the map. In front of the name, we can add that index, but because indexes start at , we need to add +1 to each index and let's also add a semicolon to delimit it.

[2:22] Finally, before we're done, let's add a key to each of those list elements so that React doesn't show a warning, "With no keys." Now if we reload the browser, we can see each Pokémon and its number.

[2:30] In review, we used Gatsby's useStaticQuery to create a GraphQL query for all of our Pokémon. With all of our data, we created a map for all of our Pokémon that made the data a little bit easier to use. With that data, we created a map, then we created a list element for each Pokémon. With that, we created a list with all of our custom source Pokémon.