Introduction to Gatsby Gatsby Plugins Q&A
This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Gatsby Plugins Q&A" Lesson
>> Speaker 2: So even though you're getting the source images from Instagram, you're getting them on the server side. And you're doing all your source all your transformation and writing out to multiple images in the static directory and then serving them up.
>> Jason Lengstorf: Yes.
>> Speaker 2: Okay, so that works here because we're running a dev server for it.
[00:00:20] But they're not really static because you're getting the top twelve of them.
>> Jason Lengstorf: It will update every time the site builds. So if you wanted this to always be up to date you could, I don't think Instagram supports web hooks but you could use something like Zapier. And you could have Zapier every time there's a new Instagram post trigger a web hook that would rebuild your Gatsby site
>> Speaker 2: Okay
>> Jason Lengstorf: So that way you would always be able to kind of have the most up to date version of whatever your data is. That's a pretty standard approach is to use web hooks or something like Zapier to to re-trigger a build when data changes. But yeah, but to answer your question, yes.
[00:01:00] It's not actually live. So if you didn't rebuild the site, whenever you post a new thing, it's not gonna show up here. You would have to rebuild the site to get the latest data.
>> Speaker 3: But you could.
>> Jason Lengstorf: Yeah, you absolutely can. You just have to trigger a build.
>> Speaker 3: Yeah.
>> Speaker 4: So unhelpfully I have a question about the previous section actually.
>> Jason Lengstorf: Okay. [LAUGH]
>> Speaker 4: We talked a bit about MDX and then remark. Are there other competitive strengths between the two for processing markdown, beyond what you can put. Add components and any other, cannot like Remark has a pretty large ecosystem of [INAUDIBLE] in your experience.
>> Jason Lengstorf: So MDX is designed to be compatible with the whole ecosystem of Remark plugins. So theoretically MDX should be Remark plus React support. That, I don't know if that's 100% true, but if it's not true, it's because it's a bug, not because it's not planned. So in practice MDX should have all the features of Remark as well as the ability to embed jsx into your markdown documents.
>> Speaker 4: Good to know thanks.
>> Jason Lengstorf: Anyone else? See one back there.
>> Speaker 5: What if a post contains multiple photos?
>> Jason Lengstorf: In markdown that won't matter. The same thing will happen. So if we look at this one, you can put as many posts, as many images as you want in there.
[00:02:30] For example, this is my website, and on the, let's see. I think one of these has. Here's one, I think. So this one has a bunch of images in it. And these are all just embedded in regular markdown and Gatsby will pick them up and and fix them.
[00:02:52] If you're doing something like I think in this one, I believe these images are embedded in using regular Gatsby image. I just setup multiple queries. And so the way that you would setup those multiple queries is, let's say you wanted to do a file. And you would want the, I don't know, let's say the relative path is, let's see, trying to do this on the fly.
[00:03:20] The regex and that would be Nicole. I think that's gonna get me what I want. Yep, and then I wanted to do another one. So I would set the relative path and this one would be regx for let's say, or, by default, what's going to happen is it's going to yell at me, right?
[00:03:44] But what I can do, is I can alias these. And now I get both files. So if you need multiple images, you can just write the same query and alias it like so. And that'll give you the ability to make the same, like the same query as many times as you need without having to put them in different files or something like that.
>> Speaker 5: What about handling video?
>> Jason Lengstorf: Video support is, I mean, we have like a YouTube source plugin. We have an embed video plugin. There's this really cool oEmbed plugin that will do that. If you are, like we don't auto-optimize MP4 files or anything, to the best of my knowledge.
[00:04:31] In my experience almost everybody is using some kind of video hosting. Whether that is one of the big name ones like YouTube or Vimeo or whether that is something like Cloud Neri for video hosting is kind of like an asset CDN. Because of that, it seemed like duplicate effort to try to optimize video files because everybody else is already doing such a good job of that.
[00:05:00] But yeah, so there's great video support if you want to put videos in, but we're not going to do any optimization for it.
>> Speaker 5: How about other data sources like Wordpress?
>> Jason Lengstorf: Yeah, we have a we have a Wordpress source plugin. It just hooks into the WordPress REST API and you are able to run a full site of it.
[00:05:23] So this is a blog that is powered by WordPress and it loads in like WordPress data, supports the category stagging, all that good stuff. But, yeah, you don't have to do anything special there, it just loads in that data.
>> Speaker 5: In that case, you couldn't use like MDX with Wordpress?
>> Jason Lengstorf: With Wordpress, I can see a path to making that work but it would probably, like that would be an advanced use case.
>> Speaker 3: I mean you would have to do this in the WordPress packet.
>> Jason Lengstorf: Well you could write MDX in your WordPress editor, and then export that and re-import it as an MDX file in Gatsby that would get it processed as MDX.
[00:06:15] It would be-
>> Speaker 3: You could also shoot yourself in the foot.
>> Jason Lengstorf: It'd be a little hinky for sure. Like, I would say that falls very firmly into like, here be dragons, cuz you're starting to do some really custom stuff. It doesn't mean it's impossible, though. Like you could probably make it work.
>> Jason Lengstorf: Any other questions?
>> Speaker 6: So all third party sources need a plugin.
>> Jason Lengstorf: I mean they don't need one. You're always welcome to-
>> Speaker 6: Go rouge?
>> Jason Lengstorf: Yeah, I mean if you want to use Axios and just do a fetch for data, you can 100% do that. There's nothing that stops you from doing that.
[00:06:57] We've got a whole doc, in fact, on Gatsby without Graph QL. If you want to build a Gatsby site and you don't feel like using Graph QL, you can absolutely do it. This doc will walk you through how that works. What I'm trying to do here is explain, why.
[00:07:17] We also have kind of a philosophical page on why we use GraphQL then I'll walk through the progressive complexity of things. This includes an Egghead course that'll kind of walk through all the different pieces. But yeah, the data sources, it's easier if they come in with a plug-in.
[00:07:36] Because that's gonna give you a lot of the convenience stuff that Gatsby does. If you want to use Gatsby's API's to create nodes, that's the same as a plugin. All a plugin under doing under the hood is calling source nodes and on create node and a handful of other Gatsby node API's that put things into the graph QL layer.
[00:07:58] So you can put whatever you want in there. It doesn't necessarily require a plug in. It's just for convenience it's usually easier if you can find one that has a plug in. And if you end up doing this for something that doesn't have a plug in it would mean a lot to the community and to me if you were to publish that as a plug in so that everybody else can get the benefit of that work