Intermediate Gatsby

My name is Sidd, I live in India, I work at Gatsby Inc. Today's workshop is going to be about getting started with Gatsby and then intermediate Gatsby. Since a lot of you have never used Gatsby before, we'll spend more time doing stuff, as opposed to jumping really quickly, but we will get to some advanced topics before the workshop ends, as promised. And I hope everyone can hear me loud and clear.

Alright, so let's get started. The first thing we'd want to do is... I'm gonna quickly share my screen. The first thing you'd want to do is, in case you haven't, this is the Gatsby website. It's GatsbyJS.com, right? There's a ton of stuff there, but what you're going to want to do is, if you haven't seen the Gatsby tutorial before, that's a nice place to quickly check out. We'll walk through the site as we do things, so that you can always know where you can go back to learn more. I'll try to point you to specific portions on the website as well. But yeah, in case you already have Node.js set up... A lot of you are React devs, so I'm presuming most of you have Node.js set up.

If you have Node.js set up, go ahead and create a new directory. And go ahead and run npm init gatsby When you run this, this will give you a wizard to create a new Gatsby site, as you can see on my screen. It's asking me what I would like to name my site, so I'm going to call this React Summit Workshop. It's gonna generate a name of a directory, I can change that if I want. I'll go with React Summit Workshop for now. It's asking me if I am gonna be using a CMS. So I can pick between a couple of the ones that are already in this wizard. But for now, I'll just go ahead and say no. And I'll add one later. I'd recommend all of you do the same, we'll get to that in a bit. Adding a CMS. So let's click no. And then it's asking us if we'd like to use a styling system. If you've mostly React projects, you'll probably use Style Components or Emotion or one of these at some point. Again, we'll just go no for now. Let's keep things simple to start with. We have a couple of other options to do some other stuff. We're gonna not select any of them. Just hit done. Finally hit yes. And that's to set up a new Gatsby site locally for you. So let's give that a minute and let's check out what Gatsby is all about. All right. So it looks like the site has been generated by this lovely wizard. And the site is an directory called React Summit Workshop. I just opened it directly right now in VS Code. Let's quickly take a look at what Gatsby is generated for us. If you've never used Gatsby before, think of it as an alternative to create React app, right? All of you on this call, most of you, if I remember correctly, have used React before. So if you've used React, you've probably seen create React app, which is a way to quickly generate a React site from scratch, right? It gives you everything, including a webpack config and helpful scripts in your package JSON to run your site, to build it, to run it locally for development, or to build production assets. Think of Gatsby as an alternative to that for now, right? When you run npm init gatsby, that creates a Gatsby site from scratch, right? And it creates, as you've seen, a directory for us. That directory has a bunch of things, let's take a look at what those things are. You'll see a package JSON, right? You'll see a file called Gatsby config, right? Right now this file is largely empty, it just has a site metadata key which has a title, and this title is the title of our Gatsby site. If you remember in the beginning, we typed in React Summit Workshop, so that's what it said. But if you'd like to change that, this is where you would change the title of your website. And there's an idea called plugins, and that's empty right now. We'll talk about Gatsby plugins in a few minutes, but for now let's start with nothing. Let's start with an empty site. Also, the generator created this directory called source for us, and source has two other subdirectories, one called pages, one called images. Pages as you can see has two files, one is called 404.js, and the other one is called index.js, and finally there's node modules that got installed as well.

Now that we know what's in here, the first thing we're going to want to do is, in this directory, if you have yarn installed, go ahead and type in what I'm typing, if you don't have yarn installed, you can type npm run instead. I'm going to say yarn gatsby-doubleup. That's probably because I don't have global gatsby installed, so instead I'm just going to say yarn develop and that's going to run. Interesting, command develop, not found, okay. Let's try npm develop, that doesn't work either, oh I'm in the wrong directory, that would explain it. Alright, so now I'm in the right directory and now I'm going to run yarn gatsby-develop. And when you run that, you see that the gatsby CLI starts up, there's a bunch of colourful text on our screen now. And what this has done for us is it has set up Gatsby and set up a bunch of cool things including GraphQL. Primarily, it is also running a webpack-dev server. And this server is going to host our site on this URL that it pastes here, at local-host 8000, and as we make changes, this server is going to stay up and it's going to hot reload and so on.

The first thing we are going to do is let's visit this URL to see what our sample site looks like. There you go, we have a page that says, congratulations you just made a Gatsby site. And it links to some pages and documentation. Also you can go ahead, it tells us where this page is, which is source-pages-index.js, where you'd like to change, I mean, you'd probably want to change this, right, because this is not the site you're looking at building. But, this is what Gatsby generates for you from scratch. And, before we make any changes, let's learn one more command, if you'd like to build production assets for this site, instead of develop you'd want to run yarn-gatsby-build, and what that would do is that would run gatsby-cli, like the last time. But, this time, instead of serving it at a URL, what it's doing is, it's built our site for us, right. And the place where it builds that is in this public directory. And that's where all the assets for the site are. So, Gatsby is like create-react-app in the sense that it lets you run develop and lets you run build, but just think about it as something with a ton of more magic, right. It does a lot more than just that. And we'll see what those things are as we keep moving, but for now the things that we care most about are running develop and building our site, or running build. And finally, once you've built the site, you can run Yarn Gatsby serve, which will let you serve your production assets, and that's at localhost 9000. So, let's go ahead and take a look at what that looks like. Okay. I think I entered the wrong URL. Let me try that again. There you go. So, that's just the production version of the same site that we just saw a few seconds ago, right. So, yeah, at this point this is how you would run a development server and this is how you would start your site. You're probably wondering what the whole point of Gatsby is, right. So, let's find out what that is. So, I'm going to open the same site in Chrome, right, and this is the production site. And I'm going to go ahead and what I'm going to do is I'm going to disable JavaScript, right. And the way to disable JavaScript in Chrome, if you haven't done this before, is you can open, you know, your console. If you're on a Mac, command option J, and then you can run command shift P, if I recall correctly, and type in disable JavaScript. So now, I've disabled JavaScript, and I'm going to hit refresh. And you see that I can still see the same markup.

I can still see congratulations you just made a Gatsby site, and so on, right. And this is the first difference that Gatsby has in comparison to something like Create React app. Because if you've used Create React app before, and if you run build and then disable JavaScript, you see nothing. It's just a blank screen. And it says, please enable JavaScript as your site, right. And with Gatsby, the difference is that when we run a Gatsby build, we run what's otherwise called SSR, which is server-side rendering, but we run SSR at build time, right. So our site works with or without JavaScript. The same way. You progressively enhance it with JavaScript. But the cool part is that if you have JavaScript enabled, it's a React site amongst other things, right. So that's the first thing about Gatsby that's cool in case you haven't seen this before or in case you haven't known this. To confirm that, if we take a look at elements, you'll see that there's a div called Gatsby and there's a couple of containers, but within it is all the markup from the site that we can see on our page right now, right, and this is the SSR that I just mentioned. All right, so now that we've seen that, now that we know that's what Gatsby is about, let's take a look at what it would take to actually change this from a sample site. So I've gone ahead and enabled JavaScript again and I'm gonna go back, I'm gonna hit control c to close this, and I'm gonna run yarn gatsby develop, because we want to edit the site and we don't want to keep restarting this server, so let's start from... You know let's run the development server. So now that I've run it, I'm gonna go back here open localhost 8000 and there you go, we're back to the same site and the first thing we're going to do is, let's open VS Code, all right, and let me make a change. So you noticed that I said that there were two files in source pages, right, one was index.js and the other was 404.js and you also noticed that I hit localhost 8000 without any URL but it just magically served the site. So what it's serving right now is it's serving the one that was an index, right, that's a convention in Gatsby. If you have a file called index.js in a directory called source pages, that's going to be the home page on your site, right. So let's take a look at the markup in index. If you take a look at this you'll notice that it's just plain React, right. There's an import star is react from react at the top and then there's a bunch of styles. We have some objects with CSS in them and what we've done is we also have another constant called links, it's an array of some links if you want to render later. And then finally we have markup, we have a component called index.ps. This is a functional component, it returns a bunch of stuff and we export that as a default, right. So if you have a file in source pages and if it's called index.js, right, you can export a react component from that file and whatever react component you export is the one that will get rendered on that page. So let's go ahead and change this a tad to see if you know whether that works. I'm going to change this to, welcome to react summit, right? And I'm going to hit command S to save and you'll see that once I hit save, you know, that that's sort of hot reloaded and like everything that you're familiar with, with create, react, app and the ecosystem in general works the same way. So let's, let's make a couple of other changes quickly. Let's delete a bunch of the stuff cause we don't want any of this anymore. I just make this a simple old. We keep the age one, right? And I can never seem to write that. Okay, there you go. So we keep the age one and you can see that we still see that. I'm going to go ahead and delete all the other stuff. Right? And it says failed to compile. And the reason it says failed to compile is, Oh look, we don't have these constants, right? I just deleted them. So this is, this is this is a, this is a good segue into, into this lovely little model This is an error model in Gatsby V3. If you ran NPM in Gatsby like me, you've got a site spun up with Gatsby V3. If you've never used Gatsby before, Gatsby had V1 and then V2. And very recently, about a little over a month ago, we released Gatsby V3. V3 has a couple of cool things under the hood, but one of them happens to be this really pretty looking model, which tells us the source of our error and also tells us what the error is and tells us that it failed to compile in that file. And now that it's telling us that the error is that you don't have create styles and heading styles, I'm gonna go back and fix that. So I'm gonna go back and remove this. I'm also gonna go back and remove this and hit save. And you'll see that the model's gone, right? So that's one of the things that Gatsby gives you out of the hood, like from the, out of the box. And yeah, it's just a React component. So like I said previously, if you, every Gatsby site you build is a React site. Now let's try to create another page. So we saw index.js, right? And we see that we have another page in there already. It's called 404.js. By the way, that is also a special page just like index. If I type in some arbitrary stuff and open it, we'll see that Gatsby server is a page called Gatsby Development 404 page. This is by the way not the page of 404.js. This is a special page that Gatsby shows in development and be able to help you and tell you which pages you have. But if I click on preview custom 404 page, that's the page that was set up in 404.js. So you'll notice that it's not found with the emoticon and this is a 404 page. Like index, this is also a special page in the sense that if you have a file called 404.js in the source pages directory, that is the page that will be displayed when someone 404s is on your site. Cool now that we have those let's create a page of our own. Let's go ahead and create a new one. So the way I'm going to do that is I'm going to create a new file in that pages directory and I'm going to call it simply hello.js and I'm thinking about the name, naming is hard, so in hello.js let's write as we would write any React board. I'm going to say import star as React from React and then I'm going to say export default hello and hello is the default function hello and in that function let me go ahead and return some arbitrary markup. I'm going to say an h1 in there and say hello folks. I'm going to save that and now if I go to localhost eight thousand and slash hello, you will see that we can see hello folks. What we've done now is that we've created a page. In Gatsby if you ever want to create a page the way you do that is by creating a file in the source pages directory and whatever the name is of the file is going to be the URL at which the file will be available. And as we've seen the file just needs to have an exported component, a default export, which is a React component and whatever is in that component is what gets rendered. When you visit that URL. That's how you create pages. At this point do we have any questions so far? Is everybody with me? Let's just spend 30 seconds. Yeah we're good. We're good? All right. Anyone have any questions? Anyone having trouble running any of this or hitting any error or not being able to do this? Everybody good? Okay. It looks like everyone's good. Sorry, Susan. Is there anything else you want to add? Yeah, just all fine. Just this one. Okay. Awesome. We have someone in chat. Rafael also says all good. So that's great. Fantastic. So now let's continue. We've seen how to create a simple page in Gatsby. It's a simple React component. It's a file name, but often you're going to want to do more than that. You don't want to just create a page called hello. is going to want to probably do is have some kind of URL or maybe have some kind of URL as dynamic. You're going to want to, say, have a page called, maybe you're building a sneaker store and you're going to have a page called sneaker slash ID, and ID happens to be the name of the ID of that specific sneaker page.

So let's try to do that. Let's try to do what it would take to actually create a page like that. Now, the way you do that is actually similar to what we just did with hello. You'd still put it in the file name. And you would use what we call the route API.

All right, and we have, as you can see, is this nice little search on this page. And there you go. We see the, so it's called the File System Route API. And it appears that we are on some other URL that we don't care for right now. File System Route API. This is the one that we care about. So, there you go. We have hit what looks like the release notes. Are we on the release notes? Yeah, there you go. And if I click on that. Okay, there you go. So see full documentation. Finally, we made it. So this is the URL I was trying to find all this while. So I will share it in chat in case, so that all of you don't have to do the same thing that I did, which is bang my head around search. Anyway, that's the URL. This API is something that we recently introduced in the Gatsby API. Before this API, it was super complicated to do this. After this API, it's a lot simpler, all right? So we're going to go ahead and try to use this API, okay?

And you've probably seen this if you're coming from Rails or any other, a couple of ecosystems do stuff like this, right? You've probably seen this in the past somewhere. What this basically lets you do is that it lets you use variables in your finding. You're able to say, hey, instead of, like, calling my page hello.js, I'm going to just say I want it to be the name of, you know, like the sneaker, like sneaker.name or something like that, like I said previously, right? And that's how you use the file system route API.

And I just realized as I started saying this, that we haven't you know, we don't really have any notion of data yet. So it's it's like where are our sneakers going to come from, right? So let's take a quick detour before we talk about the file system route API. Let's talk about data in Gatsby, because that's going to set us up for stuff like this. Right. Now, you've used React before. You've probably consumed like a ton of like these new headless CMSs. You've called randomly APIs, you build your own API. And you've consumed data from multiple different places. You know how it's done. You've used Fetch before and you've done a bunch of stuff in your React code with Gatsby. All of this data can be fetched similarly. Like you can do the same things you can do in React. However, remember that all of that is happening at build time in Gatsby not at run time as in React. Right. Your data isn't being fetched when the user visits the page. Instead, it's being fetched when the site is built. And that would be really complicated to do without any help. And that help in Gatsby land is GraphQL. All right. If you've never used GraphQL before, it's actually pretty simple. I'm going to show you what it looks like right now. And the way I'm going to show you is I'm going to go into localhost 8000 slash underscore underscore GraphQL. The way you spell GraphQL is G-R-A-P-H-Q-L. And you've seen that I now have this fancy little editor with some sample text that I very quickly deleted, but ignored that. And this editor is an interactive editor to help you write GraphQL. GraphQL is called GraphQL because it's graph and QL stands for query language. So it's a query language, lets you query for data from some arbitrary source. The way it looks is actually a lot like json. So let's write our first GraphQL query. Remember back in the beginning of a little while ago we spoke about the name of the site and we said that in Gatsby config we have this key called site metadata and this key called title where I set the name of the site. Let's write a query for that. What if you want to render a page saying, hey this website is called blah, how are you going to get that data. Let's write a query for that. A query for that would look like this. You would say query, within that you would then open an opening brace, inside that query we're going to say site, within site we're going to say site metadata, within site metadata I'm going to say title. Now as I type that in you probably noticed a couple of things. One is, when I said it looks just like json I kind of lied. It does look like json, but there's something missing. In json you typically have a key and a value. In GraphQL you have the same thing, but without all the values, it's just the keys. You're just asking for the keys and the value is going to be in the result that you get. It looks similar, but without the part where you have a colon and actually a value to every key. It's almost like if you took json and if you just removed all the values and all the colons that's what GraphQL would look like. And this right here constitutes a GraphQL query. Another thing you probably noticed is that I got this really helpful autocomplete when I started typing. I said DI, and it gave me title. And that's a feature of GraphiQL, which is this editor. It gives you AutoComplete, and that's something that's really cool about GraphQL. That's one of my favorite things, right? You're able to generate really helpful AutoComplete and other things for DX, which makes it really simple to consume all of this stuff data. But anyway, we'll talk about that as we go forward. For now, let's run our query. Now that we've written our first GraphQL query, we're going to want to run it. And the way to run it is this helpful little button at the top, that play button. I'm going to click on that, and you see that I just got back some data. And that data happens to now be JSON, right? And the cool thing is, it's JSON that looks exactly like the query that we wrote. We wrote a query. We got back the data in the exact same shape. The only difference is that this time it actually has values, it's not just keys. So if you've never used GraphQL before, that's what GraphQL is. This is GraphQL. This is how you write a GraphQL query. That's how you get back data. And in case you have used GraphQL before, Gatsby comes with GraphQL support out of the box, right? I didn't have to add anything or build anything special for this to work. It just worked, right, as we saw. All we did is we ran Gatsby develop. We have this running and then we visited localhost 8000 underscore, underscore GraphQL. So what Gatsby does is that it lets you use all of that data from multiple different sources via GraphQL, okay? Now that we've written all of this code, let's actually try to use this in our site as we previously mentioned. What I'm gonna do is I'm gonna go ahead and copy this, right? I'm gonna copy this entire query. We're gonna go back to VS code. Let's go back to our hello page, all right? And I'm gonna say, hello, folks. And let me just slap on a div. You know what, let's not slap on a div, let's use main because we write good HTML in this job. So we're gonna say main, and within the main, I'm gonna put in an h1. Under the h1, I'm gonna add in a helpful little paragraph, and within the paragraph, I'm gonna want to say, this website is called, you know, something. So we're gonna want to put in the name of the website. And now I wanna somehow use the query that we just wrote in GraphiQL, and I'm gonna want to fetch this data. Now, the way to do that in Gatsby, and this is your first GraphQL query in Gatsby is, remember when we spoke about exporting a default function and that function was the react component. Similarly, in every page, you can do another export. And what that export is going to be is that export is going to be a const called query. And that query is going to be a GraphQL query. We're gonna want to import GraphQL. This is the GraphQL tag and we're gonna want to import it from Gatsby. And we're gonna wanna stick it into that thingy there. So I'm gonna say import GraphQL from Gatsby. And within this GraphQL tag, I'm gonna copy and paste our GraphQL. All right? So now that I've pasted that in, let's see if our site still works. Let's go ahead and visit localhost 8000.

