And I think it's just all of this internal bits here. I can just... I got out real quick. I believe that is the bits. Yeah. All right. So, what we want to do here is I'm just going to drop in a UL. Maybe. I always sign up for these crazy long classes, and then I'm always like, oh, yeah, I'll be fine. By the end, I'm just like typing garbage. Okay. So, we can confirm that this bit works here. So, let's go ahead and bring in our library now to help us work with this. We're going to import from... Wow. Maybe I was doing better when I was standing up as opposed to... From our generated library here. So, we're going to go ahead and go up to our utils, and we're going to go inside of our generated repo, and we're going to go inside of Zeus, and we want the Apollo hooks. And so, what we want is we want to do the use typed query. And from here, we're going to go ahead and do an actual data query. I have to remember with the use typed query here, it might be totally... It might be the spread operator. It is unfortunately not... It is spread operator. Okay. So, we're going to just spread these values here. So, it's data and it's error and loading are possible values here. Use the typed query. And from here, we're going to go ahead and just grab a list of our user. And because we have filter inputs, here's where people get kind of upset about GraphQL's inputs. So, we're going to go ahead and just grab a list of our user. And because we have filter inputs, here's where people get kind of upset about GraphQL's Zeus. And it might be fair, but I think if once you learn it, you learn it. So, it's okay. Your query is actually an array with your filter inputs as the first object. So, here we could do things like where... And you'll see these type hintings coming up, right? Where it's like, so nice. I mean, you can just kind of just drill down on here and you can say a name, equals Jesse, for example. So, you get the type hintings, which is just super fantastic. I'm going to leave this blank because I just want everybody, but I still need to pass in the first object. And then what I do here is I'm going to go ahead and just drill down on the properties. And so, I want the name, which is the only one that I actually have available to me in this context. And so, I say true on the field. So, I'm getting these types of things. So, I'm getting these key values that are mapped to the actual fields of the query. And I'm saying the ones that I want. Now, I can do things like, you know, password, or I can do things like an email here and say false. And if I was in a credentialed environment, I would be able to access that. I can't access that. So, I'm not going to be able to get access to that here. Sorry, like this. So, I can leave this as false, and I wouldn't even be requesting that. But I could do something is like if I were to say, you know, is admin, then make this you're actually requesting this, and if not, false. Like, that becomes the real power here in this way of querying. Because instead of writing a whole bunch of queries, give me an admin type query, or give me a user type query, an authorized user, or a user query, I can pass in Boolean properties to turn on and off the fields I'm requesting for, instead of doing like string interpolation to say I want this piece of data from my server when I am this person. And that I really like that, because that's kind of mapping the ideal use case of a GraphQL was, which is a super simple syntax for querying this content and executing these resolvers, but without having to write a whole bunch of different string types. So, in this case, I don't have access to it, no how, for right now. So, I'm going to just pass it like this. So, I have this user type query, I have this GraphQL query here, and what we're going to do is just come down here to our UL that we had, and we're going to go a very cheater style here and say okay, data, and data.map, and then we're going to go ahead and grab in the user and the index, and we're just going to return the LIs where we have the key is equal to the index here, and we're just going to pass in the user.name. And it's complaining about mapping, because data.user.map. So, we're going to do is data.user. This is a potentially undefined. So, we have this context. Let's check to see if we got what we wanted. Wait for a second for it to query. And we have our users returning from the string. So, it's a fair amount of boilerplate, and it takes a lot of time to write it, but once you have it, you have it. And then you can use this shell, this wrapper, and again, I'm pushing this all up to the server so you'll have this, and you can actually just clone this repo and be ready to go. But like, once the boilerplates in place, like that's a really, really good way to do it. So, if we wanted to have something like to see all the options that Hazura's filtering queries have for me, that generated GraphQL API, I can do all of that sort of introspection here directly inside of my IDE. And that's like really, really cool, you know? You can do things like that. And then you can also do things like, you know, like, you can do things like, you know, that's like really, really cool, you know? You can do things like is like and pass in whatever filters and stuff. So, that's the that is the basics of the filtering. Now, let's go ahead and try to create a mutation. Let's go ahead and try to create a login system here that will allow us to be able to create a yeah, create a sense of user state. So, we're gonna try that in the what is that? I don't know. Is that 30 minutes left? It's roughly 30 minutes. 15 or 30. 30. So, I think we got time. So, I assuming that nobody minds, I'm going to go a little faster here with some of the pasting of the code over so that you have access to it. And I'll really roughly because it's essentially the same concepts, I'm really going to roughly say what the code's doing without as much walkthrough on it. And we'll see if we can actually get this piece kind of running in 30 minutes. So, I'm hoping that's okay. You're gonna get the rough GitHub stuff today. I'm gonna wrap it up for you as well with a bow on it. So, that's gonna be cleaned up hopefully tomorrow. And that'll be something that'll be also well documented. So, let's go ahead and try. Nobody's saying no to that idea.
Comments