Kong Insomnia Stream, 21 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Insomnia Stream 2022 06 21- Prettifying GraphQL Variables

Description

A weekly stream focused on Insomnia's open source community.
Join us on the #stream channel over on the Insomnia community slack: https://chat.insomnia.rest/

This week, we looked into a PR by the community for prettifying GraphQL variables

A

B

Okay, uh hello, everyone welcome to another insomniac stream, uh I'm james uh together with me. I have mark uh hey mark.

C

Hey guys, how are you doing I'm pretty good? You.

B

Nice uh doing really well actually um the weather.

A

B

Amsterdam is really nice these days, so uh it's really good.

C

It's awesome. You had a good on plug weekend uh for your contacts for the viewers uh at kong. We had unplugged weekend on friday uh and like sang from the friday ending on monday, so we had uh four days off. Is that right.

B

Yeah yeah correct.

B

uh And it was great, I have to say it- it was really nice uh getting some energy back. uh You know uh is always nice right um cool. I'm gonna try to share my screen here.

B

Nice all right, so, let's see what we have for the stream uh in our issues uh in our pull requests. So we have this graphical, pretty fight thing, which I think we saw the other time. uh Probably was you with dmitry mark.

C

uh I wasn't participating at that.

B

Time, yeah all right, so uh I think we've seen this before and we went somewhere close to the end, so it might be worth pursuing this and trying to merge it and then there's not so much so uh that's good to see like uh you know, there's always probably more issues we can pull in here. But it's a nice to see that I don't need to scroll to see all the things we have all right, so cool, I'm going to start looking at the issue and perhaps like provide some context but mark.

B

Are you familiar with it.

C

um Yeah so when you click the uh prettify graphql button, it only work on the the not the variable part, but the actual body editor.

C

We have two panels right.

B

C

Yeah, so this fix was to act on both editor panels.

B

Yeah, I see all right.

B

Okay, let me start then, by yeah. I remember I added some uh comments here, because some things were not working correctly.

B

But here's dmitry trying stuff out uh seth uh says he's gonna look at it later, but no worries uh we got. You covered all right. So, let's uh all right, we also have to resolve some conflicts. So let's let's try and go there. Let's go to the pull request.

B

All right, I'm gonna call I'm gonna, try and set things up um a bit because I don't have uh the pull request open at the time.

B

So I'm not sure if I should share all the stuff, because I also want to give you a live share, link and I'm not sure if the tokens itself are private or not.

B

Okay, I don't know cool.

A

B

All right we're back on it. um Let's see uh get helpful requests uh fix spreadify check out this pull request. I love this feature of github by the way where you can, just you know, go to the thing.

B

It seems this thing has been force boost and I think it's gonna do the job. Oh.

B

B

This is some output that changed.

B

Just the comment here to point to another place, because this package probably has been updated and here's the dose of the theme which the thing is like all the changes we made to the graphical editor.

B

So it appears that now variables are required for the body like at least a string is required, and we now keep a reference to the variable. Editor.

B

We initialize it with this function,.

B

All right, um cool.

B

We get these things from the settings uh and now we use them like that uh intent, characters.

B

And then we prettify the variables and we pass as the second argument, the intent characters so that that seems like new uh logic to me, um that we should at least write a test.

B

um And then this one also expects a string.

B

This one is a graphical body if there are variables, then set the variables, but that's current. That's all that's guaranteed to run right, because this is always going to be a string.

B

Mark yeah: what do you think.

C

Oh sorry, I was muted yeah. I think that's uh that's what it seems.

B

C

There any case.

B

This would not run. Oh yes, if it's an empty string.

C

Yeah, when it's uh yeah there's no variables.

B

uh Okay uh and then we have, if there's variables.

B

C

You particularly don't assign the value what.

B

What is this? That's weird? uh Oh okay,.

B

Okay, I think I know what what's going on here before we were doing this null thing when the variables were changed, but now we say always go and update the variables because the variables is a string. Actually, so we get a string, someone is typing.

B