Let's go ahead and visit localhost 8000. Hello. Everything is still working so that's good we didn't break anything. Now that everything is working, let's go ahead in our React component. Now you've used React before so you know what props and state are. In case you don't, props and React are props that are passed into your component by its parent and in this case, the parent is Gatsby itself. One of the props that Gatsby injects into every React component is this prop called data. So what I'm gonna do is I'm gonna say and I'm gonna probably wanna, yeah, there you go, that's correct. So I'm gonna wanna say data. I'm gonna destructure that from props and for now let's just log it and see what the data is. So now that I've added that log and let me open the console here, let me hit refresh and you'll see that we've logged data and that data has, oh, look at that, it's got site and site metadata and then it's got title, right? So what we saw previously in GraphQL when we ran this query, this is what's being passed in by Gatsby to the props in your React site and this is super cool because now you can just write queries for data in your Gatsby site and consume them as props. You don't need to write all of that code to fetch it and fetch it from multiple APIs and have error handling and all that, you don't need any of that anymore because all of this is going to be done in build time and it's gonna be injected into your page, right? All right, so before I move forward, let's actually use that data, we just logged it. So I'm gonna say this website is called data. What is the key? It's site. So you notice that I'm going back to the browser to take a look, but guess what? It's GraphQL. That the query's right here, so I don't need to go back, I can just say, oh look, I know the shape now, it's gonna come in as site.siteMetadata.typed because that's what my query looks like. And finally, I'm gonna wanna wrap that in braces because otherwise React won't know that it's a dynamic value. So now that I've put that in, let's go back and take a look at our site and see if that works. So I hit refresh, I actually didn't need to. The HMR already ran and it had already updated, but as you can see, that worked. It says, hello folks, this website is called React Summit Workshop. Isn't that wonderful? Now if I go back in Gatsby config, rename this and say React Summit Gatsby Workshop and hit save, you'll notice that that worked too. It just says this website is called React Summit Gatsby Workshop. And I didn't have to make any other change. I was able to update data and Gatsby realized that some data got updated and it went ahead and reran that query and put in the right props all over the place. Isn't that cool? So that's one of the other things that Gatsby does. It let's you have SSR at build time and also lets you consume data from an inbuilt GraphQL layer.

And now that we know how data works in Gatsby, we're gonna go back from where we segwayed and try to build more dynamic pages. And this is a good point for us to add our first plugin, because often you're not going to want to just put all the data in here in this JS file, right? You're going to want to get data from some real source. So what I'm going to do now is I'm gonna add a plugin for markdown, right? If you've used Gatsby, a couple of you have tried building a Gatsby blog. The thing that you typically do is, you have a blog, you have markdown, you have some pages, and then with those, whatever data you have in that markdown file, you just want to render it, right? So we're going to do a similar thing.

And as you follow me along, let's also open the Gatsby docs. In case you want to go back and look at the status, I'm going to search for Gatsby docs or just Gatsby markdown documentation. And there you go. It says, Gatsby docs adding markdown pages. Isn't that helpful? So what does it tell us? How do we do this? The first thing it tells us is we've got to install a plugin, right? And this plugin's called Gatsby-Source-FileSystem. Now I'm going to go ahead and run yarn add gatsbysource-file-system. And as one might guess from the name, it's called Gatsby-Source-FileSystem. Every package that has Gatsby source in its name is typically a source plugin, that's your source data from some place, right? In this case, that place happens to be the file system. And I'm also going to add one more plugin. This is called Gatsby-Transformer-Remark. And of course this name isn't as obvious, but it doesn't have source in it cause it doesn't let you exactly source any data because that's already happening from the file system, it lets you transform data, right? And we'll understand what that means in a bit, but for now just ignore that. Go ahead and also install this NPM package called Gatsby-Transformer-Remark, all right? You saw that that got installed and with it, it installed, I don't know, like a million dependencies. Okay, 48 new dependencies, that's a lot. Okay, cool, that's fine. So now that we have these two things installed.

Another thing we're gonna wanna do is actually add them to that plugins array. Remember, we saw that plugins array was empty and I started typing, I'm gonna continue typing now and I'm gonna say, I want Gatsby-source-file-system, okay? And every time you add a plugin in Gatsby, this is how you add it. You just add a string with, with its name. But often, and you'll see this in the docs as well, plugins like this one are going to want to, have some kind of options or some kind of config, right? In this case, that config happens to be where in the file system, right? It's not gonna know where in your file system to pick up stuff from. So in that case, when you have to pass in options to a plugin, the way you put it in this array is you create an object and you have some, and you type in resolve. And that's the name of the plugin. Okay? And type in options and that, those are the options you're gonna want to pass it, right? So there's two ways of adding plugins in this array. You can either have objects or you can have plain strings, right? And you can mix both of them, by the way. You can have one that's just an object. That one that's an object with options and you can have one that's just a string. But anyway, we'll come back to that.

Let's go back into our options and add some options. So we're gonna look at the docs and the docs say that you can have a path to where you're in the file system you'd like to get stuff from. And you'll see that that's some source directory, some directory in your source. So what I'm gonna do is I'm gonna go ahead and create a directory. And this time I'm not gonna put it in source because I like putting it top level because it doesn't make sense to me that it's already a source code. So I'm gonna go ahead and create a directory in here and call it markdown, okay? And in markdown, I'm gonna create a file. I'm gonna call it hello-world.md. Okay, and I see that I put it in the wrong place. Let me just quickly move that into markdown. Okay, now that it's inside markdown, in options, the options called path, I'm gonna set the path to underscore underscore D I R N A M E. D I R N A M E, DIRNAME is the current directory that we're in right now, so I'm gonna use that variable. Within that, I'm gonna say markdown, because that's the directory we just created with a markdown file. So this is the option I'm gonna pass in. Now the plugin will know that that is where in the file system you're gonna want to fetch stuff from. And that's it, I'm gonna run Gatsby again and see what happens when I run Gatsby. So let's run Yarn Gatsby develop. And this time, let's say if we broke things, or if it runs, it looks like nothing's broken yet. Everything seems to work fine, okay, that's good. Now that we have this, let's go back and open graphical again. Remember we said that, you know, for the folks that just joined, we're currently talking about Gatsby and how Gatsby has a GraphQL data layer inbuilt. And we just added a plugin called Gatsby Source Filesystem. Let's hit refresh on this and take a look at the stuff on the left and see if any of that has changed, all right? So I hit refresh and you'll notice that we now have... Has anything changed? Doesn't look like anything has changed, has it? Okay, nothing has changed yet, but we do have, we should have stuff from Gatsby Source File System, all right? It doesn't look like we have stuff from it yet, but we're going to write a query to confirm that. We're going to say all file, okay? And we're going to say edges, and then within that we're going to query for, I think it's called node if I recall correctly, yeah. And within that I'm going to say name. You'll notice that, oh, look, it's actually got hello world, right? So that's what that all file is the collection that came from Gatsby Source Files system, right? Every plugin, every source plugin creates a collection of all the data that it has, right? And you can query for that collection in GraphQL like this, you can say all file, and usually the convention is all followed by the name of what that plugin is sourcing. In this case it happens to be files. That's why it's all file. If it comes from WordPress, it might be all WordPress pages or the sort, right? So that's what typically the convention is, but you don't have to remember any of that. You can just look it up as you see in graphic, right? And that's again, one of the other cool things about GraphQL. Anyway, so now that I've written this query and I have edges and I have node and I have name, you'll see that I've gotten that data back and name has hello world. But this isn't really helpful by itself because I mean, often you have a file, you don't want to just get the name of the file and render it that's kind of pointless, right? You're going to want to do some stuff with the contents of that file. So let's go back and actually add some contents because last one I remember we didn't really write any markdown, we just created a file. So I'm going to say, hello world, okay. And since this is markdown, I can add two of those little things there to create a H2, isn't it? So I'm going to add two of those and now this is markdown. And I'm going to run this query again. And this time I'm going to try to get some other keys. Now, if you'd like to do what I just did, the way to get auto-complete without typing anything is Control plus Space. And that opens your auto-complete thingy. Now that I've opened that, let's quickly go through all of them and see what other options we have. Let's see what else we can fetch, right? And we have a bunch of stuff. One of them happens to be the source instant name, there's absolute path, which is the path to the file. And then there's, we're trying to look for something that will get us the content, right? Because we kind of want what's in the file. So let's take a look at what those keys can be. We have a key called Children. I don't see anything else interesting, but we have a key called Children. So let's take a look at what you have inside Children. So you'll see that we have inside Children, we have ID which could be, what the children are to that node. We see that there's none of them. And we also don't particularly see anything else that will give us the source for this node. So at this point, we don't really know how to get that data. We know that there is a file called this, and we know that the file possibly has something, but we're not sure how to actually use it. And the thing that's interesting here is that, remember this name of this type, this type is called File as we saw previously. And we can confirm that by typing in type name. As you can see, it's file. It is a file but Gatsby doesn't really know what to do with the file, right? Because it doesn't understand Markdown. So it doesn't really know how to get data from that file. We see someone, so doesn't appear on, all right, so we have a question in chat that I'm going to quickly answer. It seems that GraphQL queries always accesses, always accesses nodes through edges. Why not accessing the nodes directly? That's a great question by the way. You can either, you can do both. The thing is that edges is a GraphQL convention, right? In GraphQL land. In Gatsby land we try to make things easier for you by just giving you nodes directly. If you see, both work. Like I just typed both of them and hit enter and both work just fine. I prefer using edges because it's a convention that's been there and it's been around forever and it's just easier because you can move your GraphQL queries around and you know, maybe other systems will also understand it. But yeah, totally feel free to use either. I hope that answers your question. See something more in chat. Cool, thanks. All right, sweet. Cool, so let's go back to where we were. If you were talking about this query, we were talking about this type, right? This node, this unit of data. And we know that the type is a file but we don't know how to do anything with it. And that's why we have transformer plugins, right? Remember we added another plugin and it was called transformer remark and I said I would talk about what it's transforming. Well what it's transforming is that it's gonna take a look at that file and say, Hey, it's a dot MD file. I know how to read that data and then it's gonna transform it and actually give you that data. So let's see what that looks like. I'm gonna, we already installed the plugin but we didn't add it to Gatsby config.

So I'm gonna do that. I gonna go ahead and say Gatsby transformer remark and now that I've added Gatsby transformer remark, remember how I said you could have objects or strings in case you missed that transformer remark in this case, we don't really want to give it any options. We just wanna say, Hey, run and do your thing, we don't have any options for you. So I'm just gonna put a string. In case I had options, I would put it in an object like last time. You can do either and you can mix them. Anyways, now that I've done this, I'm going to restart Gatsby. So I'm gonna like kill it and then say, yarn gatsby develop again, right? I added a plug-in so I wanted to restart it. By the way, this isn't necessary. The developed process actually does restart automatically if it needs to and does a bunch of stuff. I'm old fashion, I don't trust it. I kill it, it's mostly just a muscle memory, but often you're not going to need to even do that. So anyway, now that I've done that already.

Let's go back into the graph, graphical again and see if anything changed this time. Let's see if anything happened by adding that, right? I'm gonna hit refresh. Let's take a look at the stuff on the left and see if that changed. So you'll see that we have, you'll see that it did change. We have a new thing and it's called all markdown remark. And that wasn't there the last time. Remember how I said collections in GraphQL and Gatsby usually has a convention where they start with all and then there's a name of the type. And remember how our plugin was called remark, Transformer Remark? So this is a collection that came from that plugin. All right, and now let's again, write our query. This time we're going to say nodes, like one of our folks pointed out. And inside nodes, I'm gonna say give me name. Do we have a name? No, we don't have a name. We have front matter. Okay, do we have anything front matter? We got title apparently. So let's go ahead and get that. And let's hit Command plus Enter to execute our query. You'll see that title came out empty because, you know, we never added one. So let's change that. Let's go back to our file and add a title. In Markdown by the way, there's this thing called front matter. If you haven't seen this before, what front matter looks like is, it's a section in your Markdown at the top. And in that section, you can put, you know, you can put like some values that aren't part of the Markdown, right. And I searched for front matter in Markdown, it turns out the Gatsby page was... The Gatsby docs was the first result. But anyway, the way that works is that you're gonna want to put a section at the front, at the top, that's why it's called front matter. And you're gonna put that section within dashes, you typically need three. Within that you can have arbitrary keys. It sort of serves like metadata for that Markdown file. So I'm gonna add one of those. And inside that I'm gonna say title. I'm gonna say title is, hello world, which is the same as the H two, okay. I'm gonna change this world and make it like, I'm gonna say this, welcome to our first post. And now that I've hit save, I'm gonna go back into graphical again. Let's read on this query. There you go, this time we have a title. It says hello world, because we just added it. Now that we have a title, let's query for other stuff. So we have front matter, now inside of front matter we have, as you can see a lot of other stuff. And this is actually really helpful, because now this is letting us consume our file. So the first thing we're gonna wanna look at is say, let's look at... Let's look at excerpt. This is a key called excerpt somewhere. There you go, excerpt. Let's see what that gives us. So I hit command enter, and excerpt says welcome to our first post. And that's super cool, because that just basically gave us some of the contents of this markdown file. And this is how you fetch data from a file system or from any other source and how you transform it, right? What have we done so far? We've created a markdown file. We managed to put some markdown in it. We managed to get that markdown out. Now, what we're gonna do is we're gonna go back into our hello page, and we're gonna actually render the page in here from this markdown, okay? Now, you probably don't want to just render an excerpt. In our case, our post happens to be really short, which is why the excerpt is the same as the entire post. But I'm gonna add some more text in here. I recall lorem 10 working. I think that was probably an extension on VS code. But since it doesn't work anymore apparently, I wanna search for lorem, generate some lorem ipsum. Just gonna copy. How much do we want? Okay, let's take standard lorem ipsum text posted in our markdown file. And if I hit, if I rerun our query in Chrome, you'll see that the excerpt is just a little bit, and then it's got an allelises. So that's what an excerpt is, right? It's just an ex, I mean, it's a part of the document, not the entire document. But in this case, we wanna render the entire document. So the way you'd get that is you type in, you can say raw markdown body, but we don't usually want to render the markdown itself. We wanna render what that markdown should resemble in HTML. So we gonna get HTML, right? We hit enter, and there you go, you got an H2, right? And we got a paragraph right after that. Now this is super helpful, because this is the stuff we actually want to render in that page, okay? So now that we have all of this, let's get rid of excerpt. Let me copy this query, let's go back into VS code, okay? And let's render all of this in our hello.js page. So in our query previously, where we had site and site metadata and title, I'm gonna add this stuff in. Okay, in graphql, as you can see, your query doesn't have to be limited to just one sort of section, you can sort of mix stuff up, right? You can have multiple keys in here. In this case, this is complaining because my braces are all wrong, but if I remove that, and hit save, like, this looks correct. So you have site, and then you have all-markdown remark. You can query like multiple stuff within the same query, okay? So now that I've added that in there, let's go ahead and, we already have a log, so let's take a look at what our log says. So I'm gonna go here, hit refresh, we have data, this time we have all-markdown remark, we have nodes, and then you go and look at that. We have one node with HTML in it. Isn't that great? So now, let's use that. Let's say, let's say our h1 is going to be... So, by the way, if you, in case you forgot, like, I just forgot, we have HTML, which is an HTML string. It's not some, it's not like some cool, object with keys and stuff, it's just a plain string. And since we've used React before, you probably know that the way to render that stuff in React is by using a key called Dangerously, what is it called again? Dangerously use HTML? What is it called? Dangerously HTML React. Dangerously set inner HTML. Never remember that key. Okay, so dangerously set inner HTML, isn't that an underscore? Okay. Hold on. How does, how does this work? Who wants to, who wants to tell me how dangerously set inner HTML works? There you go. All right, we found it. So the way dangerously set inner HTML works is that it, well, I guess they kind of don't want you to do it which is why they make it so difficult. But this is how you do this in Gatsby Land and it's actually not dangerous at all. It's fine, you can do it. So what we're gonna do is we're gonna run dangerously set inner HTML. That takes an object with a key called underscore underscore HTML, okay. And this key is now going to be set to the HTML that we got. The HTML that we got was data.

I believe it was all markdown remarks. Let me paste that in. And then nodes. And remember nodes was an array. So for now, I'm just gonna say nodes of zero and then we'll come back and clean this up in a second. So we're gonna pick up the first note and in that note, we're gonna get the dot HTML, right. And we're gonna set that. So let's also go ahead and change our title while we're at it, right, because we have a title from markdown this time. So let's get data.allmarkdownremark.nodes. Let's get the first one. Let's say.frontmatter.title. When I hit save, we're gonna go back to our browser, hit refresh, and there you go. We have hello world, we have welcome to our first post. And then we have some lorem ipsum. And if you notice this is the title from frontmatter and this is the markdown. Now, if I go back, similar to my Gatsby config example I go back and change some of this markdown, you will see that it will update automatically. So I'm gonna say, let's write some real time text to replace this lorem ipsum. I'm gonna hit save. And you'll see that that just got updated. So again Gatsby is doing this under the hood, we have Gatsby develop running, as you change your data from whatever source, in this case that source happens to be a markdown file, that gets updated, Gatsby figures it out, it redenders your page, passes in the new props, does all of that stuff for you. So now that we've done this, let's quickly go back, to our site, we've managed to get data from markdown, we've managed to render it in a page, however, we did one thing that was kind of weird, we got the collection but we did the whole nodes of zero, and that felt a little icky didn't it. So let's clean that up.

