Gatsby & GraphQL Q&A

[00:00:00]
>> How can we use a mutation to create update with Gatsby and GraphQL? So, Gatsby does not support mutations, that's another another feature of making it a build time only solution, you don't mutate data through Gatsby. What you can do and we won't talk about this today but we'll get into it a little bit with the intermediate course, is you can transform nodes which is effectively a mutation.

[00:00:32]
But that's done through Gatsby API's that's not handled through GraphQL itself. So again, GraphQL and Gatsby is not graph qL everywhere it's a it is a very unique approach, to GraphQ, it's almost a subset.
>> Is there a way to get data this from asynchronous source like a rest or a GraphQL server from some public API?

[00:01:01]
>> Absolutely, little bit later today, we will actually do that we'll load data from a third party service using I believe their REST API. And there plugins from from actually loading in from REST API's and in the intermediate course we'll look at putting custom data like whatever you want into Gatsby's API's.

[00:01:25]
So yeah we'll touch on it today we'll go much deeper in the intermediate workshop though.
>> GraphQL is specifically used with Gatsby, is it compatible with any other data layer?
>> So yes in the sense that you can load any data into Gatsby's runtime GraphQL. And also it's it's important to note, you can use Gatsby without ever touching the GraphQL layer.

[00:01:53]
When we look at the MDX setup, which is in a little bit here, you can do everything in Gatsby just using markdown or MDX and you never have to write a GraphQL query at all. And the site metadata stuff, this is all optional, the way that I'm doing it.

[00:02:12]
I could also create a config.js in my source folder and pull that in instead of doing the site metadata, my config could just be import meta from metadata.js or something. And then we could do metadata.title here, so you don't have to use the GraphQL. And, really if I wanted to I could pull in data from using the fetch API, or from other sources to build out the site.

[00:02:42]
And this is sorta the thing where like, if you find yourself really not wanting to use Gatsby or GraphQL, Gatsby might not be the right solution for you. There are other ways to build sites that will let you do a lot of what Gatsby does without the GraphQL requirement.

[00:03:03]
Next.js, Astro they're always that you can build sites similar to this, that don't have GraphQL as a dependency so there are definitely options. But yeah, the GraphQL part is very integral to Gatsby, but it's not a strict requirement. It's just kind of one of those things that your life gets easier if you just give in and do it Gatsby's way.

[00:03:29]
>> How about if you have a bunch of JSON data that you wanna load into GraphQL and then query through Gatsby's GraphQL layer is there an easy way to do that?
>> Absolutely, there is a source plugin for JSON specifically so Gatsby source json, you can just pull that data straight in.

[00:03:58]
So you can just import it like this, so you can just pull it in but you can also source it, and if you source it, Where did it go? Here you can just get any JSON data that comes in, and it'll turn it into notes. So,we'll look at how this file system plugin works, and then the transformers are what I was talking about where you can have data that comes into Gatsby.

[00:04:34]
A transformer plugin uses some Gatsby API's to turn that data from one shape into another. So in this case it looks and it finds that a file is a dot JSON file, and then converts it into a GraphQL node. So if you have a bunch of JSON, you don't actually have to do anything you just have to install this Gatsby transformer.

[00:04:59]
And it'll put it into your file like the GraphQL for you, it'll show up as an option here.
>> Is there a way to query or make these queries on the fly like in JavaScript? So you could for instance, grab a bit of extra data dynamically, like Dynamic.js app and put it into local storage or something like that?

[00:05:25]
>> Yeah 100% if you wanna do that you've now basically entered regular old react, so you would pull in like use effect. And you'd be able to do, Extra data would be just fetch whatever your endpoint was, and then, If you could grab it like so. And here, Would be your extra data, Right?

[00:06:08]
So at this point you could put it into a use state, you could set it in local storage, you could do whatever you want. But you would be able to use for example, you could take this title which is loaded at build time, and use that to inform this fetch.

[00:06:24]
So, a good example of that would be if I want to server render my blog posts, but I don't want to server render the comments, I wanna client side render those. Then I would be able to load the blog post here, and then I would be able to use the ID of the blog post to make a call to my API, and load in the comments.

[00:06:45]
But again, you cannot call the Gatsby GraphQL from the client side. So this would be calling a third party API or if you could put together a serverless function that would return common data, and then call your serverless function. There are a lot of ways that you can solve this problem, we will not be touching on this flow today, but we will in the intermediate Gatsby workshop.

[00:07:13]
>> So the reason for me for learning Gatsby is to create basically blogs and content websites for GraphQL snappy and fast and they work great on browser and mobile. And they also perform great on the technical SEO standpoint, so they rank better on the search engines and all that.

[00:07:32]
And so that's why I did a little bit of research on the Internet, so I found that Gatsby, basically two things that came up Gatsby and Next. So I'm not sure which is better for this specific reason.
>> So, Gatsby versus Next is, I'm gonna give you the most infuriating developer answer ever which is it depends, right?

[00:07:57]
So Gatsby is a very opinionated way to get data from a lot of different sources, and put it into a unified data layer. So that every page you build, whether you're pulling data from a headless CMS, or from Json or from Markdown. Or from air table or whatever you're using, it's always going to feel roughly the same to work with that data.

[00:08:21]
Next is a little bit of the other side, Next is pretty do whatever you want, they provide you with some low level APIs, to get site data. So they have the get static props hook and and some other extensions to the React file type that allow you to load data.

[00:08:45]
Next is going to rely on you building a lot more custom stuff. Gatsby is going to give you a lot of batteries included, but it'll also fight really hard when you wanna customize it, because it's not the Gatsby way. So when you're looking at your use case what you're trying to build, if what you have is structured data and you wanna get it onto a website, Gatsby is going to be really fast.

[00:09:09]
If what you have is some custom stuff and you gotta do some weirdness and you're looking at. You're not quite sure how that date is gonna get in and some of its gonna load now and someone will load it client side. And there's some bespoke stuff happening, Next is gonna put less roadblocks in your way, but it'll also expect you to build all of that stuff on your own.

[00:09:33]
So these are the trade offs, Next is more flexible at the expense of having to write more code. Gatsby is more expedient I guess, at the expense of having a lot of opinions.