Panel Discussion: GraphQL + React

Microsoft Mechanics Microsoft Mechanics www.microsoft.com www.microsoft.com www.microsoft.com Microsoft Mechanics Awesome. So thank you so much for joining us, everyone. I hope you're enjoying React Summit as much as I am. It's been a blast so far to see the talks and get to interact with everybody.

And yeah, without further ado, let's go ahead and get into this panel. We'll do a quick round of introductions. So I am Kurt Kemple, a developer advocate at Apollo GraphQL, and I have with me, let's see, I guess I'll go kind of in like a clockwise order, starting top left.

I have Phil Pluckthun, who is a principal engineer at Formidable and also on the core team of Urql and Styled Components. Next to him is Trevor Blades, who is a developer experience engineer at Apollo. Hey, how's it going? And then we have Vishwa Mehta, who is a dev rel at Hazura, so awesome. Thank you for joining. And we've got Scott Moss with us, content creator and CEO of TypeIO. How's it going, everybody? Thank you so much for joining us.

I'm Trevor. I've been using React for a long time and GraphQL for a little bit, a subsection of that time, but love both those technologies and excited to chat with everybody today. Awesome. Very cool. Thanks. Vish, what about you? Hey, everyone. Kurt, first of all, thank you so much for having me. I'm super excited to be here. I'm Vishwa Mehta, Vish for short, and I work on the dev rel team at Hazura. I've been building super cool things with React for quite some time, and I'm a huge GraphQL enthusiast. And yeah, super happy to be here. Awesome. So cool. And last but definitely not least, Scott. How's it going, everyone? That was a pretty good intro you gave me there, Kurt. But I would say for me, I've been working on GraphQL and frameworks and stuff since, I don't know, seems like forever. I've contributed in so many ways.

I teach GraphQL and React and stuff like that on platforms like front-end masters. And I also use GraphQL and React pretty much every single day. So just a big fan of the technology. And I just want to see it move even further.

Awesome. Yeah. Well, as you all can tell, we have a great lineup here, very diverse, different use cases and experiences with GraphQL and React. And as such, why don't we get into some questions so that we can get some more information and talk about React and GraphQL.

And so first up, I guess for this first question, I'll just go around in same order again, so Phil, you can kick it off if you want, and that is how were you introduced to the combination of React and GraphQL? And what was that experience like for you? Oh, I mean, how has anyone introduced to something like GraphQL or React? I would say it was very organic. Saw it on Twitter. And working at a consultancy that meant that a project that used GraphQL, followed shortly after me becoming aware of it. I mean, I'd also like to thank people like Wille Emanen and Mikael Svaneksson on Twitter, because even though I wasn't working GraphQL back then, when I met them at React Native EU actually, we talked a lot about GraphQL and made me really excited for it. Yeah. Yeah, that's awesome. I feel like a lot of people I can't remember how I found, I think Twitter as well. What about you, Trevor? How did you discover the combination of React and GraphQL? Well, honestly, the time that I, around the time that I learned about GraphQL, I wasn't super active on Twitter. I didn't, I didn't find out it, about it as organically as Phil did. I actually, I learned about Apollo through a recruiter reaching out to me and I was like, what is, what is Apollo? Oh, it's has to do with GraphQL. I've heard the word GraphQL before, but I had never really, like, I had no idea about what it, what it was. So. Um, the following weekend, I just like converted one of my, um, one of my old like side projects, it was like a skateboarding contest, statistical analysis project in React with like a custom REST API, all this like Redux craziness going on in the app. and I, uh, I converted that to like a Apollo app, um, like Apollo on the front end and the GraphQL API on the backend. And like after that weekend, I was like fully on the GraphQL train. Um, so that was my, my intro. Nice. And Vish, what did your story look like? Um, again, just like Phil said, how does one get introduced to something like React and GraphQL? So this is a little awkward and I don't always like to admit but I guess it's almost developers get introduced to new technologies. Um, so I've been using React for a few years now and, um, I only bumped into GraphQL in late 2018 when I was tinkering around with Gatsby since it has GraphQL baked into it. So I accidentally got into GraphQL without knowing, um, the beauty of it or what it brings to the table for you. Um, but it wasn't until 2019 that I properly started using GraphQL with React or, you know, learning GraphQL properly. Um, and then I volunteered at GraphQL Asia and met all these amazing people from the community, um, who were doing some awesome things with GraphQL.