uh You know, someone is typing this and they're typing like a and we get this as a string and then we say like do the thing put it there put this string there like that and then, if it's not empty parse it, because we want to catch the error and if there's an error we should we want to set the state to this thing, but this seems like a hack to me um to get this functionality. I I think, that's why it exists here. I'm not sure.

B

If that's the reason you see what I'm saying like, where I think they're doing json parse here to capture the error and then go through the cuts and then do the this state, but it doesn't sound uh like a solid strategy to me.

B

A

B

Also, we have this neat thing that basically just puts the uh edit or code mirror editor instance into this components, uh state or properties, actually, because that's a class component, all right.

B

So that's kind of like a ref, but we don't care so much about it all right. So the the two things that I see changed here that we see test is the 3d variables part where, uh where.

A

B

This thing that jason principali with the indent characters.

B

And then the jason pars thing, which I think there might be a better way to do it rather than like trying json bars.

B

That's my biggest concerns.

C

C

So yeah, okay see yeah. This is text editor, so we just want to read the text. Editor content as a string and.

C

The variable should be actually record string and unknown value, so we need to parse it when we parse it, there may be an error and we want to catch the air. Okay, I see.

A

B

Case that that is not even needed to be in there.

C

Yeah, I feel like this is a lint here, not.

C

C

Yeah, I feel it feels like this is uh this doesn't belong here.

B

Yeah, the other thing that needs to happen is, I should probably try to rebase this.

B

Because there's a conflict, so perhaps we can start from there because.

C

B

uh We're gonna face it in the end, so it's it might be better. If we just do it now, get it out of the way uh auto merging failed cool. If we come here and remove the color.

B

There's some stuff in graphical editor, yeah.

B

It asks me to merge, but there's no one and save.

B

All right, cool.

B

uh All right, so that appears to be coming from uh great vr by zone which is enabling street typescript in the app. So I think we need to grab that.

B

Type uh put it here and just accept this guy and then probably that's the same oops.

B

B

That should be the same.

B

Yeah all right, so that's it. It's basically a type issue. I think we should be fine.

B

A

B

B

All right so now that that is out of the way, um let's move on uh oops um cool, so uh intense characters. That's one thing I want to check um and then uh jason parks is another.

B

B

Okay for this one, I don't know how you feel, but I think this is doing like two things one. Is it just updates this all the time, so I will just split it to update the body.

B

uh I know body change gets a string and it just sets the state to something.

A

B

Okay, what oh yeah! This goes in many places.

B

And then it also fires, then sayings and the new content and the new content is distinct string for the operation name.

B

Okay, so body is used to the set state, so we basically set an object and that object now has a new variable string.

B

So that's doing that.

C

B

uh Plus you know doing other stuff um and then the second thing that happens in my opinion, is um if there's, if this thing is, uh is not validation, then we want to update the syntax error in the state with the error message from parsing this guy uh and if I go here, I can see that I can see that we do set state and we set the variable syntax error to nothing in here too, so that might lead to some like crazy race condition stuff which I wanted I wouldn't want to handle.

B

So perhaps we can just put it in there like this check.

B

You know what I mean like: we can take it out of here, and we can just in here um do the check.

B

B

Do kind of something like this.

C

Well, um I see.

B

That, like it, will set state at the same time for both of these things, so we don't need to care about. Like sync, acing stuff, you know what I mean. It's like check this guy, and if this guy has an adder just put the error here and now that I look at it like this.

C

B

Yeah, this could also be a derived value from uh from the body. So variables is an empty thing uh that comes from here and that's exactly the variables we used before.

B

To do this sex so handle body chains accepts the variables.

B

We check these variables if they're, not the thing, we capture the message, yeah all right.

B

You said we we could try to move this out in a function or something.

C

Yeah, I think it may be better to uh just put that as a function and call it inside this function.

B

C

I guess ideally, you know if this was a functional component, we can just have that in the use effect um as a standalone use effect to set the uh variable syntax error state, um but uh yeah.

B

Yeah, pretty all right, so we do this. We capture the header um and we set this guy to the error and we update the state, alongside with this guy.

B

Yeah, okay, I mean this is just basically checking if that zone is valid. So.

