Client-Side GraphQL in React

Apollo Client Tool

Scott Moss

Scott Moss

Superfilter AI
Client-Side GraphQL in React

Check out a free preview of the full Client-Side GraphQL in React course

The "Apollo Client Tool" 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 defines Apollo Client as an encapsulation of http logic and a client side state management tool, and answers questions about how to use Apollo Client for state management.


Transcript from the "Apollo Client Tool" Lesson

>> Scott Moss: Now hopping into Apollo Client. So Apollo Client is a couple of things. Basically what it is, is it encapsulate HTTP logic used to interact with the GraphQL API. So everything we've been doing here, as far as like these operations, these quarters, these mutations, this is what the client is responsible for.

And how these gets transferred over the server, the network layer Apollo encapsulates that away from you. So you don't have to worry about setting up a fetcher and using, am I using window.fetch, am I using Axios, am I using Ajax? You don't have to worry about that. Apollo figures that out for you, so that's one benefit.

It also doubles as a client-side state management. So if you ever use something like Redux for Reacts or ViewX for View or what does Edgar use these days NGRX store. If you ever use something like that Apollo doubles as that so it's not only going to be storing state for the data that you get back from your server, it's also possible to store state it's created locally on your client.

So it can do both. Not just API data, but local data as well. So it kind of kind of does all that stuff. It also has a really nice plugin approach for extending its capabilities. It depends on no framework. Apollo client has nothing to do with React has nothing to do with View, has nothing to do with Redux.

It used to be built on top of Redux, but they took that out. But it you can use it anywhere. You can use it in a Vanilla JavaScript if you want, so that it really doesn't matter has no dependencies on any other framework. You just drop it in and it just works.

>> Speaker 2: So, I'm sure people then ask, I have a project that's all ready using a state management tool like ReadX, but we're interested in adopting Apollo Client, how do people usually go upon navigating that? I'd imagine they wouldn't be maintaining two spaces. So what, I guess from your experience, how do people approach that problem?

>> Scott Moss: Yeah, I actually ran across that problem before. So, I was using Apollo Client One when it had Redux built into it. So, at that point it was just merging their internal Redux with your Redux and it just worked. And then we migrated up to Apollo Two, but we still had Redux, so we're like what do we do here?

Well, from what I end up doing at least was, I use the, first you don't have to use any of the caching that Apollo does, you can just not if you want to, you don't have to. But to what I decided to do was use Apollo's cache for only the data that came back from the GraphQL API but use Redux for any local state.

That was basically it. So it still worked out. I had one state management for a data from API, another state management for any local state, like toggling is Boolean or this flag or something like that. And they don't really conflict with each other. But now with Apollo two, you can just use Apollo for all that, what's basically means you can query local states using GraphQL queries.

So that's the whole point of it this, it's like, they want you to use GraphQL for everything, not just querying data on your API, but also querying data in local storage. Querying data in memory and you React that. Querying the DOM. You can do anything with GraphQL, and that's the whole point.

So that's what they're trying to get to.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now