So what we're gonna do now is we're gonna refactor this component, and we're gonna refactor this component to render a post from this collection, and we're gonna do two things. First, we're gonna get rid of this and rewrite our query. Second, we're gonna go back and use the file system API. Let's do both of those things.

The file system API allows you to create a page based on a variable name. Instead of hard-coding the page name, we can use a variable that corresponds to the front matter title of the markdown file. By using the file system route API, we can easily create pages without writing complex code.

Let's walk through an example. We have a type called markdown-remark, and we want to create a page for each instance of this type. To do this, we use the variable markdown-remark.frontmatter.title as the page name. Gatsby automatically sluggifies the title to create a valid URL. Restarting Gatsby is necessary to reflect the changes. Now we can create multiple pages based on different markdown files.

That is the type of the connection. So if you go into the node and say type name, you'll see that we have a type called markdown-remark. So what we're gonna do now is we're gonna create a page. But instead of saying hello.js, instead of like hard-coding it to hello, I'm gonna let it create the page based on a variable name. I'm gonna say take markdown-remark, and then use the front matter dot the title. So I'm gonna say markdown-remark dot front matter dot title. And as you saw previously, and as I mentioned previously, this is basically just like writing the deep path to the key. You know that there's a markdown type, you know that it has a key called front matter, you know that that is an object with a key called title. You're just writing a deep path, and you're sticking it in these braces to tell Gatsby that it's a variable.

Now that I've done that, let's keep everything else the way it is, but let's just do one thing. Let's just go restart Gatsby. We're gonna quickly restart Gatsby. There you go. Gatsby just restarted. And what we're gonna do is we're gonna go, and instead of opening slash hello, I'm gonna say, let's open slash hello world. And as you can see that didn't work. And the reason that didn't work is that because there is no page, again, it's complaining it doesn't know about any page at hello world. And I think this didn't work because we did something wrong in here. So let's find out what that is. Let's look at our docs again. Our docs say that we can have a name and we can have, you know, blah, blah, blah. There you go. It tells us that if you need, you know, something deep within an object, the way you're gonna wanna do that is you're gonna want to follow this syntax, which is gonna want two underscores between the fields. So let's try that out. Let's say markdown remark.frontmater, underscore, underscore title, and let's see if that works this time. I'm not gonna restart Gatsby, because I don't need to. It should just be fine. I'm gonna hit refresh here and see if that changes. And, there you go, it works. It actually created the page with hello, at hello dash world. And right now this morning, you might be a little confused and you might be wondering what just happened and how all of that worked. So let's quickly walk through all of that. The way that worked is we created a component in pages called markdown remark.frontmater, underscore, underscore title. We put that in place, right? Gatsby found that component and said, oh, look, it's got variables, and said, cool. So what I'm gonna do is I'm gonna read the variables and try to figure out what that is, and reads that and says, it's markdown remark, and then understands that, oh, you have a type called markdown remark. What you're saying is you want me to create a page for every instance of that type and call the path, frontmater, underscore, underscore title. So that's what Gatsby is doing. It's doing one more thing actually. It's also saying, oh, the title happens to be hello world, but obviously that's not a valid URL, so it's automatically like sluggifying it for you. It's automatically saying, oh, if that were a URL, it would probably be hello dashboard. So it's sluggifying it for you. So that's what just happened. And that's how the file system route API works. Instead of writing complex code, by the way, in Gatsby v2, you'd have to write really complicated code to make this happen. But in Gatsby v3, this is how it is. It's called the file system route API. You can just put in variables in your file names, in pages, and it'll automatically create them. And to look at what the real value is of something like this, let's create another markdown file and see what happens, right? Instead of hello world, I'm gonna say, second-post.md. And in that, I'm gonna stick in, I'm gonna paste the whole of the first post and I'm gonna say second-post, change this to welcome to our second post. Right, and hit save. And now if I go to second-post, you'll see that that didn't work. I'm not sure why. I reckon I might need to restart, is it? Let's see. So we have something in chat, let me quickly take a look at that. Said I need to be offline for some time. I hope I can reach. Oh, absolutely, you can rejoin for sure, in 30 minutes. We'll be here for a while, feel free to rejoin. All right, we're gonna take a break in about five more minutes, but let's wrap this up and then take our first break. What we tried to do is we tried to create another page at second-post, but that doesn't seem to, you know, just work. Let's go ahead and restart Gatsby. So I'm gonna restart Gatsby, and then hit refresh, there you go. And that worked. So it went ahead and created that. But, and this is where things get interesting, right? But it still has the same text from the last time. And why is that? Still has this text from the last time, because, well, in our component, we actually have this hard-coded query, and that's our problem. So now, we're gonna fix that. What we're gonna do now is we're gonna say, hey, instead of this query, where you get all marked down remark, how about instead of that, you just get the marked down remark file in question, like the one that you care about, right? So let's write our query for that. Let's go back to GraphiQL and do that, right? Is everybody with me so far? Can I get a quick thumbs up from everyone? Any questions? Are you confused? Do you, are you bored? Do you, you know, how are you feeling overall? Everybody good? I see Muhammad is giving me a thumbs up. Yeah, I'm really enjoying it. Good. Enjoying it? Sweet, thanks. Everybody else good? Any questions so far? We're good? Antoine, Susan, all good? Yeah, I have a bit of trouble. Yeah, I have a bit of trouble, I think it's without, because the title or something. So it's a marked down font matter, title is currently not working. What's not working? You tried adding a title, and then you tried getting it in GraphiQL, did that not work? Or did that not work on the page? Just check the... So, by the way this is a great question, to quickly like add to what Susan said, if any of this isn't working, the best way to do this is what we're doing, you first try to query in GraphiQL, see if that query works correctly. This works correctly. Great, then we go back and take a look at what's going on, whether our query is correctly set in our Gatsby, react component or not. And then we can log the data that we're getting passed in and then take it from there. That should be a useful way to help debug that. So as you do that, I'm gonna go back and continue writing our query, right? So what we're doing now is, I'm gonna replace all markdown remark and just say markdown remark, right? And we say I run that, I just get back one random thing with an ID and we have no idea what this is, but here's the thing, even though this work, this isn't how you're meant to use it. The way you're meant to use it, is you're meant to say that, oh, I want a markdown remark file, but hey, I'll tell you what, I want this specific one. Like I'll give you, I'll give you some parameter and I want you to pick exactly that one. And in this case, the parameter we happen to have is the title. Remember how we had the title from every markdown file. Remember how each one of them had a title that we added in front matter? We're gonna go ahead and get that front matter title. All right. And we're gonna say that, the title that I passed in, give me that front, give me specifically that markdown mark file. So I'm gonna say title, and then I'm gonna say EQ.

So, now we have our query, and we're saying, hey, get me the markdown remark file with the title that I passed in. All right. So now let's go ahead and use that in our component. So let's go ahead and replace all markdown remark with markdown remark, and then say that we're gonna pass it a variable called title. And let's go ahead and do that. So we say title, and then we say hello world. And now if I go back to my page and hit refresh, you'll see that it says, welcome to our second post. And if I go back and change that to hello world, it'll say hello world. And you can see that it's updating dynamically as we change the title. And that's how you create a dynamic page using the file system route API in Gatsby. It's really powerful, it's really cool, and it saves you a lot of time. You don't have to manually create pages for each markdown file. Gatsby does it for you automatically. So that's how you create pages in Gatsby using the file system route API.

Okay, we have time for a few more questions. So let's go to the next one from John Doe. John B. is asking, can we use variables in the file system route API? Yes, you can use variables in your file names when creating pages with the file system route API. This allows you to dynamically generate pages based on the values of the variables. For example, if you have a collection of blog posts, each with a unique title, you can use the title as a variable in the file name to create a page for each blog post. Gatsby will automatically generate the pages based on the file names and the variables.

So I'm gonna do the right thing, which all of us should look, which is I'm gonna look at the docs. And if we quickly take a look at the docs, it looks like I, oh, I actually got it right. Surprising, I always get this wrong. Wait, did I? No, I got it wrong. See, what I did wrong was that this needs to be the name of the param with the dollar sign. And then the thing on the right needs to be the type. And in this case, the type happens to be a string. We know that the title is always gonna be a string. So I'm gonna set that as string. So far so good. Now, you're gonna want to set this title. You're gonna wanna pass it down. Like right now, it has no way of knowing where to get title from. And the way we're gonna get title is you're gonna wanna tell Gatsby that, hey, when you run this query, make sure that this key is passed in. And the way we do that in the file system Route API, let's take a look at how we do that. So, and I actually haven't done this before. So let's find out. How do you do this? The way you do this is you set up a component and you just say product and you just give it all. So apparently it just figures it out for you. And what it figures out is it passes an ID automatically. Cool, so let's go ahead and do that instead. Let's remove our title, let's say ID. And ID is also a string, apparently. Yes, and then we're gonna say, instead of this complicated front matter stuff, just go ahead and pass in the ID for every one. And of course we're gonna wanna set EQ, like the last time. And then, now, let's go ahead and run this page and see what data it has. So I'm gonna hit second post, that failed to compile because it found a dollar in query. Why is that complaining again? Why is that complaining? I think that's correct. What am I doing wrong here? Let's restart. Just in case it's in some weird state. Okay, still complains. So, syntax, the dollar was not found. Right, the dollar is a syntax error. And we don't know why, let's find out. So what's happening at this page? So it seems- Thank you, extra braces around query. I have extra braces that would explain it. Thank you, David. David is right, David is absolutely right. We have extra braces around query. Query needs to be top level and you don't wanna stick braces around it. So now that we've removed that, let's take a look if that's solved it. It seems to have solved it because everything seems to be fine after that. Let's hit refresh. All right, still fails with cannot read property nodes of undefined, right. So fails this time for a different reason and the reason is that, well, it couldn't re-render this cause it doesn't know about all this stuff. So I'm gonna go ahead and comment it out and we're just gonna take a look at the log that we have up there, right. So that seems to work, we have an object that got logged and this time, Markdown remark had the correct one, right. And you'd wonder how that worked. The way it worked is that Gatsby rendered a page per item in the collection and then for every item in the collection, it said, I already know the data because I found the collection and I found the item. This happens to be the ID and just to make it like easy, I'm gonna pass that ID in when I render the component. And now that that ID is passed in, in your query you can just say that hey, in this query I'm gonna get an ID, it's gonna be a string and please use that ID to query some other thing here, right. So all of that works under the hood. All you need to really do is create this component, get that ID, pass it in, query for it. So now that we have that, let's actually go back and refactor a component to render the right thing. So I'm gonna say data.markdown remark and I hate typing this long name, so you know what, let's make that simpler. I'm gonna add what is called a GraphQL alias. If you haven't seen this before, in GraphQL you can set an alias to a type. Instead of markdown remark being passed in as markdown remark, I just say I want this post, right. It's similar to how this works in JavaScript when you destructure things, right. You can set an alias. So similarly I'm gonna set post and I'm gonna type in data.post.frontmatter.title, this should work and I'm gonna say data.post.html. Okay, and now that we have all of this, let's go back, hit refresh and there you go, we have a second post. And to confirm that this actually works, let's visit the one which is not the second post, which is let's visit the first post. And that was hello world. And look at that, that works as well. So we have hello world, it says, welcome to our first post, let's write some real text, blah, blah, blah. And let's just, you know, I don't trust things that just work the first time. So let's go back and change some stuff just to make sure. Right, we're gonna say we have hello world, we're gonna say let's write some real text to replace this lorem ipsum and we're just gonna say hello world like 10 times or something like that. It's hard to come up with examples. This thing with some random text. Save. And you see that that works. It renders the right stuff. And second post stays as second post, right? So what have we done? We've we went back and forth with different Segways. But now that we're here, what we did is we managed to figure out how to create pages in Gatsby. We managed how to figure out how to create dynamic pages where the page isn't hard coded with a name, but instead is coming from a collection of stuff, right? Like in this case, a collection of posts. We managed to figure out how to read data from the file system with the Gatsby plugin or Gatsby source file system. We managed to run add a plugin that helps us transform that file from, you know, markdown content and lets us extract markdown and front matter from it. And we also managed to, you know, learn GraphQL and take a look at how GraphQL works in Gatsby out-of-the-box. And finally, one thing I'm gonna do just to drive one point home is that, remember how I said Gatsby runs SSR and everything happens at build time? Let's run a Gatsby build and take a look at what that actually looks like before we take our break. We see a bunch of logs. By the way, these logs are coming from the console log that I added in the page and that's kind of proof, right? That tells you that that code ran at build time. This was unintended but it's kind of nice to drive the point home, but anyway, the point that I was trying to make was, if we now look at what's in our public directory, you'll see that there's an HTML file for index, which is called index.html, there is one for 404 and then there's one for second post and hello world, right? Is there a file for like markdown remark.front matter title? No, cause that's not a real page, what it's doing is that it's figuring out what that collection is and creating one for each. And you can also see that the HTML includes all of that inlined data via graph QL, so that ran at build time and got injected inside, and all of these pages got created for you at build time. So that's what Gatsby does, that's how it's slightly different from CRA, that's how the plugins work. And that sort of ends the first part of three parts of our workshop so far. We're gonna take a quick, short break, maybe you spend 10 minutes, go drink some water, get some coffee, and then we're gonna come back. I'll be here for those 10 minutes, so if you have any questions, now is the time. Or if you don't have questions, even if you have random thoughts, that's fine too.

Nothing, no thoughts, no questions? Is everybody awake? Okay, we have someone. Can I have a quick question? Okay, go for it, go for it, Reino. If you can explain just briefly why the name of the file starts with marked down with Mark exactly? Great question, great question. The reason it starts with marked on the Mark is because, so remember when we were taking a look at GraphiQL? And GraphiQL had, you know, we wrote a query to get this stuff. And remember how I said that everything in GraphQL has a type? I killed Gatsby which is why this query isn't running. So let me go back and run Gatsby develop and then re-run the query, so. That should work now. There you go. Now that the query's done. If you look at the type name value for that node, it's called Markdown to Mark. So what we're doing there, in the file name, is we're setting the type in. We're saying that you know of some type in GraphQL called Markdown remark. Find all of them and for all of those types get the front matter underscore underscore title and set that as the name of this file. Does that make sense? Yes it makes sense, thanks. You're welcome. Do we have any other questions before we break?

I'm actually unable to, sorry, I'm actually unable to map my file name to the URL. I'm getting a 404. Okay that's great. Even for me, I'm getting the same error. For me, I'm getting like, you have an empty file and src directory and src pages that mark down the mark thingy. Okay, so you both can't map your file name to, like the title to the URL is what you're saying? Yeah. Okay, so let's figure out a way to debug that. What I would recommend is go ahead and in localhost 8000, I'll just type some random crap, hit enter, and you'll see the development 404 page, and that'll show us every page that Gatsby created under pages, if you see at the bottom. So let's start to look at what the page actually got created as, and see what happens. David, do you see that? I do, yeah, I don't see my second post in Hello World, I just see the 404. So you don't see the 404. And you don't see either of them, which means none of them were created? Correct. Okay, have you restarted Gatsby after you created that file? I have. And have you, is the file name set under braces? Like did you have a curly brace to like around Markdown remark? Yes, it looks exactly like that. Looks exactly like this. And you have it in pages? In source pages? I do. Cool, and you also have, okay, can you go ahead and in GraphiQL, write in a query with all Markdown remark and see if you find them? Like if you just query for all Markdown remark, are you getting both your Markdown nodes? I am, I have two nodes. So you get both of them? Yes. And in the file name have you typed in Markdown remark dot front matter underscore underscore title, or have you typed in something else? Like what's inside the braces? Yeah, Markdown remark dot front matter dot underscore underscore title. Okay, and is the case Markdown remark correct? It is, interesting. I think you said dot and you don't need a dot after front matter. That's what it is. I have a dot after front matter. Okay, right. That's a good one. Well done. And so just to be clear, you need a dot the first time and then after that for every depth, you just need the multiple underscores. So that should fix yours. Okay, thank you. Ashmeet, I think you said that yours was also... For me, I gave Yarn get to be built again. And now I'm able to now when I gave to a Crab Jordan, I was able to say hello world. But right now I'm getting an error dialogue that says unhandled runtime error. Element type is invalid expected a string for building components or a class of function components. Got it. And what does your React component look like? Is it trying to render dangerously set in HTML? Did you change the query? Because what now that's sounding like to me is that maybe the data that's being passed and that isn't actually HTML. And that's why it's not able to render it correctly. Okay, I have the same thing that you have. Okay. I would recommend logging the data that's being passed in, taking a look at what that data is, and make sure that the thing you set as dangerously set in your HTML is correctly set to the HTML key. That's what I would recommend taking a look at. Okay. I have a question. It's kind of hard to type and follow you at the same time. So I prefer to follow you. Will it be possible for you to create a get repository of this? Absolutely, I was planning on doing that. And let me have it working. Okay. I was planning on doing that after. But would you all prefer that I do that now and push as I go? Would that be more helpful? Yes, yeah, definitely. Sweet. So I'm gonna do that right now. I'm gonna create that. And then we're gonna meet back in about 10 minutes from now. Excellent. Okay, thank you. I'm gonna do that and I'm gonna pass the URL on chat and then we'll meet in 10 more minutes. We have any more questions before we break? No, nothing so far? Everybody good? Yeah, we're good. All right, sweet. Awesome. So thank you for joining. Thank you for paying attention. I know that this was complicated and there's a lot to take. But hopefully all of that made sense. We're gonna come back and learn a lot more about Gatsby in 10 minutes. Let's take a break. I'll see you all in 10 minutes.