And yeah, that's when I started playing around a bit more with it. Nice. Awesome. And what about you, Scott? What was kind of that moment that introduced you to that combination? Yeah, I was thinking about this. I was like, when did I really actually start hearing about using it and React, um, so let me see, I was using react for a while because I used to do like some work with the, the Angular team at Google, and we always just talk about like frameworks and stuff like that, so bracket was always on my radar, I think at the time I was, I was teaching at a bootcamp too. So I was always just like looking to see what was next. And then I think pretty sure I went to some event. I ended up meeting this guy named Nick Schrock, who was the co-creator of GraphQL and I remember him just kind of talking about this thing and I was like, what is this guy talking about? Uh, and like, you know, I go look at resources and there's really not a lot of stuff out there at the time. Uh, and then like fast forward a couple of weeks, couple of months later, and then boom, you know, there's this thing called GraphQL. So, uh, I was kind of all over it. I really thought it was amazing. Um, at the time I think Angular was like working on something like at script and they moved it to TypeScript. So like this whole type, safety type check thing on the API layers seemed really interesting. Um, and then it wasn't until I started working on some like small projects where I combine GraphQL and react together and I just realized just like how simple it was, but yet how powerful it was, and I knew I was in love, like I, it just, I wasn't going back from there. Yeah. I mean, that kind of leads into the next question, which was going to be like, you know, what was kind of your favorite thing about React and GraphQL together? What was it, you know, of those two, uh, the combination of technologies that you were just like, oh, I can't look back. Like this is different. It sounds like for you, like the simplicity, um, that it offers for development, but like also, you know, simplifying these complex, uh, problems was a pretty big one. Was there anything else that like you super enjoyed about it? Um, or was that probably the biggest benefit you found right away? I would say that was definitely the biggest one, because I always approach applications, you know, not only as an engineer that's building something, but as an instructor, someone that, you know, tries to have empathy towards someone who's learning something new. And I'm always looking, I'm always thinking like, you know, how quickly, how easily can someone pick this up and adopt this? You know, and what's, what is the, what are the difficult parts of this? And one thing about graph QL and react that really made it simple was that, you know, you do like less transformation code, you know, like. In the early days of react, there's just a lot of patterns people are doing. And, you know, at the end of the day, you just got to throw a kitchen sink of props in a component and maybe use two of them, uh, and you know, people get better at it, but like when graph QL came along, it's just like, wow, I could literally just take this data from API call and throw it on the page and not worrying about how to map it and filter it and produce it before I do it, you know, maybe even do some data checking on a friend who's just schemas are messed up. Like you can just forget about that. Uh, it just works. And I thought that was just extremely powerful because I saw a lot of my co-judges go out the window, uh, that was a good transform for the, for the view. Yeah, I'll never forget like the first time we really, uh, did some refactoring and, and moving away from like rest and Redux into graph QL and just the size of like how much code was being removed compared to how much was being added was a real pleasure. Yeah. It was real mind boggling. Uh, so followed up, I'll go and kind of in the reverse direction. Uh, Vish, what about for you, what would you say is kind of one of your favorite features of graph QL and react together as a combination? Well, going back to when I started with it, um, I think I was absolutely blown away by the fact that, you know, when you use, um, GraphQL clients and that support subscriptions, um, in return and gives you your application real time capabilities and those real-time capabilities.

It was something that, you know, really appealed to me, stood out. Um, but just like apart from that, with all the GraphQL clients out there doing the heavy lifting for you as a React developer, I don't have to worry about, um, you know, how I'm making these API calls or about state management or caching or data fetching, which is something that's a hard problem to solve most of the times. So, um, yeah, stuff like that is using GraphQL with React.

For sure. And what about you Blades? What did you find to be that like cool thing that you couldn't let go of? Yeah, for me, the, the, the main thing that drew me in initially was, uh, how like you're able to couple your, your app views with the data that they require. Like it's, it's like, uh, it's like a really, really tight relationship between the data and the, um, and, and, and the app itself. Um, and out that that was nice. Uh, Scott was mentioning all of like the, the kind of the transformation code. I remember having to write these like complicated, uh, I forget what they're even called now, like Redux loop things. I was, I was using some, some, um, some fancy stuff to make, uh, like asynchronous API calls work with Redux. And it was, it was crazy, but it was that that was, that was just like the standard at the time. Um, but yeah, being able to like tightly couple my, my app and my data was really nice. I like, right before this, I was introduced to CSS and JavaScript and it had a similar promise. And, and like that, that kind of like feeling was still fresh in my mind. The idea that like, you don't have your style sheets over here and your app over here. You have. Your app and your styles are just like one cohesive thing. Um, and, and so I felt like it was like this giving me the same effect, but with my data. And I thought that was really nice.

