GitLab Pair Programming - Frontend, 12 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20210312 - Observe THIS, Apollo Link!

Description

In this pairing session we look at simplifying some observable creation used for a new spam capturing apollo link!

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/56190

A

All right, oh, we are recording wow. This is a great name to type that's right on the first thing: okay, so.

B

All pronouncing it, if that's.

A

Yeah, I'm not trying to do that right like I, don't want to insult people. um Yes, so this is the one so pretty interesting top pick, and I just need the branch name. That's the only thing that I need right: um okay, cool get, checkout.

A

uh Cool get pull and gdk. I think my gdk is running, I don't know well you'll.

C

B

Eisenberg, it's eisenberg until you check, you won't know.

A

Gdk restart rails, web webpack and the background services, whatever they do. Nobody understands like I.

B

Think they're just.

A

I think that okay cool, so uh now, let's use an editor. um So to give you some context uh in the last last front-end call, we had this great call out about the spam stuff and that the spam stuff is essentially um that we now have this axios interceptor, which we can just use. If we want to handle, you know a recaptcha showing a recaptcha and we already have a graphql implementation.

A

Yes, um and I was like hey, let's generalize this right, whoa and generalizing it with a link.

A

It also showed some downsides with the current approach, so there are also backend changes, because right now, basically, the backend expects us to send all the spam stuff as part of the graphql query, um and the problem is, if it's part of the graphql query, you basically need to edit like in all the mutations and all the you know, you need to add it in the fields in as part of the those mutations and then it's very hard to write a generalized thing, because you would need to know where to set which variable and um so we've I've changed the approach about and to be like hey.

A

Why? Don't we set it as an http header right um so, and the idea here, though, is- and um this is really weird- because I don't know much about of observers and I heavily borrowed there- is a apollo retry link which just does arbitrary retries based on some conditions.

A

I borrowed their logic, reduced it a little bit down to say, hey, you know, because I don't need arbitrary retries. I want to show you the model if there's a capture, and otherwise just you know then try to resend it once it's not like I'm going to do this 10 times right. So there's like less logic involved, but I wonder if, because it still feels like overhead, I created a class. I wonder if we can reduce this, and so this would.

A

You know, obviously also change how the tests work um unit tests, at least, and so I was wondering if we could maybe somehow reduce this observable right I'll be interesting, um okay, cool. While I was talking. I hope that my ide was like oh yeah.

A

This is other stuff that I did uh that my ide is uh finished, doing things cool, so the idea here is like, instead of so apollo links, we remember I have operation and forward um so forward, whatever returns an observable, but rather than doing that directly, I'm doing like return new observable, um I create a capture operation um and you know. Basically, the capture operation does a normal, um that's a normal forward right.

A

So this is like the normal thing that you know pass it on whatever happens next and after this, if you're subscribing to that observer, that's returned observable, that's returned here right and in case we get a response. uh We check if there's an error and if the error needs the captcha we're showing the captcha setting the headers, and you know calling the execute function again right, um and I don't know because this feels like a lot of overhead for like I want to do a retry with an observer.

A

It feels like a lot of overhead to have this, um how you call it this uh this class right to instantiate an object, and I have the fear, because this now happens on every request right. I wonder if we should have like a shop, a bailout somehow that you say hey on the front end still, especially as we currently just have one root thanks. This is uh whiskey. Chocolate fudge, ice cream. I believe, oh.

C

A

um Yeah um getting drunk by eating ice cream, it's great wow! No, and I have some coke. So it's whiskey and coke and chocolate it's great.

C

Oh man, I think this is a good chemical combination for air program driving.

A

Yes- and this was just to give you context right and yes, so I would be happy if we could reduce this to have the same functionality without you know. Creating new objects um uh unless necessary- and I to be honest, like don't know what the overhead is or writing tests for it and or so.

C

So you so to if I'm hearing you correctly you're talking about there's, there's might be an opportunity to simplify. What's there yes um and we might want to see if we can conditionally run this link because there's probably some requests, we don't need to even do any of this.

A

So the idea is actually that this check should be. Rather, you know if we just this check is rather cheap right because it just checks the errors, and I assume that, like an error of that, that the find on an error is like trivial, like on an array right, I I assume like if you I'm just worried with the instantiation of these objects. That's that's the thing that I'm worried about. I think, if we're not instantiating those, we should be fine.