B

uh Extractive function in the model, scope is validation.

B

B

B

It kind of looks too much for me to do this because I think, like just the inline thing,.

B

It's pretty like we're just wrapping this in a in a.

B

In a function, but it doesn't like create something new uh words is putting it behind something, but it's basically gonna do the same thing. uh Perhaps the try cats for the jason pars, like is jason.

B

Could do this thing, but then return true or false.

B

B

While you're, seeing that that uh codepilot thingy.

C

Yeah, that's really cool.

B

It just captured what I wanted to do.

C

All right so to plug in on the obvious code.

B

Yeah, you need some.

B

B

All right, so that would then be.

B

We don't need to try anymore; we can just do if not is validation.

B

B

Okay, but we also want to capture the message, so we just we don't just want it. What is the message, though,.

C

It's coming from your air object right.

B

All right so jason pars.

B

I just want to check if, if it had an error um definition.

B

Yeah, I'm okay with inlining this, because then we're just going into creating our own like rolling around jason, his validation mechanism.

C

Yeah no problem, I I was the idea- was to.

B

Unless you have any other likes, you know ideas we we can try. No.

C

It was just to uh make them more indicative that this these are what we need to put into the uh hook when we move this component to a functional component, but it's okay. We can just leave it as this.

B

B

Yeah because because then like, if we want to throw an adder through these, I would just name this parse jason and if it's not valid, it will throw an error, but then we, this just loses its meaning. It's the same. You know it's the same thing sure.

B

It's good that we tried this one um all right. Let me just go back a bit.

B

All right, so we cleaned this up, and then there was also now this place where it just does this the body stuff.

B

B

Oh there's more there's more things like this going on.

B

So string to graphql, okay, that's for graphql! There sorry.

B

So there's a thing that calls handle body chains.

B

Just replaces the query this one just does. Oh, I see because we have like many staff on the same object in in the state. That's our way to like reuse, what's there versus whatever, but why is this.

B

Because we want to pass the function reference to the component, so that's why we have this. I was thinking if we could just use this instead of like creating this wrapper functions.

B

B

B

All right, and then there's also this one- that we should try to test.

C

B

By the way, do you get access to the shared debug session.

C

A

C

I do yeah, I have variables watch call stack, so I think if you put breakpoint, I will be able to.

C

Let's, let's try yeah.

B

All right, uh I also want to check out okay. This one is now not blocked by these things.

C

B

All right, so, let's make a request collection and I want to see what dimitri tried uh he used. This.

C

B

uh So let's make a new graphql request. I really like this.

B

Why is this randomly stopping there? uh We can mark the okay, so one of the issues we have is, as you can see, uh this one defaults to an empty string where it should be an empty object or nothing.

C

If you do nothing.

B

Yeah because it doesn't make sense to be an empty string, it doesn't also it doesn't allow you uh to send stuff like. Let me.

B

Let me do that.

B

So variable name of required style was not. Let me find something without a variable.

B

B

All right, so it seems that now we're sending the request, because we probably do some tech to not pass this if it's empty, but I don't like that. It's this one as a default like it doesn't. I need to come to the editor and I need to delete it and I need to add stuff here.

B

So I think we should try to fix this.

B

Let's say some parts are okay, so we would need to debug this a bit.

C

Apollo studio uh just leaves that leaves us empty. It's like just empty yeah,.

B

Yeah, I guess it's the same for uh graphic graphic url. It is empty all right cool. So all right are you ready to go into the uh rabbit hole of how this gets uh set to empty string.

C

B

All right, so uh I think that's the variable editor. Yes, all right, so this guy gets initialized with some default value and that's variables. Variables is coming from here. Variable.

A

B

Which is this json predefined is in stringify variable subject: let's see what it has to say about it, cool all right. So if I step below uh oh okay, so variables is this from here variables, object is an empty string.

B

Json, the stringify of an empty string will probably do this for you. So what? If we it's? Something like that.

B

Undefined or not whatever,.

C

C

B

I should clear this breakpoint.

B

And just refresh this because it's instead.