Everyone, welcome back. Can everybody hear me fine? Yeah, hello. Hey, Mohamed. So I see that we have some stuff on the chat. Let me just quickly take a look at that. So I get the error, cannot query field front meta on type markdown remark dot. Susan, I think what's happening in that case is that cannot query field front meta on type markdown remark slash dot. Okay. Can you type in or within the GraphQL? Yeah, what's in? Yeah, let's exactly, David is right. It needs to be markdown remark in the query because that's the name of the key and then in the type on the file name, it needs to be capital N. Yeah, I can't see. I can't see what's in the file name. The file name. Can you repeat that? I didn't hear that. I'm so sorry. I can't see the name. I can't see the file. So I created the whole project new and I just try to query, so I have created the markdown files and I try to just query, the markdown remark. And it... Did you add the plugins? Yes. In config and installed, yes. Did you add them to Gatsby config? Yep. Okay, and when you query for markdown remark, you get nothing? If I query... Can you check what the path is that you set in Gatsby config and if that's set to the right directory where your markdown files are? Name is pages and path is dnamesource pages. So default settings from the config, from the tutorial, or the how to. Can you repeat that? So do you wanna just paste in your Gatsby config in the chat? I can, the formatting is really crappy in the chat so. That's all right, that's all right, we'll manage. So go ahead and paste, there you go. So I see it, it's a source name, there you go. So the issue is that options with path, your options for path is dnamesource pages and I'm presuming that your markdown files are under a different directory. So that needs to be set to the directory where the markdown files are. Cause that's where it's going to find them in the file system. So you're gonna want to change dnamesourcepages and change that sourcepages to the folder name for where the markdown files are. And that should fix everything. Go ahead and let us know in chat once you try that and with that let's continue.

Welcome back, yeah, you're welcome. Welcome back all of you, it's good to have all of you. And in case you missed, in case we have anyone new, I haven't seen all the names, but in case you missed part one, we spoke about Gatsby v3, the file system route API, how to create pages in Gatsby, how to create pages using the collect, like from a collection, how to use GraphQL, using GraphQL in Gatsby writing page queries and what Gatsby really is, the differences over create react app and so on. That's what we did in part one. Part two, we also got data from like markdown files in your file system, in your repo. We also managed to render them. So that's all of the stuff we did in part one. Part two is gonna be fun. We're gonna build on that and learn more stuff. So let me go ahead and share my screen again. In case anyone missed it, I did push this up to GitHub. And what I'll do is I'll keep pushing commits up as we go so that it's easier for you all to actually take a look at that because I know that it can be tricky to follow along otherwise. So with that, let me share my screen. This is a repo. The link is in chat. And the site should still be running. It's not. Okay, so I'm gonna go run your Gatsby develop again and just quickly review everything we have. We have Gatsby running. Everything seems fine. Nothing seems to be failing. All right, everything's good. We have Localhost 8000. We have the index page. We have our two pages that came from the File System Route API. One is called Hello World, and that renders fine. And then there is interesting. What's up here? So it seems like we got Hello World and that doesn't seem to be rendering anymore, I think. Is that what's happening or am I hitting cache? So one thing, if you'll notice, one interesting thing here is that I can see a flicker of the real content and then it changes, right? And this is interesting because usually what that means is that, what you're seeing in SSR and what you seeing after SSR aren't exactly the same, right? Cause that's when that sort of flash happens. And confirm that. I'm gonna disable JavaScript, hit Refresh. So I see that that works fine, and if I enable JavaScript again, And I see it was really helpful at all. It says warning prop, blah, did not match. So the server sent blah and the client sent blah, right? And that's our problem. That's the reason it failed. And the reason it failed is possibly because what's happening here is that I think we're running SSR on dev, right? There you go. That's what it is. So one thing we do at Gatsby, and this is great otherwise, but at the moment it can be a little annoying. And I should go back and see if we should change this, is that we have some new features that we ship and we usually roll them out to a small percentage of users. So you can get opted in into some experiments and you can turn that off like explicitly, or you can try them on, see how you feel about them, send us feedback. And as you can see this one, it now seems to have set dev SSR for us, which runs server-side rendering during develop, all right? And it looks like that's what got run and that's why we're seeing this change. For now, let's go back and set that to, let's just turn off that experiment right now. Cause I don't think we wanna, we want that experiment. In case you're also seeing this, the way to change this is in your config. There's a key called, you can set a key called flags. Okay, in module dot exports under flags, go ahead and set the name of this particular flag. The one here is dev underscore SSR. Okay, I'm gonna set that to false. So I set that to false, we should be, that should opt us out of this experiment. Things should be back to how they were before. So as you can see in this case, Gatsby's restarting the dev server automatically cause we changed config. There you go, we're back. We're back to how things were. Everything's great again. I seem to have clicked on the wrong button.

Sorry about that. Right, so I see someone chats saying, it works thanks, great, awesome. So Susan is back in the game. Everything is good. All right, so we were reviewing what we did in the first part, and seems like everything works now other than the fact that we got opted into an experiment. If you're seeing similar behavior and if you got opted into some other experiment, feel free to turn it off. Or let me know and I'll help out. Anyway, now that we have all of this, let's move on and do more stuff.

The next thing we're gonna do is that, now often, you're gonna have a Gatsby site like this and sure you can have a blog and you can create Markdown files, but often, you're gonna wanna get data from somewhere else. Maybe you don't wanna write Markdown in your git repo. Maybe you wanna use a real CMS. Maybe you like WordPress or Sanity or one of those cool new CMSs. And the power of Gatsby and its graphql layer, that sort of stuff really starts shining once you see all of these other CMSs working with it. So let's see what that looks like.

The first step to adding any data to Gatsby is to add a plugin. We saw Gatsby source file system. And I did mention previously at some point that if you have source in the name of the plugin, that usually means it's a source plugin, and a source plugin lets you source data from some place. And we use Gatsby source file system. Similarly, now we're gonna go ahead and install another plugin.

So I'm gonna do a really quick vote just to sort of keep things fun. And I think Zoom has this new polling feature. Let's see if I can use that. How do you do that? Does anyone know how to use a new polling feature on Zoom? Let's see. I think it's participants more, maybe no, no, no polling. Okay, apparently I can't. Let me see how do I use polling? Okay, I can't seem to find the polling feature here. It might be a thing that's only enabled for some, perhaps only if everyone's on the same version of Zoom or whatever. But anyway, what I wanted to poll for is I wanted to ask, what CMS should we start with? Does, do you folks have any favorites? Like, maybe we can start with sanity or contentful. Does anyone want to like vote for a specific CMS to start with? Or we can go with whatever I want. In case someone comes. I don't have any preference or even experience. So, can you at least give us some pros and cons about each and every one of them?

Okay, great question. David also says no preference. So, I'm gonna do that. I'm gonna answer that question. Pros and cons? Okay, that's a question that's hard to answer in the time we have. But a short summary is that, look, every CMS is different, right? You have, every CMS is slightly different in a hundred different ways, right? You have Contentful, you have Sanity, you have, most of you would have probably used or heard of WordPress. At some point, WordPress powers half the internet. All of these CMSes have their own pros and cons. All of them are built for a slightly different kind of content. They have a different experience. Their web apps are different. Some of them work well for e-commerce, some not so much. I won't pick favorites per se. Contentful is great, but it can get really expensive but a lot of, you know, a lot of companies use it already. So it's something people are familiar with. WordPress is nice, because you know, it's open source and it also, you know, is something you can run anywhere. Sanity is, and I know I just said, I won't pick favorites but on a personal note, Sanity is something that I'm really fond of. It's used by a lot of really cool people lately. And more importantly, it's a great experience. The web app is fantastic, you know, it works well. I'm a big fan and you'd see more if you try it out. There's also a couple of other CMSs. There's GraphCMS, which I'm quite fond of, which is quite nice. So these are all the pages for them. Go try them out, you know, pick your own favorite one. But yeah, use a couple of them and then pick one. So to summarize, all of them have slightly different, you know, experiences. But coming back to what we were talking about, and I see some more responses in chat. Coming back to what we were talking about. Irrespective of what the CMS is that you might prefer or that you might pick, or that, you're welcome Antman, or that your team is already using. Sometimes these decisions aren't like, for us, devs, or sometimes it's for like a marketing team, or for editors or for folks that actually enter this data in and write this stuff. Like they might have references of their own. So the cool thing is that irrespective of what CMS you use, there's probably already a Gatsby plugin for it. And I don't say that lightly, if you take a look at gatsbjs.com slash plugins, you'll see the Gatsby plugin library. We have about 2,700 odd plugins right now, if I remember correctly. And you see that the top plugins has source file system, Contentful, it's got a plugin image, and so on. There's a bunch of plugins here. Contentful is a really popular one. And then you have, within the CMS thing, we have Contentful, Netlify CMS, which again is fantastic. We have WordPress, Datto, Sanity, Drupal. And there's just a ton of them basically. Most of the ones that are popular and that work really well and that have substantial use already have a Gatsby plugin. If the CMS you use doesn't have one, it's actually not that hard to create a plugin of your own. That's probably not something we can do in this workshop, but I do hold a advanced Gatsby workshop that I think I'll be releasing these for some time on Twitter soon. So feel free to come to that and maybe we'll create a plugin there. But anyway, with that, if you have a CMS and you want to look for a plugin, go to the plugin library, search for it. Hopefully you find one. For now, let's go ahead and start with Sanity. I love Sanity and a big fan. Let's go ahead and get up and running with Sanity. And then we'll do maybe one more, maybe two more. So the way we're gonna use Sanity, the first thing we're gonna want to do is like last time, we're gonna want to install the plugin first and all of these plugins are obviously NPM packages. So we're gonna say, yarn add or NPM add install, I'm sorry. The name of the package, the one for sanity is gatsby-source-sanity. I'm gonna paste that in, add that. And let's also go ahead and actually create a Sanity workspace cause I know we didn't do that. So I'm gonna go to sanity.io, I'm gonna hit login and that goes to something called Sanity content studio. I can try a new version apparently. So let me go ahead and try that, why not? I'm gonna log in with GitHub. Quickly take a look at chat, would like to know how to make use of an existing WordPress site. Great question. In fact, that is something I do plan on doing in this workshop, we will do that in a few minutes. So I'm gonna create a new project in Sanity, okay. And it says, choose a way to create a new project. I can either, you know, start with the command line or I can choose the start up project. I'm gonna go ahead and start with the command line, right? So I'm gonna, now that I've installed the dependencies in a different tab in my terminal, I'm gonna run npm install-g sanity-cli and nsanity-init. Let's see what that does for us. All right, it's done some stuff. We can't find any auth credentials. Let's go ahead and use GitHub. That opens GitHub for us, login successful, sweet. I can close this, go back to the terminal. All right, so I'm gonna create a new project and I'm gonna call it react-summit-workshop again. And you can either create one for yourself right now or I will give you access to the same project in chat and maybe we can all use the same one. That's fine too. So go ahead and do either option that you prefer. And I will paste credentials in a minute. So I'm gonna go ahead and use the default dataset config.

It's creating the dataset. Let's give that a second. It's got some output path, go ahead and select that. Select project template. I'm gonna go with clean project with no predefined schemas. So let's give that another minute. While that happens, I'm also gonna go back to our Gatsby project and add the instance for this plugin. So like before, create an object because this time, we're gonna have to give it some options again. I'm gonna say resolve is Gatsby-source sanity. And options, and I don't know what the options look like for sanity. So let's go ahead and take a look at the docs. In options, we're gonna probably wanna put, there you go, so we need a project ID, we need a dataset, we need a token, and so on. Cool, so let's just go ahead and paste these in. I'm gonna go ahead and paste these, sorry, in here. And we have a project ID, a data set, and we need a token. So, all right, so it looks like we have the sanity project started. I'm gonna run sanity-start. So start is not available outside of... Okay, I did the same thing again. I didn't go into the directory. It seems like I always do that. How many of you think that when these CLI tools finish, they should cd into the directory automatically? I feel like Gatsby should also do that. That's something I'm gonna think about after this workshop. Anyway, so I'm gonna cd in and then run sanity-start. Let's give that a second. And when that runs and opens, we'll then be able to get all the values we need for our plugin.

All right, so content-studio successfully compiled Go to localhost 3333. So sanity is a little tricky sometimes because it needs you to do a bunch of stuff on your own. One of them is literally running the studio on your local machine. Some might like it. Some might not prefer that. It's not that complicated when it also kind of lets you run everything on your own machine, which I'm a big fan of. I think Safari doesn't like the fact that it can't write a cookie. So I'm gonna go ahead and open this on Chrome. I have the new M1 Mac, which does an incredible job on battery life at Safari, which is why I've been trying to use Safari for everything. Anyway, cool. So now we have sanity running. It says empty schema. And the first thing we'll do is let's just quickly go ahead and create a schema. Let's create a new document. So it says no initial value templates are configured. If I recall correctly, that means... I don't remember how sanity works anymore so I might look a little confused right now. Read more about how to add data types. So your first schema, all of this is going to, all right, so it's gonna need some code to do all of that. When I created the project, I should have probably said, use an initial template. I feel like I kind of regret not doing that. You know what, let's do that, it's fine. Let's go ahead, cd out, and run sanity init again. This time we'll create a project with the data type so that we don't have to do all of that ourselves. So react-summit, we'll call it Gatsby workshop because I can come up with a better name. Let's run that. Because we don't wanna spend all our time doing stuff that isn't really related to Gatsby so let's not do that. So this time I'm gonna select, what do y'all wanna pick, movie, project, e-commerce or blog. I think e-commerce is good because it comes with sample data so there's less stuff in the CMS that we'll do more in Gatsby. Everyone good with that? Okay, no nos is good I guess. So let's go ahead with e-commerce and I'm gonna say upload a sampling of products to go with your e-commerce, why not? And that'll let us move faster so let's do that and once that's done we're gonna run sanity start. There you go, that is doing some stuff. So again sanity is super configurable, works really well, you have control over everything from schemas and so on but it might seem a little low level sometimes. It's a trade off like everything in engineering, I guess. Give that another minute.

Okay sweet, so that's now done. This time, let's run sanity start. Again I forgot to cd for like the third, fifth I don't know how many times I've done that today. Let's run sanity start, that should be ready anytime soon. It says it's compiling, there you go. That's done and it's localhost 3333. Cool, so this time again, let's log in my GitHub because that's login provider is selected. It's opening sanity suite. So this time cool, this time I have content. I have actually content which means there's less stuff that we need to fit in. And it's got some products and it's got some vendors, it's got some categories. It's great, it's got a lot of sample data. Let's go ahead and actually consume this in our Gatsby site. And the way we're gonna get to doing that is the first thing we're gonna do is we're gonna want to get project settings that we can put. So I think the way to do that is to run sanity manage. So let's run sanity manage and that opens up manage.sanity.io and that is where we should be able to get our project ID and so on. So let me log in with GitHub on this. Looks like we're logging. There you go, we're in. So we have a project ID. I'm gonna copy that project ID now and paste it in here. We have a data set and the data said that we care about is production. Typically, in Sanity, you can have multiple datasets for like environments or even for multiple portions of data in a project perhaps. And finally, we're gonna need a token. This is a workshop for you folks and I'm gonna go ahead and give all of you a read only token that you can use so that you don't have to do all of this yourself. So React Summit Workshop. I'm gonna say read, okay? And I'm gonna, there you go. It's a massive token. I'm gonna go ahead and literally do what we shouldn't do and I'm gonna paste it in here. Do not do this in production, please. Never do this, all right? But for now, for the sake of learning this and we're keeping this simple, I'm gonna post this in here, okay? And I'm also going to stick it in chat for you all. Go ahead and use the token so that should speed things up for you. I will try to keep this project up for a day or two after this workshop and then I'll take it down, all right? If you need the project ID, this is the project ID in chat. The entire options object, sure, why not? Let's do that. So let me take the entire options object and paste that in here, right? That's the entire options object. Go ahead and use that now that we have that and now that we have our plugin. I'm gonna open sanity by running sanity start and I'm gonna go back to Gatsby and this time I'm going to run Yarn Gatsby develop and see what changes, right? So what do we do so far? We set up sanity, we've got its project settings, we've got a token, blah, blah, blah. We opened sanity, you know, and then we added the plugin and ran some stuff and it looks like some stuff broke, okay? And what's breaking here is that Gatsby source sanity is trying to find Gatsby plugin image. I think Gatsby plugin image is a peer dependency for Gatsby source sanity. The thing is Gatsby plugin image is something that everybody kind of installs. And there you go. It says has unmet peer dependency. We didn't really install it so far. We'll talk more about Gatsby plugin image in a little bit because that's on the, you know, the table of contents. For now let's just install it and move on. We'll come back to this plugin in a bit because this is other, you know, because sanity happens to need it. So anyway, I added it by running yarn add Gatsby plugin image and I'll go back and run Gatsby develop. And there you go. That seems to have failed because it says GraphQL API not deployed. Okay. Looks like sanity didn't, couldn't run because the GraphQL API is not up. So the way to do that is interesting. So we need to do something in Sanity for that data set to make sure that the GraphQL thing is deployed. So let's go ahead and do that. Let's go ahead and deploy the GraphQL version. And what is the way to do that? What is the simplest way to do that? Deploying the GraphQL API. Right, so you need to run Sanity GraphQL deploy. Cool. So let's go ahead and run that in here. Do you wanna enable GraphQL playground? Yeah, sure, that's helpful. Let's do that. There you go, deploying GraphQL API. Sweet, it's done. So now we have the GraphQL API deployed somewhere. Okay. And let's also go back and run... Sorry, typing cop. So to go back and run... Where is the sanity stuff again? Does anybody recall? Oh, there you go. So let's also go back and run sanity studio. So I'm gonna say sanity start in here. Okay, and we have the GraphQL API deployed. Now, if you're on YARNGats, we develop. Let's see what happens. Should hopefully work this time. There you go. It managed to figure out that there is a GraphQL API. So all this is stuff that we typically don't have to worry about. Ideally you do that the first time in your project and then you're not gonna have to do it again. But if you hit similar stuff like this, you know how to debug it, and you had to go with that. Documentation typically should point you in the right direction. Anyway, so now that we have this, we haven't done anything insanity yet. We haven't changed any data. We haven't created any new pages on Gatsby. What we can do, is we can go back to GraphQL, sorry, GraphiQL, right? And take a look at what new stuff was added. And that's what we did the last time with the last plugin. So let's hit refresh. And now let's take a look at stuff on the left. Do we see anything new that's been added here? Yes, we see a couple of them. We see all sanity, category all sanity file asset, all sanity product, all sanity vendor, and so on.