C

And I think it sounds like the first thing we want to do is actually forward like I would say it sounds like our link. The the smallest thing we could do is because we only ever want to do stuff if the condition is after we've gotten something back. If it has that error, then we want to do stuff, so I feel.

B

C

Shouldn't ever see the new keyword or anything until like when we do apollo capture link, let's just call, let's just forward it on and let's let's get the response thing and then, if we get that error, then we can that's when we want to. Maybe we can create a new object if that makes things look more maintainable or whatever, but like yeah, I I agree, it sounds like it sounds like this might be a little bit of overhead for every request. So.

A

The only question is- and I don't know observables that well right, because the problem is, if I'm just doing like return uh forward um operation right, then I would subscribe on this one and I would have like um uh on next right this. This is the thing that we care about. I mean there's also on error and whatnot, um and I would do my logic here right and in promises. I would just return a new promise and then the promised chain kind of thing takes care of it. But if I'm.

C

Like in an observable, observables are very, very similar. Observables are like take a promise. I promise you get. A single value. Observable is very very similar to that. But now you get, you can get a bunch of values, um and so you can actually map an observable um and that's kind of what we would do. We want to forward it, but then, whatever I get as my response, if I get one of these graphql error things, I may want to map that value to something else, so we don't have to actually do a whole subscription.

C

We can also just map an observable so.

A

When I tried mapping it and then returned like what do I return, then, because I basically need to run the forward again.

C

And so this brings up a really good question, so yeah um wait for so what what are we gonna do? How so that's what I'm curious about too? What's gonna happen, if you know we the you, the dialogue, pops up yo, you gotta capture,.

A

Let me show it to you, I I will remove this yeah.

C

Let's do that: let's do that, because I'm a little curious too that that bit is I'm not I'm not. Yes,.

A

So, let's, let's see here: okay, let's I'm filtering for graphql, already right, nico.

C

I had to I had to flip through my cameras, like is nico still here. Is he okay.

A

C

B

A

So we have like this is our edit sweet and this is a user that always gets a capture right. This is like a bad person. Oh man,.

C

Well, they're, just a robot person: hey, hey.

A

C

A

It's right and okay, so this is the whole flow.

C

A

And so the thing that happens is like this: this should be our first post right and in the first post I have an error. The arrow says: hey you know, needs kept like extensions is a thing in graphql. You have an error, object with message, location and path. This is all related to the graphql query. An extension is the stuff where you can put arbitrary stuff.

A

So we put all the all the stuff in here like regarding captchas right and uh then you know, we show the modal and once the model is resolved, you know we just forward in the link again uh so, and here we just on the request on the headers set, the spam lock id and the this is actually wrong and the capture response right.

C

So what um what happens so so? This is this happy path makes sense. What happens when the user just closes the modal uh very transparent. It should.

A

Be so um let me just show you we basically uh trigger a normal on next, so uh let me just cancel and then you should saving you see. Saving is still yes, so that's that's actually funny, because I think it should just work. I don't know why it doesn't work right now, um so normally we are now giving you the old error that we had. um So you should see the graphql error here, like the oh gosh, like your snippet, has been recognized as spam.

A

So you should see this arrow on on the top level here right like and maybe may this observer next, maybe I need to complete. No. This is like catch result like this dish. So basically you know this is the catch right, because we are like checking that you solved the capture and we should have just forwarded the original arrow object or the original response to uh the front end right. Maybe.

B

A

I don't know if I would have needed to like observe or error.

B

Does the does? The capture model throws uh because.

A

B

A

Of the import- yes, it's we had some no.

C

A

I mean it should throw here right like yeah, okay,.

C

Can we add, can we add a couple of logs just for fun.

A

Yes sure um so console log capture not solved got a capsule, and you know I mean this. We actually should also have the error right, like.

B

Capture solved.

A

And this is funny because spam lock id this is actually wrong right, because this should be spam. Oh log id it's funny that it even still.

C

Works yeah, that's interesting.

A

Let me let me also think, because I could be no, no, no, never mind it's. It's all right! Yeah, okay, um okay, let's try again what does the console say.