Yeah. Yeah. Very cool. Uh, what about you, Phil? Um, what's one thing that kind of stands out to you among the rest? I mean, if I have to summarize already, what has been said, I like how down to earth GraphQL is kind of, I like that it's basically nothing new. It's just conventions and specifications and that really nice language, just tying it all together. And when I think back with, when I started using GraphQL, creating a back end for a front end for every single app you're building was already really common, but you're either stuck normalizing that data, denormalizing it, doing a bit of both writing. Really annoying. Redux code everywhere. Just dealing with your data in general, just being able to write a GraphQL API that just caters to that exact front end, being sure that that shape is documented and accessible, and then having clients be able to do all of these amazing things with normalizing data, because it's all built on convention, it's just really magical. It all comes together. Yeah, it really is.

And I feel like it's a great segue, like when we talk about data, data management, and normalization and stuff like this. And we also had a question from Discord, but I'm going to kind of spread it out a little bit to be more generic and not so focused, which is, and maybe Phil, you can lead, and we'll just go back around, what kind of solutions are out there, like how do you handle states between GraphQL and React? And what are some of your preferred ways of doing that, or what problem points do you hit, essentially?

Yeah, what does state management look like with GraphQL? It's an interesting one, right? Because I've always seen data from an API as completely separate from state that a UI would have. There are a couple of exceptions. In a couple of cases, form state can be pretty closely related to what your server sees, eventually. Or you could even preserve some state temporarily. So like, a form is half filled out, maybe you want to save that already.

For the most part, I think what's interesting is that kind of the bet from the React team on the new context API and hooks has just worked out perfectly with GraphQL. There are very few situations where I have to really, you know, get out a big hammer, like more bags of Redux anymore. Instead a lot of data will just flow down the entire elementary from GraphQL. And apart from that, a couple of small hooks here and there for state and maybe like, you know, some shared context is all I need. Yeah. Yeah, it's true. Really changes the story of like what state is, is on the client alone. And then yeah, how you manage it.

What, what do you have to follow up with that, Trevor? How do you feel about state management with React and GraphQL? Has it gotten easier than with, you know, rest is its difference. What do you think?

Yeah. I mean, I think that, you know, I'll reiterate what Phil said. I think that the React like React state hooks and context really go a long way. but there are certain cases where I've ended up using like a state management, state management with Apollo using like client side resolvers or like augmenting certain types in my GraphQL schema based on something, some value that I have stored in local storage with like, type policies. and those, those can just be an extra little bit of of, like the cherry on top of an already pretty good state management story, I think in present day.

Yeah. Vis, you got to follow up to that. How you feel about state management? Go off of, Phil and Trevor's answers that, context and using context. And like, traditionally we used to use local state, but then context came along and, we have pretty good hooks and also like, I've been using Apollo for straight state management mostly. So, big Apollo champion here for that. Cool.

What about you, Scott? How do you feel about the state management story with React and GraphQL? Oh, well, I feel like there's just more options than ever before, which is a good thing, but for me personally, kind of like what everyone said here, like I think the React team has did a really good job with the hooks and the context API, and I don't really find myself reaching for anything beyond those. So like, in the ecosystem, you know, I like to use, some of my favorite tools to use when interacting with APIs are things that support the, you know, swr, so still while revalidate, so packages like SWR from Vercel or React query, like those types of packages that pretty much support anything async are just very phenomenal because you can kind of mix and match, you know, data from an API versus local state, you can do all different types of things there. So I kinda messed with that and that's been really good so far. You know, it's been phenomenal. And then like, it also really just depends on like what framework you use and like when you're needed to make an API call. Right? So like if you're taking advantage of things like next JS that, you know, if you're using some of their server side functions, which only happen on the server, you don't really need a caching solution, right? It's happening on a server that code gets eliminated, you just make a simple fetch call, but if you're building a traditional spot, then yeah, you might want to invest in some type of. You know, context based hook based or even Apollo to manage that state, depending on how intricate your UI is, you might have to, you know, go for something like Apollo. Cause, uh, kind of like Trevor said, you might have to do some more optimizations on local storage and stuff like that. Uh, but I would say most of the time, if you get your back end correct and it's, you know, if you're back into doing the heavy lifting of sending exactly what your front end needs, you can kind of just get by with just the context and the hooks. Yeah. And I do like, I want to follow up on that, that I do love seeing kind of a wider landscape of these clients, uh, from anything to like the more smaller, uh, wider focused, um, you know, react query up to like a fully managed client. Like, uh, you have Urkel as well, which is also a really good solution. Um, so it's just really cool to see such a wide variety. I would say it's a little bit about like, yeah, thinking about the needs for your app and then playing around with them and seeing which one's kind of outside of that once you have that narrowed down, fit your, you know, your development style, team style, all that fun stuff. Uh, next question I want to get to, just cause I want to make sure we get to this and I've seen a couple of questions about this pop up. So I'm going to, uh, uh, uh, jump to this one, which is if there was one resource that you could recommend to folks, uh, who are wanting to get started with GraphQL and React, what would it be and, uh, Vish I'm gonna start with you this time if that's cool. Sure. Um, just going off of, um, how my experience has been learning GraphQL, I'd really suggest that just getting your fundamentals right with GraphQL first is very important.