Remember how I said the convention is typically to have all followed by the type name. So that's the same convention these are following, right? And let's go ahead and query some data. I'm gonna say, all sanity product, because why not? And within that I'm gonna say, give me notes, and with the notes, I'm gonna say give me maybe, I don't know, maybe the name, is that name? Or is there an ID? That is an ID. Okay, there's a title, there's a slut. Let's go ahead and get those. And there you go, look at that. We got a ton of products, and we have all of their titles, their slugs, and their IDs, right? So while this might have seemed a little complicated because there were a couple of segues, in theory all we really had to do to get our SanDry data into Gatsby is to install a plugin, set up options, and you're done. And you know what the cool thing is? This was the process for every single CMS with every single plugin. All you have to do is add a plugin, add options, make sure you're able to connect to the CDN, and stuff should just work. And the cool thing is that irrespective of the CDN, you're still gonna get all that data in GraphQL, and that's really, really helpful because you don't have to keep switching between different APIs and between different formats and so on, right? And also GraphQL lets you, you know, you have this DX where you can run auto-complete.

So now let's do something really cool. Let's go back and use the stuff we already learned with the route API, right? And let's create a new couple of pages. This time, let's use the sanity stuff, okay? So I'm gonna say, what is the type gonna have to be this time? Let's find out. Let's run underscore underscore type name, type name is sanity product, right? So I'm gonna say, give me sanity product, okay? And dot let's go use the title again, like last time, okay? So I'm gonna say sanity product dot title. Oh, I forgot the dot JS, my bad. Sorry. So that needs to be sanity product dot title dot JS, okay? And I'm gonna copy in our stuff from hello world and throw away what we don't need. Let's remove the console. Actually let's keep the console locked cause that might be helpful. Let's remove this stuff, let's query, let's query by ID again. And this time our query will probably need to be all sanity. Well, not all sanity product, we wanna get one sanity product. So let's write that query and see if that works. Let's just, okay, so it needs, or you can't you can't query for nodes obviously cause it's not a collection anymore, right? So there you go. That works. I'm gonna use this query. Let's go back set this in here. And ID should still work. We'll just pass ID in from here like we did the last time. And if you're with me so far, what we're gonna do next is we don't care about the paragraph right now. Let's just render the name of the product for every page. So I'm gonna say sanity product.title. And now, let's go back, restart Gatsby, see what that does. I think I messed something up and I can see that, and I hear this error is kind of helpful. It says variable ID of type string user in position, expecting type string query operator input. And literally all that means is that I forgot to do this. You remember how I said previously that you need a key and then you need to set the object to have an equals inside it with an EQ? That's what I missed. So now that I fixed that, it looks like all the errors are gone, which is nice. Let's go back and try to open local host 8000, everything's running, nothing's failing so far. Let's go to our 404 page, because we like doing that. And there you go, this time you see 16 pages. And a lot of these names are names that I can't pronounce. So I'm going to pick the simplest one here. How about Kit Kat Wasabi? All right, we have Kit Kat Wasabi. And you see that a page got created with the title of the product. And now we're going to go into sanity and edit it. So let's go into sanity. Where is sanity? Which of these tabs is sanity? We'll never know, we'll be. Let's open safari. There you go. This is, ah, oh, it's none of these either. You know, I keep all these tabs open and it turns out every time I need a tab, I have to open a new one anyway. It's just one of those things, right? There you go, I found it, I found it. There you go, this is the one. So we have product. We're going to look for Kit Kat Wasabi. And we're going to load that. Let's go ahead and change that title to Kit Kat Not So Much Wasabi. And hit publish. And when I hit publish, you'll see that sanity did some stuff. It ran publish. And then you know Gatsby did some stuff. And if I hit refresh, well nothing seems to have changed. I was going to say that things should just update, but apparently that's not the case. So let's go ahead and look for our Kit Kat Wasabi and see why that didn't happen. So I'm going to search for slug. Oh wait, I'm just going to search for all sanity product. And this is going to be hard to find the ID for that one, specifically right now. So let's just do all sanity product, move all of this stuff in there, run prettyfy, run this and then within these, there you go, Kit Kat Wasabi is here. So it seems like we did the publish but somehow Gatsby still doesn't know about that. I'm not sure why that's the case. Perhaps that's because, maybe sanity needs some other stuff here. So it says published. The title hasn't changed, if I hit refresh, it doesn't, also it's still says Kit Kat not so much Wasabi. Perhaps we need to restart Gatsby, let's try that. Let's go ahead and restart Gatsby develop, see what happens this time. Now that we've restarted it, let's read on this query. There you go, this time it works. So it looks like Gatsby needed a restart. That shouldn't be the case, I feel like that's a bug. Gatsby did not need a restart previously with this plugin. And that could be a bug in the plugin on Gatsby itself. That's something we'll figure out. But anyway, in cases when you have stuff not changing, you know, a good thing to do is probably restart Gatsby and see what's up, right? State is hard anyway. So now that we see Kit Kat not so much Wasabi, and we can go back and you know, hit our URL and we see that the URL doesn't work anymore because the URL is a function of that title. But we see that Kit Kat, not so much Wasabi works, right? So the point of this example was that we just managed to connect a new CMS and create a bunch of pages from its products without like actually having to write any, you know, code for that CMS specifically. We were just able to connect it with a plugin. And that's where the power of sort of, that's what Gatsby and GraphQL really shine in Gatsby. Let's do one more CMS before we move into a slightly more complicated example. So what I'm gonna do next this time is maybe try out Contentful. While I log into Contentful, if you have any questions, if anything seems not so clear so much right now, do you wanna go? Does anyone have any questions? I have a question. So initially you had to deploy sanity to make it come up on the, but then the second time when we changed the schema, like how come you didn't have to do that? I think so this is a sanity specific question and I'm most definitely not the authority on sanity because I don't build it, but I will guess and I will guess and say that I think this is just a one time affair where you deploy like get a URL, like a GraphQL URL insanity and whenever you change the schema or like publish new content. I don't think you need to keep deploying the GraphQL API. I think that's just a one time thing insanity from what I understand, like I'm pretty sure if I close this, it'll still be deployed at this URL. I think that's just a thing you need to do once. So that's because it wasn't connected to your locally running planet. No, no, no, no, no. So the, oh, by the way, that is not locally running. So if you look, I just run this HTTPS with this URL. In fact, I'm pretty sure all of you can hit this URL as well because it's public.

And it's, it's GraphQL playground for our Sanity version. Right? And I just paste it in chat, but I, so manage is not so when I run get sanity start, the local host thingy, the thing that's running on local host is just the UI for sanity. The data is still on their servers, right? So Gatsby is never really connecting to this UI locally, Gatsby is connecting to sanity.io. Does that make sense? All right, sweet. I think we have one more question in chat. Let me take a look at that.

I have also one question. Go for it. The contents that you know, integrated from the CMS is it's generated at the build time of Gatsby and is then static. If anything changes later on in the CMS or will it also be automatically loaded? That's a good question. That's a good question. To answer that, yes but there's another way to do it. So the way typically the Jamstack and Gatsby and all of these projects that let you do static site generation, the way they work is that it is built at build time. The data is fetched at build time and then that changes then sort of in your HTML, right? But what you do after that typically is that if there is a change on the CMS, most of these CMSs have a webhook that you can set to trigger a new build and when you have a change, you trigger a new build which runs and then that sort of updates your static assets. And we took a look at how you do this in production, like Gatsby Cloud does this automatically for you. We'll talk about that in a little bit but that's typically the pattern. That's how people usually do this. Okay, but in an abstract way, it's being said that you should have to integrate the CMS into your build pipeline to get automatically rebooted. Effectively, yes, yes. That is what you would have to do. You would have to somehow tell your build pipeline that hey, trigger a build now, because something's changed. Because your site is a function of code and data, right. And your code is coming from GitHub and that's what you do. When your code changes, you have a webhook and you trigger a build. Similarly, you're going to want to do the same thing for data. Okay, cool, thanks. You all right, make sense, welcome. A couple of questions here. Go for it. Are there localhosts 3333, that's on your machine, but that is in production, is that URL that you put? What is the correlation? Very good question. Insanity as far as I know, this URL is available because I ran insanity start. Insanity as far as I know, this is just a React app. You can deploy sanity manages well to natlify or to one of your favorite CDN of choice. And then you can use that there as well. So what people typically do is that they'll have like a white labeled version of their own CMS and they put it on their own, they put on some URL that they like. Like manage or whatever data.insertyourname.com or something like that. And that's what people typically do. But you can also run it locally every time you want to change, but that's probably not something like your marketers or your content folks would want to do. So typically what I've seen people do is, I think there's a way to deploy sanity. I mean, the way to deploy it is to just run sanity build, I think. And then deploy that to natlify or something like that. But that's what people typically do. Does that make sense? Okay. Yeah. So yeah, in reality, we're gonna work in the sanity I.O, you know, like it's much easier to do changes there. Okay. Does that make sense? Yeah. The other point from the token. What was the process DND, sanity and the code work? If we use it ourselves, do we have to go? Good question. You can use your own as long as you create one. So feel free to edit the token. You'll also have to edit the project ID in the dataset. Right? In the options which I put, you'll paste it in chat. The reason I pasted mine was so that, was all of you wouldn't have to like create one. But if you created one, great. You can just replace the, you know, replace token, replace project ID, replace dataset. And you should be able to use yours instead. And what was the process that DND that works? That's a great question. So typically, obviously, like I said previously, you know, with most React projects, you've probably seen this, but in case you haven't, you don't wanna put your tokens inside your code. This is like a really, really bad idea. Do not do this. The way typically that people do this, is that they will take this token, okay. They will create a.env file. Okay. And they'll paste it in there, call it sanity underscore token, okay. And what you then wanna do is then use it as process.env.sanity underscore token. And to use this, you're gonna want to use something like that. There's a, if I recall correctly, there is a, what is it called?.env? Yeah. There is a package called.env, which knows how to read this.env file and automatically inject it into your environment variables. Or if you wanna go like old fashioned, you can literally just run sanity underscore token equals to whatever, and then Gatsby develop, and you can pass this in. Similarly in CI, you would set it in some dashboard somewhere. Does that make sense? It's just an environment variable. Okay, thank you. All right, okay, you're welcome. That's great. Do we have any other questions? I think we have one more question in chat that I wanna quickly take a look at before we continue, but if you'll have more questions, feel free to ask. Steve says, is there a particular way Gatsby handles env's for multiple environments prod dev? Excellent question. Short answer, not really. I mean, if you wanna do multiple, and here I imagine when you say environment, you mean environment in terms of like the real world where you have a project and you have like a staging environment and a development environment or production environment perhaps, right? Steve says yes. All right. And in that case, what you typically wanna do and development is likely gonna run on your own machine perhaps like for most devs. Staging is gonna be on some, staging.service.name or whatever. The way Gatsby would work in these cases is that, you would literally just create two Gatsby sites. Like, you would create two Gatsby sites on Gatsby cloud or Netlify. You would set the same GitHub repo but you would have different ENV variables and one would set to say production in your CMS of choice. The other would be set to say development or whatever that data set is or whatever your CMS calls that concept. Right? You will change the environment variables. And yeah, it's not... There isn't any... I mean there are conventions, obviously but there isn't any like default inbuilt way in Gatsby to do that.

You will just have multiple instances of your site. Does that answer your question? Yeah. Okay, cool. You're welcome.

All right, so now that we're back with all of that let's continue with where we were. What we were doing is we were trying to get sanity working. We got it working and we have in the one of my browsers. Okay. And we saw the site working. We saw all the pages running and so on. Right?

What we're going to do now is we're going to go back and add one more CMS really quickly and I have... I have... You know what this time I'm going to use a Contentful project that I already have. And it looks like I have a project called pets of Gatsby. If you haven't used Contentful before hit contentful.com, sign up, try it out. It's pretty cool. I like it. It's great. Now, again, just like sanity, the way to use Contentful would be to add a plugin. The plugin in this case is called, as you would guess Gatsby source Contentful. Okay. I'm going to add that plugin really quickly. Okay. I'm going to go back to vs code and add our plugin into config and say Gatsby's source Contentful. And in options this time, we're going to go ahead and you know, set a couple of options. So for those options, let's take a look at what options Gatsby source Contentful needs. Here is the plugin page on gatsbyjs.com. There you go. It needs a space ID and it needs an access token. Okay. So this time let's go ahead and paste that in here. Okay. Let's actually do the.env thingy that I just mentioned. So the way I'm gonna do that is Gatsby actually uses.env so you don't need to install it. It comes with Gatsby. So just require it, and then you can hit.config. And I think that takes a path if I recall correctly. So this should just work and this path is the path to your.env file. Okay. So it looks like this is correct and it does seem good right now. Let's move this token over into our.env file. Oh, I think we already did that. Okay. So I'm gonna say process.env.sanitytoken. And for Contentful, we're gonna call it Contentful access token. And for space ID, space ID is something you can stick into your code like that's not particularly a secret or anything. So let's go and find our space ID and our token. So I'm gonna go to Contentful, go to settings, go to API keys, right. And I think the space ID is this one right here. Yeah, that should be it. So it's spaces slash the space, right? So let's go ahead and paste that into our code in here. And for our token, I'm gonna go ahead and generate a Gatsby Contentful token. So I'm gonna say react submit, token, okay? I'm gonna generate one, please don't copy my token and please don't take our site down. So I'm just gonna paste it in there really quickly. That is a recording. You could technically freeze frame and get like my token, but I will revoke the token after this workshop ends. I see something on chat. David says thanks. Doty and be for different environments. Yeah, absolutely, Susan. That's super cool. You can do that four and that would pick Nordy and V and then do it for them for production. I just hard coded it into a dot ENV. So, all right, I'm going run yarn Gatsby develop again and see how that works. This time it failed again. It says contentful space blown master blood and work. So it seems like something's up with my token, right? Like it seems like my token and my space ID didn't work together, and that could have been a variety of things. Let's find out what that was. So, it looked like, okay. So it looks like the token I made is this one? Did I not copy the token correctly? Let's just generate one more topic really quickly. All right? React summit token to generate where and copy that and stick that in here. I'm not sure what I did wrong, but we should find out in a minute. This also did not work interesting, which means that maybe my space ID is wrong. Let's go back and take a look at the space ID. So if we go to space home, or if I go to settings, general settings, so this is the space ID, is that what we set? Yes, it is. And the token is from API keys and I got it from content management. I think I need the token for the content delivery and not the token for content management. I think that's the problem. Because content management, I think, would be a token for being able to edit the content and we don't wanna do that. We just wanna fetch it. So I think that's what it is. So I'm gonna get delivery API. I think this is the right one. Actually, I'm pretty sure that was the issue. I'm gonna paste that in there. And now, let's run yarn gatsby-develop. And it should just work. And it looks like it is just working. There you go. So it's getting data from sanity and now it's fetching data from contentful, right? So as this happens, let's quickly talk about a few things.

One, you have multiple CMSs now on the site. Is that a normal thing? Yeah, absolutely. Most real-world projects start off with something and then turn into something else entirely over time. And we've all seen that. And that's okay. With Gatsby, you don't have to stick with one source of all your data. Like right now, our site has data from the file system. It has some data from sanity. Now we use some data from contentful, and that's fine. That's perfectly okay. You can have multiple CMSs and multiple sources. In fact, we encourage that. Use the right product for the type of data you need. Often we've seen sites that have WordPress for the blog and Shopify for e-commerce and then like sanity for other stuff, right? And that's normal. Like feel free to do that.

Second thing, as you noticed again, the process is the same with respect to the CMS. You want to install a plugin, get your tokens, right? Obviously sometimes that's not as trivial as we saw. You know, there's some complexity there. You're gonna have to figure out which token it is, create the token and so on. But once you've done all of that, the process remains largely the same. You just need to add that config and install a plugin. And once you're done with that, again we will do the same thing we did the last time, which is we'll go back, we'll read on Gatsby. We'll open graphical and take a look at all the new stuff we have. And again, this time we have a lot of new stuff. We have all contentful blog posts, as you can see. So this time, let's write another query. Let's take a look at what blog posts we have. This is, I have absolutely no memory of what this space is. I think it was some test space when I was trying to do something. So it looks like I have 4,000 blog posts, which I probably generated from which looks, I mean, definitely looks like lorem ipsum. I think I was trying to, oh, there you went. Some the ones that look like they were manually created after that. But anyway, there's blog posts, there's notes in this title. So let's do the same thing we did previously. Quickly to wrap up this part, which is we create pages for each one again, right? How are we gonna do that? We're gonna say, this time we're gonna say, I think it was contentful blog post, was it? Yeah, It was Contentful blog post. So I'm gonna say Contentful blog post.title, okay. And of course the.js, I always forget that. Let's put that in, let's copy the entire thing from the sanity one. Okay, and let's change the query, obviously. So the query is gonna want, you're gonna want to, I think it's gonna have to be Contentful blog post, and you're gonna want to remove title. And that should... There you go, that just works. So let's replace this to Contentful blog post, Contentful blog post, replace it here. And then, let's only fetch the title. Cause we don't, we're not using the rest, right? So let's do this, and then let's see if that just works. I'm gonna go ahead and restart Gatsby. And there you go, Gatsby is now building. This might take a little longer than usual, by the way, cause remember this time we have 4,000 pages, because we're using an old Contentful space of mine, which has, you know happens to have 4,000 pages. Of course, the nod of 4,000 pages are going to be created now in development. When you run build, that might take longer, because it's gonna have to write HTML for each of them. So it looks like this is ready. Let's ensure that's actually the case. We're gonna run, we're gonna go to localhost 8,000, and we'll go to our 404 page. And there you go, we have 3,652 pages. So maybe not 4,000, but quite a few, nonetheless, right? And all of them got created. And again, what was the purpose of this experiment? The purpose of this experiment was to try to integrate multiple different CMSs to our page and see how we would do that, right? So that's what we've done. We've used Sanity, we've used Contentful. In fact, we have both running right now. We have pages being created from all of them. Of course, in the real world, you wouldn't just render the name of the title. You would render whatever else you want. But that's just React, right? That's plain old React, that would work the same way you would do it in React land. And you do similar things. You'd write queries in here, and then you'd use that data that gets parsed as prompts. So with that, we've used Contentful and Sanity. And now we're gonna move into some more fun stuff. But before we do, do you have any other questions? Is there anything about this that was tricky or that you didn't quite understand?

In Contentful, I noticed you had a page cross-check with all the data. Does it have a default, like the Sanity, to get some data? Great question. No, I don't think so. Or maybe the answer to that is yes, but I don't know, to be honest. I haven't used Contentful in a while. The data that happened to be there, by the way, this is one of my old test projects, I think I was programmatically creating a lot of blog posts, entries. I was trying to test something out. So I created these at some point, but they didn't come from Contentful. Contentful might have a way to have sample data in there, but I don't really remember off the top of my head. Check out Contentful.com. I'm sure there'll be answers there.

So you're getting the work. Yeah. That's a great question. So this is what we spoke a little while ago. Let's just quickly go through that again. When we create a page in Gatsby using the file system route API, what Gatsby does is that it internally under the hood looks for all of the nodes of this type, looks for all of those units of data, which I'm referring to as a node in this case. And that's what we do in Gatsby land. But anyways, looking for all of these sanity products. And for each of them, what it's doing is it's passing in the ID to you when this page is being created. So you can just say that, Oh, I know ID will be passed in.

But anyways, looking for all of these sanity products. And for each of them, what it's doing is it's passing in the ID to you when this page is being created. So you can just say that, Oh, I know ID will be passed in. So you say that one of the things I'll have in this query is the ID, which is a string. And then I can pass an ID, which is the variable, which would should be equal to the ID param for this query. And this is being injected by Gatsby. Does that make sense? Yes. It passes the ID and everything else. So you are using ID for to get the. Exactly. It's only passing an ID. It doesn't pass in everything. It's passing ID in, and you can use that ID because that's typically the best identifier that is, you know, find something by. And then you can use that to query and then you can fetch in whatever else you want. Then it's just your query. Yeah. Good. If you have any other questions? No? Okay, sweet. So let's continue.

Now we'll do some more fun stuff. All right, we're gonna, in this section, in part two what we've done so far, just to quickly review, is we've added some more plug-ins. We added the Contentful plugin, we added the Sanity plugin, we were able to fetch data from multiple, both of these CMSs. And, you know, one thing that we also did is we worked, we continued on the stuff we learned in part one, which was, how do we use the File System Route API, and we use that twice. And we created pages for each of these products. Now that's done, let's do some more fun stuff. Gatsby has a lot of cool goodies built in or as part of plugins that we, the Gatsby team, maintain. One of them is called Gatsby Plugin Image. And I like Gatsby Plugin Image for a variety of reasons, and I'll come to that, come to it in a second. But remember how, when we were installing the Sanity plugin, we installed Gatsby Plugin Image? That's the same one, this is the same plugin that we're talking about. Before we do anything else, let's take a look at the Gatsbyjs.com plugins page and see what that plugin is about and see why we care about it, before anything else. So you see that in here it says, Gatsby Plugin Image it's the third, highest plugin in popularity. It's downloaded 190,000 times, apparently it's an official Gatsby plugin because we, the team, maintain it. Let's click on this and take a look at what this plugin is. So what this plugin is doing is it's letting you do responsive images and it's adding them out of the box, but all of this docs stuff is fine, but the thing that should really drive this home is, let's take a look at an example site which uses these. I think a good example site in this case would be the Gatsby plugin image sample site, I don't recall what the URL is, so I'm just gonna Google for it. And I think the old plugin should have a sample site which is the same one, if I recall correctly. Okay apparently not. I think I have it on netlify, let me look for that very quickly. As you know what, let's just use any other, let's look at any other Gatsby site, let's look at the site that we're on right now, which is gatsbyjs.com. So for each of these images that are being loaded, and there aren't a lot of images here so I should probably open a page that has real images, let me show you the... Just give me a second. I am going to go to the Gatsby site showcase and find a site. So let's look at, so you know what, let's not even find a site, this is a Gatsby site, so did you notice how those images first loaded, okay look at what's happening right now, did you notice how those images first loaded as blurry place holders and then the image got downloaded, did you notice that? Look at that, it's happening again, and then also if you look at say, the American Foundation for Suicide Prevention, if you look at, if you inspect, and you take a look at that image, you'll see that it's actually doing a lot of stuff for you out of the box. It's setting, if you've seen responsive images before, the way to do that right now is that you can set different widths and then you can have different URLs based on the one you want to render depending on the width of your browser. And then Chrome recently started supporting lazy loading out of the box, in case you haven't known that, the way to do that is you can set a loading attribute to your image and set that to lazy, and then it'll only be downloaded if the user is actually, has scrolled up to it or around it. So anyway, my point is, these are all really cool things that you can do with images. We know that images on the web are hard. It's not easy to have a site with really responsive images that load quickly, that get preloaded, that have these placeholders and so on. That kind of stuff is hard. What Gatsby plugin image is, is that it's a plugin to make all of that stuff easy. And how does it work? Now that we know what it does, the way it works is like any other Gatsby plugin, you install the plugin by adding it in npm. Okay? And once you've installed the plugin, which is what we just did, the next thing you're gonna want to install is a couple of other plugins. There's another plugin called Gatsby plugin sharp, and another one called Gatsby transformer sharp. Don't worry right now about what those do per se, but just remember that they have to do with images and they basically process your images and create all the necessary, you know, versions that you need. So I'm just gonna go ahead and yarn, add Gatsby plugin sharp as well and Gatsby transformer sharp as well, okay? I already installed Gatsby plugin image. You probably also did that in case you haven't go ahead and install Gatsby plugin image as well. So I'm adding yarn, I'm running yarn, add Gatsby plugin sharp. And after that, there you go, that's done. So now let's run yarn add Gatsby transformer sharp. So now that that's running, let's be on that. Okay, so that's done as well. And now in my Gatsby config, I'm gonna want to add these three entries, which is Gatsby plugin image, Gatsby plugin sharp and Gatsby transformer sharp, okay? And so far you're probably wondering what these are, but just know one thing, that they are plugins that will work under the hood to process your images, right? You saw that the image on the example site had multiple different resolutions and the right one was picked. Gatsby plugin sharp will take your source image and transform them into all of these versions so that it has all the right ones accordingly to do all of that. And all of that just happens under the hood, we don't need to do any of this. So now to drive this point home, let's do what this example doc page suggests, and I'm also gonna link to it for later for you all. So, we're gonna create a new image and take a look at what that looks like. So the way we'll do that is let's go ahead and set an image in our project. We have, I think we already have one that came. There you go, it's the Gatsby logo and it came with the sample site, so let's just go ahead and use that, okay? And it's in source images icon. What I'm gonna do is in the index page, I'm gonna go ahead and render this image, right? And really, all you really need to do is just import a React component and render it, it's that simple. So what you're gonna want to do is say import, I think it's called static image. Like, yeah, static image from Gatsby plugin image. There you go. And you're gonna want to say, render a static image component and for that component, I think it's called, what is it called, path? What is it? Ah, it's source. Right, none of them. So you're gonna wanna set source and then set source to the path on this to where the image is. In this case, the image is in one directory back and then into images and then into icon.png. Right, and this is similar to how you would use an image like in plain HTML. You'd just have an image tag and a source. So think about it similar to that. You just need an image tag but instead of like an image tag that is the basic default browser image tag, you're using this React component called static image that comes from Gatsby. And all, the only image that I really have here is I have one version of this PNG, which is 512 into 512 pixels, right? And it's on disk. And let's take a look at what this does. So I'm gonna run, now that all of this is done, I'm gonna run your own Gatsby develop. And let's take a look at what this does. So it's running the sanity stuff, it's fetching all of our data and still creating pages, there you go. Looks like it's now almost done. There you go, it's done now. So now let's go ahead and go to local host 8000. Sorry, not 9000, 8000.

Look at that, you see that you have an image there. At this point you probably aren't impressed, you're probably like, okay, I could've done that with just an image tag. But the difference is that, did you notice how it, I mean it's hard to notice because it happened so quickly, but it rendered, if I in fact, a way to look at that is let me go ahead, and in Chrome set our network to like throttled with like slow 3G, and let's see what it looks like. And I load it in slow 3G, you'll see that it loaded and then it'll have a placeholder and then it'll slowly fade in. So let's take a look at that. So now it's, there you go, it rendered the backup, and now it rendered a placeholder and then the image came in when it got downloaded, right? So that happened, and then if you look at the tag itself, you'll see that it created this picture tag with source. It had these wrapper divs for the placeholder stuff and the placeholder in this case is opacity zero and transition opacity, blah, blah, and just the background color with this color, which is purple. And then it added all of these image tags with all these different sizes, right? You have a size in, you know, you have different sizes for these different viewport sizes. You have a 128 width, 512 width and so on. And remember, none of these images were ones that we added in. These just, you know, got generated, and that's what Gatsby Plugin Sharp is doing for you. Gatsby Plugin Sharp is generating these images for you and it's sticking them in static. It's created a webp file in here and, you know, it creates all the image files you need. And remember, again, we didn't have a webp image to start off with, we had a png, but it created this webp image from scratch for us as well because webp is a lot more efficient, both in size and also, you know, with browsers and how they load them and so on. So all of that stuff, all of the stuff that you'd want to do in modern web development to render images just happens behind the scenes and you don't have to worry about any of that. And that's how static image works from Gatsby Plugin image. And that's why you would use Gatsby Plugin Image, Gatsby Source, sorry, Plugin Sharp, Gatsby Transformer Sharp and so on. Does that makes sense so far? I see the chat has, does the image plugin handle SVGs? Great question. Short answer, no, it doesn't, as far as I recall, because SVGs aren't exactly images. I mean, they're, you know, browsers can natively, like A, they can natively render them, B, you don't really need a lot of transformations on SVGs typically because again, you know, they're vectors and they're not, you know, images, so you don't need to resize them or do a lot of this processing in real time. So gatsby-plugin-image does not handle SVGs. Do we have any other questions about gatsby-plugin-image and how to work with images? Nothing, so far? Okay, cool, so great. Sorry. The main advantage is the lazy loading is loosing, right? The main advantage is multiple things. So, a quick, like, a list off the top of my head, but there's more that you can learn about it on the docs. One is lazy loading. Two is if you have a really large sized image that's, like, you take a picture on your iPhone or something and it's 4,000 pixels, right? But you probably don't want to stick a 4,000 pixel image on your site. Gatsby-plugin-chart will automatically post process and create five different versions of it for Retina and for Mobile and for Tablet and so on, and it'll put all of them in your public directory, it'll add all the source attributes to make sure it loads the right one, it'll also add a placeholder, which will generate on its own depending on the color of the image. You can have multiple different kinds of placeholders, the one we saw, which is the default, is just the color picker one, which just sets the color to the whole box. You can do ones where there's a slightly blurry image as well, which we saw in the example side. You can learn how to do that stuff on the plugin image component docs. If you wanna quickly look at what placeholder blurry looks like, it's literally just placeholder blur. That's all you need to set. Let's actually do that right now to just show you what that looks like. I can just set placeholder blurred. And again, I don't have to generate the blurry version of the image, I don't have to do any of that. Gatsby will do all of that under the hood and just work. So, all you need to do is bring an image, use Gatsby plugin image and it'll do all these things for you to make it good and fast and perform it. Does that make sense? How's it going, you're good? Good, thank you. Yeah, you're welcome. So now that I've changed placeholder to blurred, I'm opening localhost 8000. It's taking ages to open because I... Remember I said the network throttling? I should probably revert that unless we want to do this workshop at really slow speed. So I set that to no throttling and refresh and still stuck. Okay, let's close that tab. Another one. There you go. Notice how this time it was a placeholder, which was blurry. I can slow that down a tad in case it's hard to see, but if I move to fast 3G and hit refresh, you'll see that instead of a placeholder that's purple, there'll be a blurry image and then that blurry image will transition. Did you see that? There you go. So that happened because I set placeholder to blurred. And again, the blurry version of the image was automatically downloaded. If you look at how that happened, you'll see that there was an SVG for it that was first downloaded and then it started downloading... Sorry, I'm sorry, the SVG is something else. It downloaded the really tiny version and it rendered that as blurry and then downloaded the main FFP version. And while that was downloading, the blurry one was rendered, which was like a 20 pixels by 20 pixel image, right? So anyway, that's how Gatsby plug-in image works. Now we move on to more fun stuff. Before we take our next break, we're gonna talk about two things, the layout component and client side routes, all right? And this is the kind of stuff you're gonna have to pretty much do on mostly every Gatsby project, which is why it's fun. So first, let's look at the Gatsby layout component, right. The Gatsby layout component is, now if you're creating a React site, often you want to do, you know, maybe animations or you want your site to, you know, you're building an SBA typically, and you want to be able to hold on to state while you transition between pages, right? You're gonna want to have maybe some kind of, I don't know, maybe some menu that's open and then maybe you can navigate pages and the menu still stays open. Or maybe you have a search bar at the top and you don't want to lose input on it, right? There's times when you want to keep some state between navigating. And because Gatsby has a router in built and we use reach router and we do stuff on top of it to make all of this work, because we have a router built in. Sometimes you're gonna want to go a step behind that router and say that I want some kind of layout and have Gatsby render stuff within it. So that's what the layout component is in Gatsby. It's actually really simple. All you need to really do is just create a component and render it in every page. And then you're going to want to tell Gatsby to not really render that one component. Really, it's just that, it's actually a lot simpler and it's really the way you would do it in any React site. And it might shock you that you don't need to do anything more. So let's quickly take a look at what that looks like. In code, you typically create a component. Let's create a directory first, call it components. In that, let's create a file called layout. Now, by the way, this file can be called anything. I'm just calling it layout because that seems like a reasonable name. And I'm just gonna copy paste the component that came in from here. All this is doing is rendering children and it adds some CSS at the top, right? So I'm just gonna set that. All I now need to do is, in my pages, just import it and render it as the parent. That's really all I'm gonna want to have to do. So I'm gonna say components layout, get me the layout component. And when you render the main, just render layout right before it. Okay? And you're gonna wanna do this in every page that you have, right? So you're gonna want to do the same thing in here and so on. You're gonna wanna have to do this in every page. And after you do that and run Gatsby develop, just continue working the way you normally would know we're working and Gatsby will know that there's that shared component at the top and it'll preserve state across pages. It will know that it doesn't, that you don't want to re-render that specific page. That's it. Previously in Gatsby V2, there was a little more that you'd have to do. So this failed because interesting undefined is not an object. What did I forget to do? Did I not, huh? Anybody know what I missed this time? Undefined is not an object. That's not a very helpful error message.

I'll tell you that. Let's try and Chrome. Maybe it was a safari thing. Interesting. So it was a safari thing. Oh, but it, hmm. Fun. I don't know what that was. So I'm gonna, we're gonna pretend like that didn't happen. But, yeah, I'm really not sure what that was. Maybe it was some API that isn't available in Safari. Anyway, so now that I've got a second post, and second post was, you know, second post was my component that has, you know, that as you can see, you can see the, the CSS being applied, right? And if I go to, say, the 404 page, and navigate to one of these pages, you'll see the CSS is applied there as well. Yeah, I mean, this is a really trivial example. But the point here is that if you need, this is why you would use a layout component if you need to preserve state between page navigations. And this is how you would do it. You would just create another component and send it as a parent for every component that needs to have it, all right?