C

Oh, that worked yes, maybe because it didn't change anything I think the descript. Maybe it's because of the description just was the change right.

A

C

That's a yeah okay,.

A

Okay- and we can't.

C

A

ah I can't sorry that's okay,.

B

A

Oh I'm now I'm I'm.

C

Okay, that was a that was a double. Oh. Maybe there.

B

Was maybe there's enough four months bar? Yes, so we don't have a million logs.

A

Usually I'm using warnings; um okay, let's try again save cancer.

C

uh Do we want to do we want to look at didn't, do anything yeah.

A

I mean wait, wait for capture to be solved. Like I mean it does throw right like it rejects.

C

Wait but if you go back, we didn't receive a response. We just canceled right on hidden. Is that the thing that we want to do something on.

A

Let me try something out real quickly.

A

A

I'm I'm just trying with a new snippet, because it might be that it.

A

Wait ah console no. What.

C

So here's here here's another. This is crazy: crazy, go nuts idea, um yeah and and nico and and ip help me out.

C

What we're doing with okay, this thing: that's catching hey! There's a there's! A captcha issue! Yes handling that here uh by saying okay, we need to now show the modal and do all this stuff. We're really really coupling ourselves to to. I think this, this modal ux is it possible that I could not.

A

Have no we don't we don't because uh sorry for, for you know, this is wait for capture to be solved, and that doesn't mean that it's a modal or anything if, in the future, for example, we move to another capture solution that would just do some calculation mining, some bitcoins or whatever, and doesn't show you a modal. um It just needs to return a promise right so like, but, and this is actually what what what you're targeting right, like.

C

My uh but my question is: uh is it possible and my gut tells me it's possible, although very unlikely, um to have two captchas on the same screen? So let's say it's not a modal, but let's say it's like an embedded little box. Could I have two forms and it's like? Oh I've submitted this one and now I have a little box and then I go to submit another one. Now I have a little box like how is it gonna know? Okay,.

B

I think a ux person will jump at your throat and choke you when you the moment that you suggested two captures something.

A

B

I'm not suggesting it.

A

I'm just I'm just super confused as to why it's not doing anything right now like can.

B

You can you check the source.

A

Code of the of the the catcher to be solved, and what does it do on cancer button? Yes, no it it actually it it will reject it's uh 100 percent sure that it will.

B

So so the constant.

A

Log will be there so yeah, but even solving which I just now didn't log anything. That's what I'm concerned about right, like I'm super confused as to why um I mean you know what I'm going to do like hey. This should be really easy. Console 1 link right, like even here, link.

C

Are you not getting any logs, you think it's.

B

C

I know maybe it's.

B

Because I turned off the performance.

A

C

Did you ever watch the zelda cartoon? No, oh, my gosh! It's like the worst thing ever. uh You have. You know zelda and and link's kind of hanging out at the castle and they gotta go oh and link one of link's catch phrases is well. Excuse me princess. It's really bad!

C

You should watch the zelda cartoon. It makes no sense you're, not getting anything well, you're on view right now, you're not on edit uh right.

A

uh Yes, but I mean this should be executed on any graphql query like anything.

C

A

We're doing them right like if you.

C

Go back to your console.

A

Yeah, am I maybe filtering by something or.

B

A

B

Error that is not shown, you have a red dot.

C

Yeah, what's up with that.

A

Oh, I am so sorry guys it was the wrong.

C

Call you gotta, do this embedded console thing.

A

Yes, no I had it. I was working on the keyboard. Help model right and the keyboard help model is so large that you know yeah. Anyhow, sorry now we have it right. Save changes, capture link, oh man, yeah. This is from recaptcha, so cancel capture not solved unsolved capture, error and so on. The the thing is- and this is why I don't understand we actually send it down the line like the original result right like we're sending it like. So we going here, the question is like like: how does the mutation handle errors?

A

So how is this thing called? I think it's edit view right, and we just have to see like the mutation here and base object, errors.

A

B

A

Yes, so, let's maybe just console log um wait, this makes no sense. It should check the data right. Oh no base object. ah Yes, this makes sense because we moved the errors before the arrows were on the update, snippet right, but.

C

Now the arrows.

A

Part of it, it's.

C

On the top level, I mean.

A

C

So it's going to be data, comma errors. I love that that's beautiful yeah, so we can get rid of line 173 then right. We can just get rid of it right.

A

I mean it could there could still be arrows on the object. I believe I don't need another name so.

A

A

Yeah, okay, let me just do.

A

This then oh gosh, this is ugly.

C

A

It seems to be that errors can be null right like and so like. This will definitely now be arrays right.

C

I would say: that's.

A

Going to be an.

C

Array, I would say I think you found those brackets there.

A

Look like lisp.

A

Yeah, okay, so now now I should show it should: you know, save cancel and you should get the flash where's. The flash like.

C

Do you want to console.log what we're getting with errors? Maybe.

A

Press bonds and then we do data errors right yeah and you three arguments to console one. What you can give.

B

A

As you want like, it will, just, I think, just like log.

B

Okay, I'm just interested in response. Somebody revokes my senior level.

C

He doesn't use console log. How does he debug? Does he.

A

Even debug, what's nico do yes, so it's interesting because apparently like wait.

C

I didn't see the log, but what happened like nothing? Nothing. Oh, it's not! Even it's not even going through.

A

So I mean it also consol arrow. Is there like no, no error? So that's funny. So apparently we go here, but what the observer does like. I, I wonder if we need to complete the observer that you know maybe apollo down the chain is waiting on more things.

C

Yep yep. That would be a thing for sure.

A

Oh, my ice is melting shoot, maybe not the best way to drive.

C

I can drive if you want to eat man or nico.

A

C

Drive I drove last time I think.

A

That's fine. I just need to remind like to get a bite from time to time. Yes,.

C

See there it is, you got to complete your observables man, um but yeah so like with. uh I think that you can. um I think that we can uh map this, but what we're actually doing is mapping to another observable, so you can actually flat map observables. So we can map each value, we see to another observable and then it will expand that as well. So I think I think flat map might be what we're wanting to do here.

C

Okay, let's see if they have flat map, but it might be called something: fancy and an observable world.

A

So they have off, they have from, they have subscribed. That's the thing that they're.

C

Doing currently yep.

A

Yes, map wait, there's one there's, filter map, reduce and contact.

C

Yes, they don't have flat map.

B

It's time for a pr pull.

C

uh Can you look up um rxjs flat map uh because, and we can, we can write this ourselves? It's it's not hard but like this is what we want to do and I think if, if you add a new tab, rxjs flat map that mpa uh they may have that one too I'm joking.

C

Yeah in the tab, oh.

A

They have flat map they're just recommended.

C

Yeah there we go that's what we want to do, so this is what it looks like if you go to. I love the rxjs diagrams they're, so cool. No, it's not even rxjs right. Well, it's it's the same thing. uh So what.

A

Okay, so if I can flat map so actually let me just check flat map, so what flatmap does it subscribe? I would.

C

Check out the diagram, uh so you have an observable: that's sending items down the pipe yeah, but then we have a function that creates observables, and this is this one that does can take 10 to 10.. So then, for every thing that comes down the pipe we're now going to have all of that, we're going to have that observable, spread till it completes uh and that's going to be on the pipe now uh so quick question: can we also return non-observables?

C

So then you just use a regular map, so, like flat map would be uh it's like returning a promise and a then of a promise. um That's kind of what flap map is like doing, uh okay, where, where, if I wanted to just do a regular map, I just want to map this value to another value. I can do that, but I see we're returning a promise. A promise can easily be mapped to an observable, so you can just use observable.of for the promise or something so we can map each.

C

We can map each each thing we see in the observable we can map it to an observable from a promise too.

A

Cool, so the thing that we then do here is pretty simple: we are basically doing flat map, and this is the this is the result right, yeah that.

C

Would be the on next thing? We.

A

See yes, and I.

C

A

I honestly don't just care about on next, because yep, the rest is just the same right like cool I, so I can. Actually you know yep do this and you're saying. Instead, I'm just doing return observable off from.

C

uh So we're gonna want to return a uh so up there where we have. If it's a capture error, we want to return that promise. It seems like right.

C