Um, so just the GraphQL documentation is a really great place to start. Um, but if docs is not your thing, then I absolutely love you Priscillo's resources on GraphQL. She has an amazing book learning GraphQL and, um, Peggy raises from Apollo. She also has this really cool guide. That's, um, that's called a front end developer's guide to, um, GraphQL and that also sets a primer for you and specifically, if you want to learn how to use react with GraphQL, then, um, I am going to risk being a bit biased here, but Hasura has really cool, um, has a really cool learn course, uh, for react. If you want to check that out.

Yeah. That's awesome. Uh, and then I guess I'll go like counterclockwise around, uh, Trevor, what, uh, what would be that record, that resource that you would recommend? Uh, yeah, Vish Vish took my, uh, my learning GraphQL plug. Uh, I, I mean, I think you can't go wrong with, um, with even Alex there, even beyond that book, if you, if you just Google, um, Moon highway, they've got tons of great GraphQL resources.

Um, also the, the Apollo front end, um, or full stack tutorial, I should say, uh, is, is a good, it's relatively short. Shouldn't take a lot of time, but, but it should acquaint you with all the basics and actually I like, um, Vish mentioned that the, uh, you know, the way that she was introduced to GraphQL was through, through Gatsby. And I, I think that that's kind of a good way to just kind of like get some of those like GraphQL muscles, um, working, like, uh, understand what it's like querying for static data in your, in your Gatsby site, and then it might, it might get those, those gears turning a little bit. But, um, but yeah, I mean, there's, there's a few.

Awesome. Well, thank you. Yeah. Thank you for sharing. Phil, what about you? What, what resources would you recommend? I think none of these lists would be complete without mentioning how to GraphQL, which Prisma's put a lot of work into. They're working, I think, on a new version right now. So I guess you have to be aware of a couple of out of date information in there. But I guess if you're already advanced in GraphQL, I would also recommend just straight up reading the specification. And I know that sounds horrible, but I've read a lot of web specifications and love documents and it, sometimes they can be a bit confusing, but the GraphQL specs just really clear and pretty, pretty brief as well.

That's awesome. And what about you, Scott? What, what would you recommend? So many resources out there. I think it really just depends on your skill level and kind of where you are. I know me personally, I've definitely taken advantage of how to GraphQL a long time ago when Prisma put that together. So I know it's a really good resource, really impressive. But if you're like, you know, you're kind of the person that needs a guide and you need to see some context, you need to see a walkthrough, shameless plug here. Yeah. A good courses on a GraphQL to kind of break them down like front end GraphQL versus backend GraphQL. So you can kind of start with the front end, get your feet wet, and then see how the backend works. But also I think the Shura's docs and their guys are also really good. I actually referenced them a lot. I've met the Shura co-founders way back when they were starting, just a really impressive team there. So I think they have some really good resources as well.

So I think this really depends on, on your style. You personally, I just read the spec. I'm just that person now where I'll just go, go to GitHub, open up a repo, just go to the code and be like, okay, that's how it works. But you know, I wasn't like that when I started out.

So yeah, however you feel. Yeah, for sure. And I believe that puts us at a time folks. It seems like a great place to wrap up. We appreciate you joining us. Hope you found this useful and learn something new about a React and GraphQL. Take care. Thanks for having us.