Finally, before we take a break into our third part, we're gonna talk about, we're gonna quickly talk about CSS. Because I know that's not something we've touched a lot here. And we have something in the chat. By state, you mean styling state, great question. Let me answer that in a minute. So we're gonna talk about CSS. And we're also going to talk about client-side navigation and dynamic pages. So first let's answer Francesca's question. By state do I mean CSS or styling state? Yes and no, yes as in yes, that could be one of the things. But no as in there could be a lot more. Sometimes, it might be state in JavaScript. Like let's say you have a model open. And you hit back, and it navigates to another page. But you still want the model to be open. Because you want the user to finish their work. You want the user to finish whatever that task was. Now that might be terrible user experience, but maybe that's what your product needs. So to do that, that you would have to manage state for the fact that that model is open, somewhere in your JavaScript. And that is the kind of state that you'd want to preserve even between navigations. And so it can be any state. It's basically React state that we're talking about. And that can be either styling, or some stuff in React or really anything. You would also do it for say menus, or for a search bar, or anything that's a parent of your site of your site's content. All of that is the kind of stuff you'd want to put in layout like footers, or menus or basically your shared layout. I'm thinking of another word there, or like a container. I hope that does that answer your question Francesca. It does. So now let's talk about styling and then let's talk about client side navigation and dynamic pages. Quickly for styling. How do you use your favorite styling library? Maybe you like style components and maybe you like tailwind. I really like tailwind by the way the answer is the same as the last time. You need a plugin, right? And what is the plugin called? Well, go search for it. So let's find the tailwind plugin. It's called Gatsby plugin Tailwind CSS and it's got a remarkably not very useful readme. So by the way, the stuff on the right gets rendered from the readme and it looks like the readme is empty, which is surprising. So let me view the plugin on GitHub and take a look at what's up there. Okay, so there is a readme but for some reason gatsbyjs.com didn't know how to render that. But again, how do you do this? You go ahead and install the plugin, add it to your Gatsby plugins in your Gatsby config and then you can go ahead and import your stuff and then just do what you previously. Under the hood, what are these plugins doing? These plugins might take care of your Babel plugin or config or your webpack config often for stuff like say Tailwind uses Poe CSS in the back. So the Gatsby plugin Tailwind package will add the Poe CSS config for you and will make sure the Babel config is set correctly and everything else is set up on webpack correctly including Poe CSS. Similarly, you could use Emotion and Emotion is super popular I'm sure most of you have heard of it. How do you use Emotion? Same thing, you install the Gatsby plugin Emotion, take a look at the plugin library, take a look at the docs, go ahead and add it to your plugins area. You can set some options if you need and everything should just work. Gatsby the plugin should be able to set up your Babel or your webpack config for you and things should just work. That is how you can use your styling library of choice.

Now, we'll talk about one more thing before we go in for our next break. And that thing is what about sites that also have some stuff that is just client side, like a dashboard or like a reactor? Now this is a really common use case, right? Let's say you have the site that we're creating, which is not very useful in the real world, by the way. Because no one wants to just scroll and read about imaginary products and art blog posts. But pretend like, pretend that this was a marketing site and this had a blog and this had like some products, and then let's say that you also had a way to, you know, buy these products and actually like check out and stuff. Now, remember, like I said previously in Gatsby, whenever you create a site, you're getting HTML that's built, right? And I'm gonna actually commit this and push it up for you all as I do this. So that you can also take a look and I'm just going to quickly make sure that our config doesn't have any sensitive tokens. It does not. So I'm gonna go ahead and I think.env is in, yeah, I should probably remove that. So, what I was saying was that you're probably going to want to, you're probably going to want to have some kind of part of your site that can't be built at build time, right? Like imagine a cart page. You can't possibly build every variation of a cart page at build time, right? Because depending on whatever your users would add to cart. So that's the kind of view in your Gatsby site that is a client site page, because it's a page that is not rendered on the server. It's not, not the server, I'm sorry, it's not rendered during build time. The HTML file for it doesn't exist, but you can still use it. And the way you use it is that, you have JavaScript, right? Typically, every Gatsby site is still a React site, cause Gatsby is rendering all the JavaScript for your page, and React as well. So once your page opens, and your JavaScript has been hydrated, it is then a React app. So you can have like client site pages in Gatsby, which are not, you know, rendered at build time. But to tell Gatsby to do that, there's something you need to do. So let's take a look at how that works. I'm gonna quickly, you know, I'm gonna quickly commit this stuff. Let me add the.env deletion. Oh, sorry. Add.env. That deletion should be in now. Yeah, okay, cool. So, commit. Add Sanity and Contentful. All right, so I've gone ahead and pushed that up. And now let's take a look at client-side pages in Gatsby. So you notice I always start each of these by, you know, just searching for it.

So you notice I always start each of these by, you know, just searching for it. And the reason we're doing that is because I also want you to get into the habit of taking a look at what our documentation really looks like. The documentation is actually really nice. You know, like, kudos to everyone who's worked on it, including the community and all of your contributions. The documentation on gatsbyjs.com is quite comprehensive. So if you have a question, typically you can just go ahead and look up documentation.

Now, let's talk about how, you know, stuff on, like, we were talking about, you know, cart or client-side stuff, right? Now, the way client-side pages would work in Gatsby is typically, now, there's two parts to it. Okay, the first part is A, you're going to want to tell Gatsby itself that, hey, this is just JavaScript. And like just, you know, don't do anything with it. You know, like, don't render it on the client, I mean, don't render it at build time. And turns out the way to do that is just JavaScript, right? You don't really have to. There's nothing to tell Gatsby, you just write it the way you normally would. For example, you can say, let's say you can say in layout that you render like someone logged in, right? But at build time, you want to always, you know, render it as logged out because you can't have any specific user that's logged in. So all you do is write your React code the way you typically would. And you say that, you know, if you're logged in, render this, or otherwise, you know, render something else. So you do it just the way you would in react in general. So that part is, there's nothing special there per se that you would have to tell Gatsby. But there is something more to it. I mean, it's not really that simple. There is the fact that... What about where you're hosting your site, right? Like often you would want to host this page on, let's say, Netlify. And if a user, let's say I send you my cart and I want to show you what it looks like. And I call you and say, hey, you know, hit the link I just sent you and log in with my credentials maybe. And you can take a look at my cart. You're gonna want to make sure that when the user hits that URL, your CDN knows which page to render. Because at that point in time your CDN might not... Like your path might be deep. You might have, say, or you might have a dashboard with settings where it might be, say, slash app slash some random deep URL. That's part of your settings that isn't rendered at build time.

Now, typically when you're rendering static sites in Gatsby, you're gonna get a public directory with each of those paths. So, there's no guesswork there. It's just a path. A page is just an HTML file at that path. But with client side pages, that's no longer the case. You're gonna have to tell it that every time you hit dashboard slash app slash blah, you're gonna want to go back and render another path. And that's where something comes in, and again, famously, the answer is a plugin. Like, literally, just another plugin. And the way you do that is you would have a plugin for your specific CDN. CDNs that are very popular are Netlify, Netlify is great, love Netlify. There's also Vercell, right. Now, Netlify has a plugin and in fact we maintain it, the Gatsby team, along with them, it's called Gatsby-plugin-netlify, if I recall correctly, yes, there you go. And what that does is that Gatsby-plugin-netlify will automatically create your headers and your redirects and all of that stuff that Gatsby would need to work under the hood. You don't have to do anything other than literally just install Gatsby-plugin-netlify and it'll figure out the redirects and the headers that you'll need to make sure everything works out of the box, and it'll also write those files to your public directory so that when you push up to Netlify, it just works. Similarly, if you, I see something in chat, we have, do client-side pages have access to ENVs? Excellent question! So there's a little more nuance to it. The short answer is no, the long answer is you can make that be available. And the way you would do that is in Gatsby, if you have any ENV variable, you can prepend it with gatsby-underscore and everything that's prepended with gatsby-underscore will be available at runtime. So, because it's basically injected into your JavaScript. And you've gotta be careful here. And the reason we do that with the only stuff that's within gatsby-underscore and not everything is because your ENV variables are sensitive that sort of stuff is not meant to be available at runtime. Otherwise anyone could open your site, look at source and get your tokens out. But which is why it doesn't just work for all your ENV variables. And that's why it's opt-in. So when you want to opt in and say that you want a token to be available, the way you do that is right here. This is a page you wanna look at. The short answer is you'd want to prepend it with gatsby-underscore. If you look somewhere on this page, it should tell you the same thing. There you go, right here. So, prefix with gatsby-underscore and those will be, they will be in your, same as CRA and next. Yep, sure. I don't actually recall the way CRA and next work. I'm presuming they also have some kind of prefix, is it? Probably react-underscore something. I see something on the chat, yes? Okay, great, sweet. So yeah, same way as them, that's how you'd wanna do it. Be careful though, you're opting in, you know that that's going to be in your JavaScript, right? So you're gonna wanna make sure that's not sensitive stuff. Anyway, so that was about how you add another plugin to make sure your headers and redirects are set up correctly. You can also, by the way, do your own like custom headers or custom redirects. You can even write a custom plugin of your own if you're using a CDN that is supported already and that doesn't have a plugin. I'm obliged to tell you that Gatsby Cloud, our own CDN, is also pretty cool. You should try it out if you haven't tried it out. We'll talk a little more about it in a bit, but for now, one thing I can tell you is that there is a plugin for that as well. It's called Gatsby Plugin, Gatsby Cloud, as you would think. And that will set it up in Gatsby Cloud for you, things will just work. In fact, we support a couple of stuff that the other plugins don't support as well. And you get your site hosted on a worldwide CDN powered by Fastly. So, anyway, that's how layouts work in Gatsby and that's how you do client-side routing using, you know, React. And the plugin you'd have to add to make sure that it works out of the box for that stuff. With that, I'll take a few more questions if you have any, and we will take another 10-minute break and then come back for the last bit of our workshop. So, how are all of you feeling? Do you have any questions? Are you tired? Is there something specific that you'd like to talk about more in the last part? Feel free to tell me now. How's everybody feeling? I'm feeling fine. I got a little bit tired in the last part of the client routing, to be honest. And I didn't get much about it. So, you were talking about the plugin, but you could keep that part. Sorry about that. That's perfectly fine. What I'll do is after we come back, and I'm a little tired as well, I mean, understandably so, when I come back, and when we take a look at Gatsby Cloud eventually, like towards the end, I will show you an example of that to make that a little more clear. And another thing that I would say is also take a look at the URLs that I've been posting in chat. The reason I'm posting them there is so that we can come back later and take a look at those because there's a lot of documentation. Often it's hard to find exactly the right page. But yeah, I will repeat that once we're back. Do we have any other questions? Oh, okay, sweet.

TypeScript integration. Great question, short answer, works out of the box. You can do nothing, just create a.ts file and continue doing what we've been doing and it'll just work. Just works right out of the box. There are exceptions. You can't do it in Gatsby node, for example, right? Like you can't do it in Gatsby config, but if you create a page in source pages and it's a TypeScript file, or if you create a component, or if you create any other file, which is the.ts file, it'll just work out of the box.

Any other questions before we go for our break? No? Okay, great. So we have... Let's do a 10 hour, 15 minute break, take your time, relax, get some coffee maybe. We come back, we will summarize everything we've done. We'll take a look at some more advanced topics. We'll take a couple of questions. We'll look at Gatsby Cloud. There's a bunch of stuff we'll look at. And then finally, we'll take more questions if we have any. But yeah, with that, I'll see you all back in about 10 or 15 minutes. Okay? We'll get some coffee and I hope to see you all. Is everybody back? Somebody back. Okay, we have a question from, all right, Francesca is here. Hey, Francesca. We see David with a thumbs up. Hey, David. I see Steve had a question. I had a problem typing the props object of a page when I use TypeScript. Really good question. And it's a little tricky to answer. There are plugins that will generate TypeScript typings based on the GraphQL that's generated. I will not, I mean, I won't, I can't particularly confidently claim that they are accurate and then they work well. This is something that we are exploring and we intend to bake into Gatsby so that you don't need another plugin to do it. If you would like to try it out though, the way it all works is that Gatsby, you can use a, so Gatsby has a GraphQL schema that it generates based on your data, right? You can take a look at that GraphQL by using Gatsby plugin, I think it's called schema snapshot, if I recall correctly, yeah, there you go. It's called Gatsby plugin schema snapshot, and it's an official plugin, we maintain it. What this will do is that this will let you write your GraphQL generated schema into a file. I think the default is, oh, there is no default. You need to set a path. So you can set schema.gql or whatever your path is. And then you can, you know, generate TypeScript from GraphQL, I think there's a Gatsby plugin for it. There you go, yeah. There you go, yeah. It's called Gatsby plugin GraphQL code gen. So it'll like generate TypeScript plugins based on your GraphQL. I think, there you go, yeah, automatic type generation. But again, I can't verify, I can not claim that it's, that it works really well. I haven't personally used it. And this stuff is honestly really tricky to do. So I would wait till we bake that in. And we do intend on doing that. Does that answer your question Steve? Can you share your screen? Oh, I'm not sharing my screen. Oh, I'm so sorry. I've been talking this entire time assuming that you could see my screen. My apologies. So this is the plugin. It's called Gatsby plugin GraphQL code gen. Let me check it in chat. There you go. And, yeah, the plugin that you need to get your schema is called Gatsby plugins schema snapshot. So here's that plugin as well. So try them out, but yeah, that's how you do that. Sorry, with that, let's quickly, we don't have a lot of time. We have a roughly 20 minutes, give or take. But we are going to take, we are going to cover a couple of quick things before we end. And hopefully we'll have a little more time for questions. I'll also try to stay on a tad longer than our time so that I can take more questions. By the way, in case you haven't been able to like, you know, in case you have questions that I can't answer in time, I do suppose as a Discord, if I recall correctly, I'm not sure what the Discord is for this. Is it in here somewhere? Are you all on the Discord? Is it the GIT Nation Tech Community Discord? Or is there another Discord? I'm pretty sure it's this Discord. In case it's not, there's Discord. And in case it's another Discord, I will be on whichever Discord there is. And on that Discord, totally feel free to like, you can even send me a DM. I'm always happy to answer questions. In case that doesn't work out, there's also a Gatsby Discord. And the Gatsby Discord is, you can find the Gatsby Discord. I think it's gatsby.dev slash Discord. Or this URL also works. Once you get on any of these Discords, look me up, send me a DM, I'll be happy to answer them. Steve says he couldn't find the channel on the Git Nation Discord. All right Steve, no worries. Join the gatsby one, send me a DM. And then ping me the right channel, please. I should've probably joined it previously, but I haven't done that yet. But I will answer your questions there, whenever that is. Okay, I got it from Aishwarya. Thank you Aishwarya. Oh, it is the same one. It is the Git Nation's tech communities Discord. Okay, cool. So it is the same one. I am on the Discord. You should be able to find me. In case you can't find me there either, please feel free to find me on Twitter and ask me a question, and that's fine. But anyway, with that, and I'll share all of this at the end of the workshop. So with that, let's go ahead and continue. There were some parts of this workshop that I intended to cover that were considerably more advanced topics, including stuff like having data agnostic graph QL schemas.

Instead, what we'll be covering now is now that we have data from, you know, we have data from, so, okay, let's surmise what we have covered. In case anyone, I think Michael just joined. So for anyone else who's also just joined, we've had two blocks of time in our workshop, so far. We've covered what Gatsby is, how it works, building a Gatsby site, running develop to develop a Gatsby site, writing graph QL queries, using Gatsby image to have, you know, images with lazy loading, et cetera, using Gatsby plugins to connect to your favorite CMS, using the page route API to create pages from your data. We've looked at the layout component. We've looked at how you would use a style library of your choice. You've also looked at CDNs and redirects and client-side pages and so on. So finally, now we'll take a look at a couple of other things in the Gatsby ecosystem. The Gatsby ecosystem is complex, has a ton of stuff, but there's a lot of stuff that's really helpful to use. And a couple of those things are the things we're gonna talk about now. First one is Gatsby.js starters. You can use starters with Gatsby. What a starter is, is that when you create a Gatsby site from scratch, remember when we ran npm init gatsby, that created a Gatsby site from the Gatsby minimal starter, which just creates two pages and source pages, and that's it, right. But you can have much more complex starters. For example, you can have a starter for a blog or you can have a starter which is a blog but specifically connects to some CMS. Like for example, the starter for Netlify CMS, you can have a starter for a portfolio site. There's honestly, I think there's like 500, there you go, there's about 489 starters right now and there's a lot of starters that might not even be on this Gatsby starters page. If you want to find this, here's the URL. Now to use a starter, if you were to find a starter and you would like to use it, the way you would use that starter, and we're gonna try doing that right now, is that you could say, let's say we want to use Gatsby starter block. And the way you would use Gatsby starter block is the first thing you want to do is make sure you have Gatsby installed locally. As you can see, not locally, my apologies, globally. As you can see in this case, if I just run Gatsby, it does do something, which means it is installed globally. The way I would create a new Gatsby site is I can say Gatsby new, and then I can enter the starter that I care about. What you'd have to enter is the URL, so in this case, it's this one, which is the Gatsby starter blog. I can say I want Gatsby starter blog, and this is the URL. And I need to also enter the site name because it needs to know what directory it needs to put it in so I'm gonna say Gatsby new, new-blog. And then I'm gonna enter the starter URL. And then it knows that it has to clone that, it creates a new site from Git. And it creates the directory layout, so it does everything it needs to do for you, and then you can continue from there. So that's what a starter is. Let's just quickly wait for this to finish and see how it works. And then we'll move on to the next thing in the Gatsby community, which is Gatsby themes. Now, if in this starter you were to run Gatsby develop and take a look at what that looks like, you would see that we will have a blog that would just work. There you go, there's a blog, there's some fun typography, and there's a picture of Kyle, and there's a blog that works with images, and it works from markdown. And again, a starter is really just a Gatsby project with plugins and with a collection of plugins and some code, right. But there's a lot more stuff. Because here's the thing, there's a limitation to starters. And starters are called starters because you can start off with them, but often, if there were, when you create a site from a starter, you effectively inherit that code, right, because if there's something you need to update in that code, you maintain it and now you'll have to do it yourself. So then, there's Gatsby themes. And let's take a look at what Gatsby themes are. Gatsby themes are almost like an attempt to solve that problem. And what a Gatsby theme is, that instead of using a starter to start off with, you can install a Gatsby theme. And that will be a dependency in your project. And you can update the dependency like any other dependency, and it would continue working, right? So, now let's take a look at what a Gatsby theme looks like. So, how we're gonna do that is, I'm gonna look out for a theme. This time, I'm gonna do another blog, but this time, we'll use this blog theme, right? And what I'm gonna do is, if I wanna add it to an existing site, all I'm gonna have to do is add that package. So, let's do one thing. Let's go back to our. Actually, no, let's create a really minimal site, and then add it to that, okay? So, we're on npm-init, minimal-blog, okay? I'm gonna say no to everything, and once that site's created, a theme like a plugin needs two things. You install it, you install its dependency, and then you add it to your Gatsby config, right? So, let's go ahead and do that. I'm creating a minimal-blog project, which is going to be an empty site. Let's give that a minute. There you go, that's done. I'm gonna CD into it, before I forget. I'm gonna open that in VS code, which is in my throwaway directory. All right, and in here, I'm gonna say, yarn add gatsby-theme-blog, okay? And in gatsby-config, I'm gonna say, gatsby-theme-blog and I think this takes some options. There you go, it does. You can default to something, which is slash, but maybe let's default to slash block, cause I think that makes sense. So I'm gonna go ahead and set resolve in here, like we did. And remember, the pattern is the same for plugins as well as themes. Sorry, I had options set twice apparently. So let me set that. Options, we have base path block. And now that we've done that, let's just go ahead and... Okay, so it's done installing. Let's go ahead and run yarn gatsby-develop. Let's see what that does. So it's running a bunch of stuff and all of this, it looks like is almost done. Okay, and let's take a look at the site that we now have. Okay, now remember, when we created the minimal site, we do have a pages which is just a 404 and an index page. Because that came, we've seen that before, right? Like that came with a minimal site and we haven't created any other pages in here. That isn't a blog, but if we go to slash blog, there is a blog there. I mean, it says minimal blog, that is of course nothing in the blog because there's no content, but that page exists. So at this point your question is, okay, where is this coming from? Where is the slash blog page coming from? And where it's coming from, is the theme that we installed. Gatsby theme blog is almost, think of it almost as a micro front end. And for the folks in here who aren't familiar with that term and what that means, it's almost like taking your website and breaking it down into multiple tiny websites and then having all of them, having all of them combined into one website. So you can almost say that Gatsby theme blog is just a blog section of your site. And that can have pages of its own that it contributes back to the main site that it's part of. But the cool part about all of this is that you can effectively have portions of your site that are developed and maintained by separate teams. They're all effectively compiled into an NPM package and then sort of... And then composed together. And that's how the slash blog is working. In fact, if you notice, there's also a content directory that got created. By the way, we never created that directory, if you recall. This came from the plugin. When Gatsby theme blog was installed, it was smart enough to know that, hey, you're installing a theme plugin... I mean, you're installing a blog theme. You probably need a directory for content and you don't have one. So it went ahead and created that. We're gonna go create some content in there to just see what that looks like.

So if you look at the options it says, if you look at the readme, I'm sorry, it says, add blog sites by creating an MD or an MDX file. So let's do that. Let's go to posts and let's create a new file. And we're gonna call it HelloWorld again, because my imagination is terrible. And I'm gonna say, HelloWorld. This is a blog powered by Gatsby theme blog. Okay, when it's safe, and this is already running and it seems like it has some trouble here, something, you know, was, oh, there you go. So the error is that it doesn't have a date. And the thing is, it's not non-nullable. Like it's basically saying it needs a date, but it doesn't have a date. So let's add a date. Let's go ahead and add front matter, like we did the last time. Okay. And I'm gonna set a date, and I'm gonna set that to a, I'm gonna set that today. Which is the 5th of April, depending on where you are in the world. I think it should still be 5th April. If it's not, you know, change that. And you see it now fixes it, because now it has a date. So let's go back and take a look at our blog. There you go. This blog, okay. So that seems to, oh, it says invalid date. So the reason it failed is because it says invalid date, and also didn't have a title, which is why it just picked up the title based on the URL. So let's set the title. Let's set, hello world, as the title. And since this is an invalid format, let's set it to a format that does work. So what are the formats that it needs? Let's find out. There's date, and it says, it's just, the type of the date. That's not very helpful, but the example here is a format that I guess we can use. So let's set that to 2021. And the 4th of April, which is 04.04. And hit save. And come back here, and hit refresh. There you go. You see that now we have, so there's this funky runtime error, which shows up cause it says, we couldn't find the correct component chunk, interesting. So this looks like an error that's coming from Gatsby itself. I would restart Gatsby at this point, because I feel like there's something tricky, funky, funky going on here, because I didn't see the error on the CLI here, but I could be wrong. Or this could have to do with Safari. In fact, I'm pretty sure it has to do with Safari, cause we saw a similar thing a while ago as well. I'll probably go back and fix this sometime today, hopefully. Anyway, so we see that it doesn't appear on Chrome, so it's probably a Safari specific bug. But there you go. You have a blog. And if you click on that, you have a blog page, which by the way, supports like code fragments and stuff, and has all of these things, and has a nice pretty date, and you can go back. The blog page is the main page. And if I create another content page here, called post2 again, that would also work. Also mdx works out of the box, in case you've used mdx before. You could create an mdx file in here, and that would just work. So, let's try that quickly. And hit refresh, and there you go. And you see the post, and you see the page for that. And remember, none of this happened from code in this project, as you can see, there's no page, there's no Gatsby node, there's none of that. So, this is how Gatsby themes work. Gatsby themes are effectively sections of your site, and they can contribute pages, and they can do a lot of other cool stuff. The other thing to note about Gatsby themes, is, in case you missed it, these are just npm packages. So, if tomorrow, gatsby-theme blog, and this case you can see, for example, this deprecation warning, and something that's gonna be deprecating and removed in v4, in this case, I could, as the author of Gatsby-Theme-Blog, fix that, and publish a new version, and all you have to do is just run, yarn upgrade interactive, or just Yarn upgrade. And that would go ahead and upgrade the npm dependency for you, which in turn would update the blog theme for you, and you're gonna have multiple themes, and you could update them without having to manage all of that code. So that's how Gatsby themes work. We have a couple of official themes. You can take a look at them by going to, I believe it's the, yeah, you can go to the plugin library and you can search for Gatsby-theme, and that'll give you all the Gatsby themes. And all the Gatsby themes have the convention of, the package name is just typically Gatsby-theme-, the name of the theme, all right? So that's the second sort of part about the Gatsby ecosystem.

And the third part is the one that we've been talking about this entire time, which is plugins, right? Gatsby plugins can do a lot of things. As we've seen so far, they let you source data, they let you transform data that you've sourced from multiple places, they even let you add Webpack or babel config, as we saw with styling plugins. If you'd like to learn more about how to write a Gatsby plugin, or if you'd like to learn more about the plugins that we have, take a look at the right plugin page. There's one right here, creating plugins. And I also do hold a Gatsby advanced workshop, which actually dives a lot more into the other portion of Gatsby, which is how it works under the hood, APIs, plugins for Gatsby, low-level stuff, including creating a custom schema that combines data from separate CMSs, where you can have your own GraphQL schema that inherit them and so on. Do you do GraphQL mutations? Excellent question. No, because in Gatsby, the way GraphQL works is that it's all read-only. If you would do a mutation in GraphQL, you would effectively do that. What that would imply is that that would change data on the CMS. And you don't typically want to do that. I mean, at least not at build time. You don't want to update the CMS at build time, which is when Gatsby, all of that GraphQL is all just querying. There's no mutations in there. We have something more in chat. How do you handle cloud operation for something like a shop? Great question. Just the way you would on a React site. You would do that in React lab. You do that in your client side code. Because again, remember, you don't want to probably do Crud at build time. You want to do Crud at runtime when a user actually decides to perform an operation. So you would use React hooks and you would call an API and do it the same way you would do typically in a React site. Anything that you would do at runtime, Gatsby doesn't know about or doesn't need to know about and is outside of sort of the Gatsby development layer. Does that make sense? What about Gatsby performance? Okay. Can you elaborate on what you mean by what about Gatsby performance? Dimitri? Okay. Go ahead and elaborate on what, how is Gatsby different from Next or, I mean too much plugins. Okay. Great question. Let me answer these two questions and then we'll wrap up and then we'll take more questions. And I'll stick on for a little longer. What about Gatsby performance? Too many plugins? The performance in this case would imply build time performance, not runtime performance, right? None of your plugins are included at runtime. All of that code is only run on your CI or on your local machine during build time. Typically, that really shouldn't be a bottleneck you need to worry about. If the Gatsby site is taking ages to build, it's probably because you have too many pages or too many images. Or because one of the plugins you're using isn't built to handle as many pages or as many images or so on. But the number of plugins you have isn't really a bottleneck for your Gatsby site per se, at least not at runtime. None of that code is included at runtime. Like I said, it's only a built time. So of course, if your build is really slow, go ahead and take a look and audit the plugins you have. But you shouldn't have to worry about that typically, at least for the use cases that we generally support. I hope that answers your question. If not, go ahead and elaborate further. Ashwarya's question is, how is Gatsby different from Next.js? Great question. Gatsby and Next are both frameworks built on top of React, right? Next started out as a server-side framework where you would run SSR at runtime. Gatsby started out as a framework where you would run SSR at build time. Next has recently included a bunch of stuff where they now let you do SSR at build time as well for some pages, and they call it Next.ssg, if I recall correctly. The difference between Gatsby and Next, in my opinion, and I think they're both great, by the way. I love Next, personally, but the difference, I think primarily, is that Next is, Gatsby is almost like batteries included. There's a lot more to Gatsby, for example, these plugins and sourcing data, firecraft, QL from your CMS, et cetera. On Next, typically you write that code yourself. You call an API. You download stuff. Or you have a Markdown file. You do an fs.readfilesync, read the file, and then parse it using the Markdown NPM package and then do your stuff on your own. With Gatsby, you typically just write a GraphQL query and you just get that out of the box. So there's that philosophical difference as well, where Next is slightly more minimal, but Gatsby's a lot more batteries included. I don't have a specific preference, but I think each works for its own use case. In some cases, Next works out well for stuff that needs SSR at runtime, which Gatsby doesn't support. So that's the primary difference, I think, about it off the top of my head. I hope that answers your question. So with that, we're gonna do the last portion of this workshop. We have four minutes left, so let's go really fast. And what this is, is I'm gonna show you how Gatsby Cloud works and then I'm gonna take more questions. Dimitri says, sounds great. Okay, I'm gonna take this question right after we finish the last part. Cool, so the last portion is actually really simple. I'm gonna go ahead and show you what Gatsby Cloud is and how it works. Gatsby Cloud is effectively a cloud platform for Gatsby. You can do all sorts of stuff. You can, it builds sites, you can host them on our CDN now. And the way it works is that it's similar to any other CI tool, like Netlify, but because it's Gatsby Cloud and builds specifically for Gatsby, we can do stuff on there that you can't do in Netlify. For example, we can run image generation on thousands of serverless workers in parallel. So your builds typically on Gatsby Cloud are multiple orders of magnitude faster than other platforms. And we also support something that's called incremental builds that I built sometime last year. And the way incremental builds works is again, it speeds up your builds significantly. Instead of building everything, we just build pages that changed. We've introduced a lot of that stuff back into open source recently with v3, because we think it's important for you to be able to do it with respect to which platform you're on. But there's also stuff on Gatsby Cloud that we've built out of the box that just works better than anything else that is out there right now. So go ahead and check out Gatsby Cloud. You log in via GitHub or GitLab and you can import a Git repo. Let's take a look at what that looks like. We'll go ahead and use the repo we just created which was react-summit-workshop. And you don't need to set any of this. All of this is already set. Just go ahead and hit next. And previously at some point we spoke about CMS integrations and how a CMS should send a web hooked back if there's a change. In this case, there's a suggested integration because Gatsby Cloud was able to figure out that you're using the Contentful plugin. And I can hit connect and that'll automatically set up my webhook to make sure that a build is triggered when, you know, some data's changed. I'm gonna skip that for now, just to save some time. And finally, it needs some environment variables. Remember we had these.

So I'm gonna go ahead and quickly stick them in there from my, where is my file, from my.env.development file. But the sanity token is really long, I must admit. There you go. And the Contentful Access token is in here. There you go, hit save. I have some preview variables. I'm gonna remove that for now and hit save, because I don't care about preview. And there you go, you just created a site. And that should, you know, build your site really quickly. And finally, it should also deploy to what we call Gatsby hosting. Gatsby hosting is a CDN powered by Fastly with 55 points of presence across the planet. It's really fast and Gatsby Cloud auto deploys on it. So there's nothing you need to do. You just get a URL and this is the URL, react-summit-workshop-master.gatsby-js.io. If you wanna add a custom domain, you can go ahead and do that as well. Let's wait for this build to complete and then we'll take a deep, you know, we'll take a look at the URL. It's installing dependencies right now. But yeah, that's Gatsby Cloud. That's our preferred way for you to build and deploy your Gatsby site. It's quick, it's fast. If you're having any trouble with it, feel free to tweet to us or you know, hit up support and one of us will be happy to help. So yeah, while that builds, with that let's take some more questions and that's a wrap to today's workshop. I hope you enjoyed this. I hope this was helpful for you. I know that we covered a ton and we might not have, you might have rushed through some parts due to your lack of time. It is a shorter workshop than I typically do. This is four hours. I typically do twice as long, but this is the format that we're doing at React summit. So I hope this was helpful for you. Thank you. Thank you for everything, You're welcome. When are you offering the advanced one and where? Can you repeat that please? When are you offering the advanced? Oh, when am I doing the advanced one? Excellent question. I will be doing the advanced one sometime around this coming month, maybe April or May. And I will tweet about it. It's not going to be at react summit, It'll be something that I run. But I will tweet about it and here's my Twitter in case you haven't found me. I just posted my Twitter on chat. Go ahead and feel free to have. Please DM me for any questions you have. My DMs are always open, I'm always happy to answer. It might take a little while in case I miss it, but I will come back to you and answer any questions you have. And when I do the advanced workshop, I will tweet about it. And if you've joined this workshop, and if you liked it, if you tell me that if you joined this workshop, I might even give you a discount or something. I don't know, we'll figure that out. Please feel free to reach out. Yeah. Check out Gatsby, I hope you enjoyed this. Check out Gatsby Cloud, I hope it works well for you. Have a great rest of your, your morning, afternoon, evening, or night, wherever you are on the planet. And to end, let's end on this note, you see that this ran 2,350 page queries, and it ran all of them like two seconds. And that's a lot faster than this would run on any other platform. And that's one of the reasons why Gatsby Cloud is our preferred way to deploy a Gatsby site. As you can see, it's now deploying to Gatsby Hosting, which is our Cloud CDN. And once it's done deploying, you should be able to see this, at this URL, it says that it's still deploying, but yeah, that's where it's at. So go ahead and check out this URL after this was done. And yeah, thank you so much for joining and staying with me for so long. I think React Summit will send you a feedback form. I think you get a certificate if you enter the feedback form. So if you want a certificate, please do that. Feel free to do that. And if you have any other feedback, like please tweet at me, anything's fine. And yeah, thank you, thank you for joining this. Thank you, Sid. Pretty, pretty good workshop. Thank you. So I'll stick around for another. Thank you. Thank you. Thank you. I'll stick around for a few more minutes in case anyone has any more questions. I'll be here for about maybe 10 more minutes on this call. So if any of you have more questions, feel free to like here. Chat or talk. So for everyone who's here, it looks like, oh, Susan, you're welcome. See ya. For anyone who's still here, this is now deployed. So that's cool. And yeah, I will be here for another five minutes if you have any questions. Admitry has a question. How to detect a bad plugin with Problem Big Build Time. For instance, you have a lot of connected plugins in your config. Okay. Great question. The answer is complicated, right? It's not very easy. You can't always just look at it and say, oh, that plugin is what's taking a while, but one way to detect it is if you're running this on Gatsby Cloud, if you're running your build on Gatsby Cloud, you typically have a timer next to every, you know, phase, in your Gatsby build. And if you're running it locally as well, you will have a timer next to every phase. So if you can look at the CLI output somewhere, you should be able to take a look at that. Typically, that'll give you a hint on what lifecycle is taking long, right? We didn't cover life cycles today because that's an advanced topic, but life cycles are basically Gatsby APIs and plugins are able to use those life cycles to do things, all right? Now, depending on which lifecycle took long, you can typically, you know, start debugging there and figure out that, hey, you know, it's the onCreatePage lifecycle. So once you know which lifecycle it is, it's typically, you know, you can go back in and correlate that to a specific plugin that uses that lifecycle. That's one way.

The other way is to add verbose logging. So Gatsby supports verbose logging. You can just set the env variable verbose, which is V-E-R B-O-S-E, and you can set it to one or true or whatever. Just set the env variable. And if you do that, you get verbose logs, okay? With verbose logs, you should have a lot more information to help debug which plugin it is.

And finally, if none of that helps, open an issue on GitHub or open a discussion on the Gatsby GitHub. And I'm sure someone will be able to help or at least point you in or help ask the right questions or at least point you in the right direction. So that's how I would start off if I were to debug a site with maybe a bad plugin.

Does that help? Yeah, okay. You're welcome. I'll be here three more minutes to take more questions in case you have any. In case of course, you think about something after this call. Here's my Twitter once again, in case you need to reach out to me. I'm going to leave you now. With that, I'm going to jump off. I see a couple of you still here if, you know, again, if you have anything, please feel free to reach out. I hope this was fun for you all and I'll see you all around. Bye.