Does that make sense, but we can we can map a promise to an observable that zen observable should have that if it has of or from, I think it should have that.

B

That's the wrong documentation.

B

That is from for sure, because they're in the search.

C

C

If you go to, if you go up um to of.

C

Let me do a search for zen observable promise.

A

I don't know it's a super small implementation.

C

Like well, it's either way we can create this helper function. It's it's pretty trivial.

A

From if type is function,.

C

See it's doing one like if it has an array uh yeah.

A

As iterator is array, doesn't do one bit, but I mean to be honest, like should be super easy because we can just do like return new yep. We could do it like that. Yeah uh observable right and then it's observer, and then we just do import.

A

Then console 1 capture required. I don't care about this anymore uh and we just do observer next, complete, oh geez. This is like because here we would retur yeah here we want basically to do like uh you know, uh oh jeez, because here we basically ah no this is like super can, can we can we make this an async function and just use a weight and then return sync?

A

C

Do you want to do.

A

I want to make this one a weight. um No async! Sorry wait. I want. I want this to be.

A

C

How do you do this like, like? I don't? I don't think you can make flatmap async.

C

B

Why then, it's gonna return, a promise.

C

And it's not going to return an observable right and I think this library is going to expect us to return an observable, not a promise of observables. But.

A

B

I can promise you it's actually from outside.

C

But I don't but describe to me what what are you wanting to do? Why do you? Why did you want to use async, so the thing here is basically.

A

Here here we would need to do forward whatever what is it forward operation again right like and I'm in the same stuck thingy like how wait.

C

Here's what you're gonna do forward operation dot subscribe.

C

A

That's it yeah.

B

Why paul? Because I'm I'm lost now.

C

So if, if I'm not entirely sure why we want to do this, but if I understood what ip was talking about, uh if you wanted to take our observer observable here- and you want to bring it over to forward again- we could just call forward and just subscribe. Whatever observer now is going to receive whatever forward gets, I'm not sure why we want to do that, but no, we don't have to wait or anything or do anything recursive. We can just trigger that.

C

We can just subscribe to that observable again with a new observer, but why did we don't we have a result here? Don't we want to just did.

B

You just just make the loop this way. That's why I'm confused.

C

Yeah, I'm not sure why we want to do this uh so.

A

If we before so, this is basically a loop with the length of one.

C

It's this is not recursive, but it's not a loop, because now we have the captcha information. So now we're ready to do it all over again. We have the caption information, so it's not a forever loop. It's a! We are doing this. uh It's a one step, retry.

B

Yeah but this.operation is something that is still valid. The context now, that's.

C

True, no, we want to.

A

B

A

Operation is like what we get from the apollo link.

C

Yeah yeah I mean chances. Are this isn't going to be completely right? The first time, but uh I think it's already a little cleaner.

B

And where we are doing the, if, outside of this right, the if.

A

Is here like, so we send the query we get a result.

A

We um check the result for the error if the error, so let's go to happy path. First right, we we've got no capture error. We just return the result again and I think you want to use.

C

I think need to use of.

A

Yes, um so you know, this is the happy path like we go in here. We check are nothing found, we will just return it, and this is the arrow path where it's like, hey. You know, solve the capture thing.

A

If the capture we return a new observable and um if the captcha is then solved, we just do the operation once again and subscribe. This is like a bit confusing because we basically.

B

Restart the flow right like this yeah um and they add other sorry. The errors is not going to be set the second time because, when you subscribe in this case, we are filing a new request. Yeah, that's the flow.

A

This this, this is like first request. Second, request; second request: yes, okay.

B

Yeah, so basically, this is saying that we continue to subscribe until there is an error until he's a captcha error.

A

We continue to subscribe and until there is a capture error.

C

No, this will just.

B

We can get the backhand sense again, an error with captcha error. You will get in a loop here.

A

Oh, this is actually good. No, this is a good point. I assume, if the back end would return something bad and we can try this out in a second. um We can actually, uh actually you will just see the arrow, so it would be the same as cancelling. So if you're like caught in a capture loop or whatever, you would see that error like and why we yeah.

B

No, this is good, but until there is that errors capture error in the thing this will keep going. That's I'm just so that I understand the the observer logic because I got lost here.

A

B

So what do you.

A

Don't you understand like no.

B

Look, I ask a precise question until capture error on line 51. It's true. It doesn't matter how many times we will reenter this and recall ourselves.

C

Now, if this is false, we're not going to hit our conditions.

B

No okay! That's that's why I say until that is true.

A

B

We keep calling ourselves okay. Now I go well.

C

I think I think forward is actually going to just keep going forward. I don't know forward, is gonna actually go through the whole? I think it made you go to the next apollo link too. So as ip.

A

C

Know if there's something recursive going on here, because we're not no.

A

No, it's it's pretty. It's pretty simple. uh Let me just maybe I can open next to the code. I can open the the apollo link documentation. I don't.

C

Know if I would say it's.

A

Pretty simple, like even observables, I wouldn't yeah. Sorry I like I, I don't mean to be condescending or so.

B

You're good, like.

A

What's this, why isn't this like? Is this a picture or what so imagine imagine this? Is our capture thingy right like this is our capture, so we come down the first time we forward. We forward. We get the capture error, we get the capture error, we are like, oh god, we got to capture arrow. Please solve the capture user solves the capture, we are like. Oh, you solved the game yeah and then we forward forward back, but we're not subscribing to that.

C

Second response and that's the thing we've passed, we're not looking for that. Second response, so I don't think there'll be it could be, but I don't I don't.

B

Know we are doing forward, don't subscribe.

C

But we're not we're not creating the line. 56 observable anymore, we're not doing that whole condition. We're not doing that. We're we're the this observer is going to be um uh okay, that's the beat that I was missing.

B

C

Yes, yes, yes, okay,.

B

C

The naming confuses me horribly, no, it's it's. It's definitely trippy and it's uh the only question I was like: why didn't it go through yeah? That's a good question uh did. Can we go back to our? I want to compare with with the with the code that was working uh so we're doing it's gone. Okay, that's good!.

A

So the difference the difference before was instead of using the flat map. I created one observer that I returned here right and um I basically operated on that one. I created one observable and I was basically just working all of the time on this or one observer.

A

You know what I mean like yep.

C

A

C

Basically doing the flat map like you're- basically, yes, you're basically manually doing that, and we could do that. um But I'd like to yeah I'd like to see I'm curious. Did we send the right parameters down when we forwarded the operation.

A

um I mean I changed something here that you know confused me, um because this was apparently sending the wrong thing. um It could be that you know our logic with the back end is just a little bit uh um broken um like it could be, because there are basically three things. First thing is. um First thing is like that. You tell recapture hey, you know, this is a capture for the site. This is the capture. This is the capture site key. Then we have a spam lock id and the spam lock id is.

A

Actually you know that the backend knows hey. You know the solution that I'm getting now is actually for this. This capture that was solved, and the third thing is the captcha response, the solution right. So I just wonder like if we did something wrong here. Maybe I don't know, let's check it out: okay, okay, edit, I'm just going to you know, set.

A

Is actually happy right? Okay, let's, let's try it here and we got our graphql query the first one right that that just happened. Yep uh response here is no header whatsoever. We just click yay.

C

So that should be us forwarding it along yes, and it.

A

And it worked cool- I I just wanna like because it seems like the spam lock. Something is wrong with the spam lock id sure I either the spam lock id doesn't matter at all or something is broken like I don't know yeah, but.

C

It seems to work yeah, nico, you've, gone, you've, gone fuzzy man, yeah.

A

C

A

Sorry so here we can actually remove the braces even.

C

See this is where observables get really sweet. Now, when you remove the braces, when you remove the braces, yeah and you're like man, I can I can, I can eat heart candy now, yeah.

A

I've never had braces, so I cannot relate oh okay,.

C

A

Well, yeah, I never had to brace myself.

A

Winter is already here: um yeah no um cool like now, I'm just confused like happy. You know make this an act, oh what reload, but why did the auto reload reload a different page, did about a different page, or maybe I just hit like a comment. Let me just try again. Can you cancel I I I'm cancelling.

A

You know we get the arrow it's funny, though, that the arrow is like double encoded, but that's not the biggie yep saving. Again, I'm not a robot, and now I'm getting.

B

An error again.

A

Oh yeah, the error wasn't cleared right, so one of the things that we probably should uh do in the edit app is. We um should have like a flash api failure. We should clearly you know before updating. We should clear a flash that might have existed from a previous yeah.

C

On but wait, why would that flash? Why would it it did look like it reflashed right, but I agree so when we before we update, we need to clear out our flash.

C

Oh, what's that big error message.

A

This is probably like, oh.

A

Unexpected our graphql.

C

Error, oh yeah, that looks like a console here. I would.

A

Add so, let's, let's try again comment.

A

Thanks, oh yeah, I didn't do anything, I mean you ask questions you know, so this is always good. It is always good. Oh, this is interesting like what so, apparently it's causing.

A

This is super confusing. I I know I think I know what no this makes sense. I'm.

B

A

Think that if you go back to no.

B

It does make sense, you just eat the global ending of apollo. This way, no.

C

No, no, I think if you go to edit that view you see it's being called an edit.view. I think uh it's a apollo.

B

Error, yes, well,.

C

B

So it's probably the mutation right.

A

Yes, it's it's funny because it seems like so that's interesting.

A

I don't understand no, I understand so I assume that if you have top level error objects yet on yes, it is.

C

uh This is very related to um have you talked to natalia, about, like natalia, was, uh as knows all about these apollo errors, and that's why we did errors on the model itself, because otherwise, it's considered a something bad happen in the whole request.

B

There is two types of error: user, recorder, recoverable errors and user unrecordable errors basically and request errors. Actually, so it's three uh when they are inside the model. It means that that piece of the query or a piece of limitation went wrong and the rest may have gone well.

A

Right, so it's funny because we basically will never hit this one right like like with the capture stuff. If you're, we will never.

C

A

C

Shouldn't shouldn't capture, then be that's a user recoverable error like shouldn't, so.

A

C

A

You a different different perspective on that. We could do it that way, but then it will be pretty hard because we don't know where we need to put and read stuff in this generalized apollo link right. You would need to go through every object and see if errors are on there. That's generally good, but give you my most apt analogy that I have for the captcha. Is it's like authorization right? It's like a second authorization, and I don't know- and that's actually something I wanted to try out like what happens.

A

If you write a graphql query that tries to get like a project you don't have access to, um because I.

B

Don't you just don't get the project, you don't receive any error you receive enough. I can tell you for sure.

A

uh Okay: what's what if you want to try to update something that exists, and you don't have access and.

B

Then you get an authorization error or the results doesn't exist.

C

Yes, you so go back. Can you go back to our query um or to the query, uh can you go to our mutation to the yes?

C

What and I I had this idea with um uh chad when we were working when he was working on it um and put the spam stuff very specific just to this mutation.

C

What if, when I made a mutation like update, snippet yeah, um there was a second object that I query for yes,.

A

C

I I talked to alex.

A

About this, uh who wrote the the backend parts of this right or helped me write it um and the problem with that? Is that the way that our controllers work? So if you actually have the, oh god, the mutation? How is it called the update mutation?

A

We we put like all these of kind of things here right and these all relate to the snippet somehow automatically right and if you were to edit, like a second object here like a spam variable or whatever that's going to be a different resolver.

A

It it makes like the back end harder, and you know we would need to change all of the back-end stuff and uh yeah, and actually really funny that you mentioned it because um alex uh actually says like hey, let's maintain both and chat that you know actually is like hey the solution with the headers like this is his response. Why? The solution with the headers is actually quite nice and why we should go for the solution with the headers right, like yeah,.

C

Oh so having, instead of we, get headers in our graphql response as opposed, I.

B

Think I think we are talking about two different things, so the others is to send the capture things. But uh paul was asking if we could have a spam type that in the response right.

A

B

It would still mean.

A

That writing. Like a generalized, you mean you mean like that. You have something like this yeah.

B

A

It's not a generalized.

B

It's a type when you attach it everywhere that can be spam. Oh.

A

Yeah but but you know it's funny.

B

A

Because it's not it's funny, though, because what's oh gosh like.

B

What's what's what's funny about it and then and then you can check the response of the query. If there is palm inside, do your thumb think yeah.

A

I mean that that potentially would maybe doable. I don't know if we, if you, if you just because in the response, so instead of arrows, you would have a spam thingy, but still like. How would I know where I look, because adding a second top level result doesn't make any sense right, because everything that happens, everything that comes as a result of the update, snippet mutation will be inside of here right.

A

So I cannot have like a spam top level here. You can the response, uh because everything, because everything that that happens as part of the update snippet, must be inside of the part of the update snippets right. Yes,.

C

A

Okay, all right so- and you know adding something like it would be- maybe doable to add something on the top level uh so that it's not part of okay.

C

But that would not.

A

C

I do I do hear you then, but I'm going to go back then, and I'm going to challenge you on.

B

C

Me on your and it's a really good point and I think there's different alternatives. They all have their trade-offs, but I think the simplest thing would be if we can only have one root. That should actually be really easy for us to traverse. I get an object back, let's just go to the first key and look at the errors there, so, rather than putting the errors at the top treating this spam as a top level error which could cause issues like this, because this is actually user recoverable area and our like.

C

Let's just go to the first key yeah.

A

To be honest, yeah, another thing why why I'm saying like hey this? Maybe I don't want you, I I have no idea about graphql right and we have now this thing where we're sending arrows down the arrows down the drain uh and, to be honest, like this, is not something in the graphql spec, with the arrows uh being part of the object. This is actually something that graphql ruby recommends right and, to be honest, like this e, and why don't we have different arrow handling based on the type.

C

Of error that happened yeah right. No, no! I I totally get what you're saying so, what I'm talking about is we go back to our and I know we gotta, we gotta hop off, but we go back to the the new code that we were writing. Can you go back to the observable code? We were writing yes,.

A

Observable yeah.

C

C

Yes, there we go so change line, five.

C

Change layer, five line five, uh so we would do result so first, we're gonna do uh uh result.data.

C

You mean like traversing through the object, since we can only have one key there.

A

C

A

This basically gives you captures on all the things right like like even.

C

Well, I mean that's. My one suggestion was how about in our mutation. We have another key that we request, uh but if we can only have one key, then it's like hey, we should just be able to just go yeah just like that and then and then get the errors from there. So I all that to say, like I think.

A

I think this is something that we could discuss on the amount. The other thing that I would basically have done here is like hey doing the right thing and we would have said like, uh in my opinion, right thing I would have said, like hey, uh you know uh in the edit handler you could say like hey. If e instance of you know, the un solve capture error, do something better, and I.

C

Think and I think that'd be really sweet, it'd be really nice to solve errors in just one spot. I do know apollo, treats those errors on 181, like those are like very special. Something went really bad with apollo and so natalya has diff a much better perspective of this than I do. I ran into this one. I was doing some testing, but I know that, like this dot catch is is means something really bad happened in apollo land, um but that was just my answer. I mean.

A

I mean you're changing apollo land right like it actually means like something: bad happened in graphql land, and I assume that if you get an authorization arrow or the graphql endpoint is down, you will actually end up in the same catch right like you.

B

A

Up here, if you are not authorized to edit the snippet right like so, and to me like no, not.

C

Solving the camera is like.

A

A authorization thing well.

C

I I don't know because it's still a successful response I feel like it could be a domain and it's definitely a gray area like I think you could put it it could fit in both. I think it could be a domain specific error, but I can understand too it not being like that.

B

Yeah, the reality is that uh it depends on how the back and then point type is configured for every mutation, yeah, um yeah.

C

But but I think.

B

Even though there is a rule about it,.

C

I think, on the plus side, there's lots of options there like. I think we could traverse the object that doesn't seem like that'd, be that difficult um yeah, but I think I think, there's lots of options but dude this looks so sweet. This is a really really awesome way to approach uh the the capture stuff, so it looks really sweet um thanks for I'm glad we got to do some observable stuff. I love touching that stuff, so uh that was a lot of fun.

A

Would just be great if apollo at some point uses actual observables right.

C

Yeah rx is like actually really optimized like they do. They they have tree shaking like because they have a glorious amount of operations you could do, but they treat tree shaking really seriously uh yeah, it's pretty cool, dude nico. I pee it was awesome, seeing you all I'll catch, you all later have a good one. Bye.