C

Can you disable the breakpoints and uh just run it through like clean.

B

Yeah, I I just cleaned them up, but.

C

They, oh you just did. Okay.

B

C

B

He's there for some reason, this.

C

Weapon is a little bit late, like one tempo late.

B

Yeah, I think my laptop is burning out of the streaming and running all the compiler stuff. Okay, all right yeah. I don't have any uh waters or breakpoints, but I just get stuck here. So probably it's an issue with yeah.

C

Because I see breakpoint on my end, you know, oh all, right, yeah.

B

Let's try yeah.

B

All right so graphical editor, this fireballs thingy I'll just put one here.

B

So now variables is just an empty string, so when it gets past it's cool.

B

Variable types is.

B

From the schema, okay, that's something we shouldn't care.

B

Cool, so that seems to work. I'm gonna try and see like what happens. If I add stuff.

B

Okay, that might be the previous value call.

B

um What, if I use this one.

B

I'm going to do a name.

B

Let me remove this.

B

Oh okay, uh it seems that zach joined. I will add you. I need to press this button on the thing on the left. uh Yeah welcome.

A

Jack, I think I think I'm here now right.

B

Yep, yes, how are you doing.

A

Not bad solving graphql problems.

B

We're doing some graphical stuff yeah, let's, let's do a rig and do that we're almost there. I think, to having something work, but it's kind of complicated all right so variable says this thing.

B

In our state we have the body.

B

Now it should be named rick and in our state, is the state we have body, and we have this guy there cool.

B

And I can send this, uh it was not provided.

B

B

Could it be that I messed something up.

A

What's the hypothesis.

B

um So so I just write: uh we have these variables here that we sent to the to this editor on the right uh in a graphical request, so we have like the body editor and then we have the variables editor.

B

um The thing is the variables editor so far would get initialized with this variable's object, which could be an empty string and if it was an empty string because it was stringified what the user sees is this in the editor? So that's that's not something we want to have. We want to have just an empty editor, um so I added this like or undefined, and this returns like a because we stringify and purify in the end, it's like an empty string.

B

So now, if I just do.

B

Oh, so, if I do um you know, if I do a bad jason, we can see unexpected token thingy in position. Three, which is fine like it tells us. This thing is not what you'd expect, if I add like rick, I can pause here.

B

And you're gonna see.

B

That this is now like a string uh pretty fine and whatnot. With this.

B

Guy cool and the problem was that when I clicked in this request- and I press send, it says the name is required, but was not provided so that has to do with sending.

B

So I want to check like what happens in the parsing states so on chains, and then we have this guy.

C

B

Okay, I'm guessing this is happening on the send request uh like this issue, but let's see what we sent.

B

Okay, so we sent this thing.

B

uh It's appears to have a name, but I'm not sure if this last t here is valid. So probably like fails because of that you see what I mean.

B

We're stringifying and sending the variables here, but for some reason it says you don't have prov, you haven't, provided a variable called name, but we can see here. We just did and we can see here that this thing uh I should probably.

B

Parse it aside somewhere.

B

Cool, so we can see that this thing sends query with some stuff, and then it also sends variables with name rig and whatever, as a stringifying thing. uh Is that the problem.

A

Maybe try to try to like pass that one in the same way, the variable content. The same way you passed the thing you pasted in there.

B

Yeah, I'm, I would need to do it somewhere in the coat, though, where this like slash, t, uh gets added, uh and I think it's this guy.

A

Yeah, it could be that that's not without a character in the variable interpreter.

B

I can try with just nothing because.

A

It might be a good idea to try to use json.pass in uh just in the browser console see. If it I mean it probably does pretty sure slash. T is just a tab, but.

B

B

I imagine the same, but let's see.

B

Let's see if this guy first just works.

B

All right so removing the thingy works. um Could this be with like how how the graphql server strips or parses the string we send to it? It could be that you know we.

B

We shouldn't send these characters and it might be.

B

Invalid, you know what I mean.

B

Okay, so this one seems to fix this, but my guess is like it's probably gonna break something else, because this is editor and then with tabs. So I probably have this option since I'm getting this.

