![Client-Side GraphQL in React](https://static.frontendmasters.com/assets/courses/2019-12-03-client-graphql-react/thumb.webp)
Check out a free preview of the full Client-Side GraphQL in React course
The "Wrapping Up" Lesson is part of the full, Client-Side GraphQL in React course featured in this preview video. Here's what you'd learn in this lesson:
Scott wraps up the course, recommends additional tools including GraphQL voyager, onegraph, Apollo, and fly.io. Awesome GraphQL, specifically the graphql-code-generator, is also highlighted as a good GraphQL open source.
Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> Scott Moss: That's it, that was the last exercise. It's all I wanted to talk to you about as far as, using GraphQL on the front end. As far as next steps in where to go beyond this, this is pretty much it when it comes to GraphQL on the front end.
[00:00:12]
I mean, there are some more advanced strategies like persisted cruise. But that takes interaction between you and your server, and other advanced strategies that might come to watching your query manually. Although, I don't really run into the use case but apollo has pretty good documentation about that. All the stuff that i showed you today are the stuff that is pretty much like 89 95% of the stuff that I do in my apps.
[00:00:37]
Everything else, is just like a very specific use case. Other than that, it's mostly all just this. And obviously, like separating it out to different files and organizing your app. But most of the stuff you're gonna see is this, this is basically it. I don't really do anything beyond this other than, like I said, very custom stuff that we do ourselves, and this is graph do.
[00:00:58]
Any questions on the whole experience of GraphUL with React?
>> Speaker 2: It was easier than the last time I tried to take your older course [CROSSTALK]
>> Scott Moss: Okay, it was easier now, okay. Cool, all right, that's good to know. Cuz I did, my purpose on this was to try to focus as much on GraphQL as possible, and not so much on the React stuff.
[00:01:19]
So glad to hear that, that's awesome. From here, I just wanna introduce you all to a lot of cool stuff that I think will make your journey with GraphQL on the front end a lot easier. So one of the other ones I wanna talk about tools in GraphQL Voyager, which is very similar to playground,except for, I'll just show you.
[00:01:42]
It does this [LAUGH]. Basically, it gives you a schema expiration of every single type you have and you can see how it connects to different nodes. And you can check on those edges and basically, see all different types of stuff. So I think you can zoom in on this, there you go.
[00:02:00]
It's always a great way just to see how your graph is connected, pretty cool. The team behind this, I think is the same team that does graphql-lodash, and stuff like that. Which I think I've talked about that before, but I'll show that again. Graphql-lodash Is a set of client side directives that allow you to use Lodash to format your data, which is really cool.
[00:02:27]
So you don't have to talk to the server to do that. I really like this directive. It's kind of a hack but at the same time, it's like wow, that's really cool. Like, I like that.
>> Scott Moss: So other cool stuff that I like would be, this one product called OneGraph.
[00:02:47]
OneGraph is a startup, I think they're in the Bay. Okay, hold up, there we go. And basically, what they do is they connect all your API's. Like Chris, if you have a SAS app and your app uses stripe, it also uses GitHub it uses this, uses that. They connect it all for you to give you a graphical API to use, just one graphical API.
[00:03:12]
This connects to all the stuff that you use, and you can use that. Could you make that yourself? Of course, you could. But they'd handle a lot of the edge case things like what if this thing fails? How do you get a partial response back and things like that.
[00:03:24]
So pretty good product I haven't tested out myself but I mean, they got a lot of integrations here. And I know from experience writing these integrations yourself inside of graph, do, can be tedious, especially if you're new to it. So super, super awesome product. Another one would be, I guess I have to mention this one cuz we've been using their stuff all day, is Apollo.
[00:03:49]
>> Scott Moss: So Apollo, GraphQL, this is their website. They have this new thing called Platform. It's kinda hard to describe, but it pretty much does a lot of stuff. So what they do is if you use their Apollo Client, which is what we used today, and your app is built into an Apollo server, then you can opt in for a lot of these products that they have here.
[00:04:08]
So things like tracking your schema, which basically you can push your schema up to their remote repository. And allows you to use it for tooling in your editor. It also notifies you about schema changes. Some one change the schema, you get notifications based off it and stuff like that.
[00:04:24]
They give you analytics on a per field level, which is really cool. Insights, you can protect that schema so people can't make changes to it. They also do like caching, they got a lot of stuff. Actually, I don't really know how they're product works cuz they change it a lot.
[00:04:39]
They used to only do caching a year ago, and now they have all this stuff. But if you're really into GraphQL and you want some of the best tools, I highly recommend checking them out. Looks like that got some good companies using them. And it's built by a nice team.
[00:04:52]
Same people that made Meteor, so, they're pretty talented. But yeah, looks pretty cool. Another one I think is really awesome is, I think I talked about this in another course but I'm really big on fly.io right now, I really like this product. Has nothing to do with graphQL, but it's just JavaScript at the Edge which I think is Super awesome.
[00:05:15]
And you basically write JavaScript on the CDN and do whatever you want. So you could make an app on the CDN, that's kind of mind blowing. And I think this is really awesome. You can pretty much never have to use an origin for a lot of your use cases and just serve everything from a node closest to all your customers.
[00:05:32]
And it's all in JavaScript. So they're really good. There's other alternatives to it, a Koffler workers is another one. I know AWS has their lambda at edge, which is very similar to this. So there's other alternatives but this one's pretty good. I really like this product. Other than that, I can't really think of anything super cool.
[00:05:51]
From here, I would just look at the awesome GraphQL list that's on GitHub and kind of pick apart. What's really cool in here? And I actually know there's one. There is, let's see if they had it. Generation, generation, generation.
>> Scott Moss: Generate, generate.
>> Scott Moss: I guess don't have it.
[00:06:16]
I was looking for one called GraphQL code generator. Is this the one? No, there's a-
>> Speaker 2: There I see it.
>> Scott Moss: This one?
>> Speaker 2: Yeah.
>> Scott Moss: I don't think this is the one, lemme see.
>> Speaker 2: Sorry.
>> Scott Moss: This mightbe a different one. I don't know what this one is but that looked hella cool, whatever that was.
[00:06:30]
>> Speaker 2: [LAUGH]
>> Scott Moss: That was dope. This one generates code for you based on the schema. That's pretty cool, very similar to what I was talking about. Basically, I was looking for a tool and I'm sure there's more than one now. That will generate you can basically turn anything and it basically gives you low level access and hooks into the tree walking ability of a graphical schema.
[00:06:50]
So when the, when the schema is being compiled, you can hook into it and basically render whatever you want. So we use that tool to like generate UIs, dashboards, components, database models, type script definitions, whatever. You can do whatever you want with a tool like that. That way you do what the community is calling a schema first design.
[00:07:09]
Where the first thing you do when you make some new product is you just design the schema. You and your team sit down and see look cool, here’s the graphic of the schema is going to look like and everything spins from that, everything comes from that. Type script definitions, Components, of course, queries and mutations, database models, everything comes from the GraphQL schema.
[00:07:30]
So it's really a good approach, actually. If everyone agrees on that schema and everything is being generated from that schema, then everything just works. So it's a really good approach. And some people take it really far. And tools like this should help you do that. And I think that's all, the only cool stuff I've got off the top of my head.
[00:07:47]
Any other questions for me? Anybody got any questions about using GraphQL in something other than React on the frontend? Cuz I have experience using it in Vue a lot, and sometimes in Angular.
>> Scott Moss: Nope, okay, if you ever need that, obviously if you just Google Vue Apollo, there's a plugin for that, for Vue Apollo.
[00:08:13]
I think it's made by one of the Vue Corp members. It's a really good product, I highly recommend you checking it out. I like their implementation of Apollo. View, much better than implementation that we just read. And or that we just did and react. So check that out.
[00:08:26]
If you use knucks, there's a plugin for view Apollo inside of next. If you never heard of knucks its views version of next js, which is a react framework. This is really cool. So I would check those out if you're interested in it. And and for Angular, I'm pretty sure there is a Angular Apollo.
[00:08:46]
Apollo is, I know that team is really hardcore in Angular, so I know they've got something. Yeah, there you go, so they've got something here too. I didn't use this one, I was using Angular at the time, so I can't comment on how well it is. But I'm sure it's pretty good.
[00:08:57]
Thanks for coming to the course, and I hope you all get to build some dope GraphQL stuff soon, thanks.
>> Audience: [APPLAUSE]
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops