Combine Build Time and Client Runtime Data in a Gatsby App
Gatsby is capable of generating content at build time as well as making calls to external services at runtime, you can make hybrid pages that take advantage of the benefits of static content as well as dynamic content. You can gather data ahead of time while the site builds so that when a user loads your page the data is already available. Then, for data that is of a more dynamic nature, you can request data from another service like an API using the classic React way
in this lesson, you will learn how to load a chunk of the pokemon data at build time and then load more at client runtime when the app is running
Instructor: [0:00] Right now, if we go to one of our Pokemons and change it, and hit publish, and go back to our website, and click on squirter, you can see the name is the same, even if we refresh. That's because the data we are loading, it's loaded at build time. If we stop our server, and run it again, you can see here, we have the new name.
[0:29] What if I want some fresh data without rebuilding my website? We can do that in Gatsby by loading the data at client runtime. You can also have a combination of build time data and runtime data. To do that, we would like to load this power field as live data. When we change it here, we can see it on our website.
[0:52] First thing, let's go to our SRC template in Pokemon. This is where we get the data. Let's install the Contentful SDK. In here, let's load the useState and useEffect. Inside of the component, we would have a power state and set power. To load the data, we're going to use useEffect and we will pass an empty array so we can run it only once.
[1:26] Let's also import createClient from the Contentful SDK. In here, we will create the client, so we will have space and access token. We can get this data from the Gatsby config already. This is our space ID, so we can have it here. The access token would be the same as processed.env.GatsbyContentful token.
[1:58] Great. Now we have the client and let's load the data. We want to load the data related to this Pokemon. Here we can get entries. We will look for the entry with this slug. This can be passed through the pageContext.slug. Let's make sure to add that when we create the template here. You can see here it's already queried.
[2:34] We have the client, we get the entry, and we require that the slug is equal to this slug. Now we will do then. Here, we will have the response. Using that response, we will set the power. For more response, response.items and then we will get the first item here. We will get fields and then power. Let's add it in here.
[3:08] Here we can type power and we will provide the power item. Let's save and run our server again. If we refresh, we have an error here that's because instead of slug, we need to do fields.slug and hit save. Let's refresh again.
[3:39] Here, we will also require a content type ID. We will add content type and the content type is Pokemon. You can see here we have the power source. Refresh, we have this. If we try to go here and change this to 8,000, publish it. Let's go here and refresh, you can see we have the new value.
[4:13] If we change this value here, and then publish, and then go back and refresh, you can see here it's still the old value because we need to rebuild for this part of the data.