B

A

That would yeah. Can you also use json stringify, uh the the additional params to do this? Like presentation stuff, you know.

B

A

You can use those uh like, I think, if you you put a space and then like the number two after adjacent stringify arg it um it does, it uses spaces for formatting and if you use slash t it uses tabs for formatting. Is that right? You know what I mean. I.

C

Think that's! Okay!

C

After the replacer uh argument, right.

A

Yeah um yeah, that's still, it still conflates two things I think, probably are more towards the root cause, which is that our presentation logic is dictating what we send to graphql and that probably should not ever be the case.

C

B

Yeah, I sent you a vs code link by the way, if you want to sell anything.

A

I I prefer just to watch you yeah.

B

Like my initial thing would be like try to understand how this thing is being used um because, like there's so many places like, is this stored in the database, like that, uh I think so. uh Is it being used by the editor?

B

Probably because we have like this intent with tabs. But then, when we do the send and we send the request- we probably need to strip this. If it's even the case that that's the that's the problem.

A

B

C

A

So, uh there's also these two other ways you can see.

A

A

For indenting with tabs that doesn't require.

A

Whatever this is doing stripping spaces and replacing with tabs.

B

Oh, I love this uh all right, so that would be okay. That would four would be yeah.

A

Yeah, you also probably don't want to pat you want to pass the js obj as your instead of indent chars and move indent charts just to the react component where it's actually presented.

A

You know what I mean so then we're separating the concern of presenting to user and uh whatever this, whatever this gets sent to handle body change.

B

A

I mean maybe do not do two things at once as well. I don't want to make things harder for you.

B

All right, let's try this one. So uh oh okay,.

B

So in 10 character, one.

C

I I think the uh can can you can you go to the jason prudify definition of it? I want to see what's that partners and.

B

Intent characters is t.

A

Oh okay, this is basically.

B

What you said here uh yeah, but you need to pass it like either the t uh oops or uh how many spaces you want. So that's why they did it like that.

A

Is there any unique functionality of json predefined, it couldn't be replaced with json.stringify.

B

It's formatting without parsing code taken, I think, json stringify will not work with invalid.

A

So the error handling.

B

Yeah, because this one is, is we're passing it a string, we're not passing um an actual object, so the difference is this takes a string that looks like jason.

C

B

Makes it look nice? So if I had this invalid thing, um I can do prettify and it's going to pretty fine with whatever I told it to.

C

B

Jason stringify needs an actual object and in our case uh this is, we cannot represent this. We cannot json parse. This.

C

B

It will throw it throws a matter. It says, like hey, you're, what what is this um so I agree, that's cool, but that's probably why we need some prettify.

A

So, what's the call stack above handle prettify like what.

A

I think part of the problem is this: this prettification step is coupled with the uh it's coupled with the data we actually send so.

A

A

Okay, so handle so handle prettify when we press prettified.craftql is triggered by this. Is that it also.

B

A

B

Yeah, so if I have this, I have a name, I have rick, I can do pratify and I can try to send- and this was not provided.

B

I get this issue if I remove this, let me try to recreate this.

C

I know this is going to sound really dirty, but uh when we send the uh graphql request, can we just replace the string pattern with brizex to remove you know flash t um it seems like you know, we're digging into uh something that is not um pleasurable to touch.

C

B

C

I'm looking at the uh insomniac code and uh there's a whole bunch of case that we're handling here.

A

B

There's two solutions: one is down the low four tabs here and just make this be always spaces. You know um I I don't like it since we offer like this option to use that perhaps we need it and that's the option. One option two is probably go to send request.

B

Take the variables and strip out characters that are not.

C

It's dirty, like you know, really dirty. I don't like it, but maybe that's. The chip is fixed right now. All right.

C

How how does the uh monaco will help here?

C

How would monaco help like if we were to use monaco as a text editor? How will.

B

Here's what I'm gonna try! uh I wanna see this if this works with jason, stringify, jason, pars, etc. um I I don't think it's a monaco issue.

C

No, I mean I, I understand it's not monography, so it's a quote near issue. Yeah.

B

C

Maybe not even called mirror issue. It's just like how we protify it.

C

But I was just curious because apollo studio uses one aqueous text, editor and they're doing the same similar things. So uh I was just curious. How would this be solved? A different text editor, but.

B

Yeah, to be honest, I'm not sure if it would change much.

B

Because we would still need to handle this kind of use case.

B

But probably the ergonomics of how it would work would be much simpler.

A

It seems like we're hitting a problem where code mirror doesn't easily allow us to have like a a raw form and a presentation form of the data that.

B

A

Thing and that puts us in a pickle when we want to control uh like a rendering context like taps spaces, coloration or some other like meta thing, because then we're altering the underlying data.

C

Yeah, I think you said it right.

A

B

I agree, I think this this would probably fit nicely in the edit or like we should be able to pass something like indent uh tabs. You know something like that.

A

And then this I have a, I have a question: what should what do you think what should happen? What does what do you think a user would expect if they set their environment to indent with tabs, and then they start using spaces? Should that um should that little window there replace everything they do with tabs? Should it let them do what they want freely or should it only happen on send, or you know, those kinds of questions.

B

A

Expose the the problem with this implementation, because because none of those things are good right, but they all happen right now,.

B

A

They all- or at least they all kind of happen by accident, um because we're constantly running the on change handler, which is constantly updating the values with space like is it updating all spaces or just indentation spaces?.

B

B

That's a good question.

A

Because when the user selects tabs, I think all they care about is the text they copy from it contains tabs.

A

I don't think they give a crap about what object we store and pass around. If we can do anything about that, I don't know if we can, with code, mirror, treat it as anything, but the way it's presented.

B

Oh look at this convert.

A

B

Ink correctly, let me make this guy all right yeah, so I think they first try to to go like the happy path and then they do like if it's not a validation, do crazy stuff and we would have to dig into how this library works. I guess.

C

Yeah, I think, jack what you said about having the separate presentation and the actual data that's being sent. I think that's the uh good approach that we should really actually take. If you want to fix this right.

A

I think we're hitting lots of problems from code mirror, though, like we have other issues with hotkeys and stuff, with code, mirror that I'm hesitant to push any further forward. If monaco is still on the table,.

A

Like why fix bugs and coat my life, we're gonna get rid of it.

B

Yeah, I I mean that's a fair.

A

Yeah that this also shines a light on the general kind of application of our json.I kind of stuff. We have, I mean it's baked into the language.

A

I think what we could do with is try to understand exactly what additional benefits it gives us if any, try and find a way to simplify it, because.

A

I think, in this case it's just creating more confusion, we're we're like going back and forth, passing and stringifying and sending off to our custom passwords and then also our custom stringifier pritifier. Whatever you want to call it.

A

Yeah anyway, I gotta get off.

B

All right, I think we have like uh reached the end of the stream. Also so I'll just add a note for from the stream to the pr uh that we need to check the tabs and stuff, um and perhaps the second take here is to try to uh do this stripping out or whatever, like.

B

I also like the presentation versus data separation, uh so perhaps we can try to see what it needs to to happen to get there because um yeah we we seem to be unpacking a lot of stuff where all we wanted to do was just allow you to purify this thing.

C

Yeah stalin has been saying some stuff, but I think we missed it.

C

When we stringify, it doesn't put slash t only slash n is put usually even if we use that.

C

Yeah but uh it seems like.

A

C

A different use case here, because json stringify requires you to pass the object, whereas the uh this json prettify, which is out of insomnia protify package, it takes a json, formatted string and just do they replace magic inside.

C

And jack pointed out that we didn't want to probably the intention here was not to parse it, because it may throw an error, so we can use json stringify just answer your message: stalin.

B

B

All right uh cool, I think we got a lot of stuff to check out uh for the next time. uh Perhaps we can also do it in between the streams uh thanks, everyone for everyone who joined uh everyone who watched this um see you again on the next stream.

C

Yeah. Thank you so much guys, uh thanks for uh all of all your support and uh involvement thanks so much.