GitLab Pair Programming - Frontend, 5 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: FE Pairing - 20210305 - Unit test for actioncable_link

Description

In this video we write a unit test for an ApolloLink we've written to interface with rails action cable.

00:00 - Start!
05:00 - Paul starts sharing his screen :|

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/43333#note_523177396

A

Send your dmr okay, I'm recording and we gotta write tests for a branch uh is, is: is this on a different project, or is this just a module in our main repo.

B

A main repo I sent you uh the link to the mr got it and the last commit adds the functionality.

B

That is our own implementation, but it has zero tests so far so yeah, yes, okay,.

A

Cool, let's check out this command.

C

A

And so this is oh 40 40 lines, oh man, that seems.

D

I look at luca's face and I know this is gonna, be a pain to test. Judging by his face expression. That's why he kind of.

B

D

You know, because you were writing one more apollo link. So let's see.

B

Yeah, I think it should be fine, yeah yeah. Let's do it. That sounds fun. This is great.

A

Okay, all right, let me I was doing something.

B

But maybe natalya, you could give an uh overview what this is actually doing, because I have no idea. I just see observable, link subscription action, cable, graphql, all these words and I have no idea what they mean.

D

This is actually just a module that we need to implement the graphql subscription for ourselves, and previously we were going to use a module from graphql ruby, but apparently we have issues with license a huge issues, thanks to lucas who discovered this and that's why we were going to write our own implementation, but then heinrich kind of decided that he is fine on himself and wrote it for ourselves. But this is all I can say to paul and, as you can see it's using observable, so you should be happy about.

A

D

A

Yeah, this looks great uh yeah and it's observable is this: just like rx observables.

D

This is not rx observables. This is not. This is observable, but not rx. Observable, because apollo has its own implementation of observable called zen observable, but the functionality is very close to rx1 yeah.

C

B

And I mean the subscription, basically, is you know the action? Cable stuff is a wrapper around uh websockets. So it's basically, you know just tying together. The web socket stuff with the uh observables.

A

Yeah, so I don't know um I don't I don't know if our unit test is gonna, do anything um like we can write a unit test for us, but just heads up it's going to be very unit testy because I don't think we're I'm going to kind of just ignore that we're extending apollo link- and we can just call this directly unless um someone has more context and knows you know now. This is how we can trigger this method with something.

A

This is how we would test apollo link and something that would extend apollo link because I'm guessing this overwrites that that method. So I was planning on just testing this class method directly, um but there might be a more sophisticated way with someone that has more context around apollo link and how I.

A

B

We have the startup js, which is apollo link, but again this is a bit differently because normally apollo link is like in you can che chain stuff in apollo link and you normally just pass it through only one way and then the other way you know pass it through as well right like so it's like an interceptor chain or I don't know how you want to call it um wow where you titles observables together, um but this is basically completely replacing the normal implementation and it's just like hey instead of using http or websockets or whatever else method.

B

You know blackmagic you're, now using the action, cable link and uh yeah.

A

Okay, so where do we? Where do we use thanks for thanks for letting me get some context here? Because I'm? Where do we use action? Cable link? Oh we're we're just getting we're using it uh like in our main graphql thing, so everything's gonna be using this action cabling or.

B

So it's if you, if you, if you ex, uh I don't know what um would you mind, sharing your screen? That's maybe gosh.

C

My I thought it was here. I was pointing at things on the screen.

E

And that's what I tried to welcome.

A

Thank you ip ip, you could. We could just kept on like this and then the recording would have been incredibly lame. Anyways all right. Let me show you.

F

You don't like us paul.

A

No, I was yeah, sorry, I I was like why I'm I'm clearly lost, but apparently everybody else was too. It was my fault.

B

So if you open the graphql js, you can see that we are actually splitting based on some condition. So if our graphql query contains a subscription operation, um I don't know how this actually looks in a graphql query. Then we use the new one. Otherwise we just go down the normal flow, so this is actually a cool thing in apollo link uh where you potentially could implement. Even something like hey. I want you know, queries to use this apollo link chain versus this.

B

So if you have like different apollo implementations, uh different endpoints or different conflicts for whatever.

C

B

C

A

So I still don't have um a whole lot of context here, but I do see we do have a startup js link, so I'm curious how we tested that and that's the thing I'm concerned about is I don't want to. I want to make sure we test it in the context, because this you know I could just test just this method, but then you know yeah. uh There's the mutation test would reveal that removing this line doesn't break my tests, and so I didn't do this the right way. I want to see let's.

B

See if this is coded up in the right way, yeah.

A

So I see we're actually here doing an actual link and that's interesting um yeah. I see we're still calling requests and that's cool, because I think I mean that's going to make things I think easier for for us.

B

All right, I have no memory of writing this test. Does it have your name on? No, it.

A

Does? Oh? No because guys are prettier.

A

Yeah, I don't know um so I I don't know if we need to write a test so to help me out. I'm I'm driving, but I need some navigators help me out should. Should I be worried about testing this in the context of apollo link? Are we cool with just calling requests? Why.

B

Don't we start with writing a test, and then we can decide later on all right, I just I.

C

Just wanted to talk about that it good. Let's do it. uh Let's write a test.

A

Ip, why don't we just start pull and stop? We all are waiting on you uh anyways. Here we go.

G

I think um if we follow the pattern that was used in the startup js, that's sort of more unit testy, but because the graphql file also has this split. We should probably have a test for that as well sort of a higher level integration test. I think.

A

That is a really good idea. We do actually um I mean it's our front-end integration test and like, like they technically hit that so we have like implicitly using that those lines are covered, but I don't know if we definitely don't have a good value coverage for those probably.

B

um A quick question that I have before we do: that is um natalya.

B

Is it do you think we will end up with a bunch of subscriptions everywhere, or will this just be a thing that we use from time to time because right now we're also adding, like all the code, that's around this every to the graphql js bundle, so it's loaded on every graphql js page, but you know right now. Only one page is actually using the subscription feature and it feels like. Maybe my question is basically: should we have like a different graphql?

B

um I don't know how do we call it when we set up the graphql setup, or should it be maybe a boolean in the setup to say hey? I want this with subscription support or without or something like that.

D

Eventually, there will be a bunch of graphql subscriptions because real-time updates are planned for the whole sidebar thing for any kind of issuable. So this is already a good part of gitlab. I mean issuable is issue margin, quest epic incident. Whatever else and from what I know the plans are to extend the real time. The question is like how much time this will take, because currently we have only one subscription and just to add to this subscriptions will be fine-grained, so we're not subscribing to updating issues.

D

We will subscribe to updating assignees separately uh reviewers, whatever else so it's up to you. We can optimize it right now and.

B

We can optimize it later as well, so we could have a follow-up to say like hey, maybe in the setup we have a boolean parameter or whatever right.

D

Yeah just for adding subscription not just.

G

This might be a.

D

G

As well, because um you know how much is this going to increase the main.

D

With action cable, it can't be an addition. It's not a.

B

Slide yeah it so the bundle size analysis currently says that our average javascript size increases by 20 kilobytes. But, to be honest, like I think, it's still, okay, because this will all be- or we should check later on- that is all part of the graphql js bundle. And then it's not like you know. If the graphql js functionality is a little larger than so be it right because it will hopefully be cached once you hit the first page that has the yeah yeah.

G

I now want to write a lazy link that you know you give it the thing you want to you, give it the path to import to instantiate and it sort of pens until the import is done and then forward. You could.

B

Actually do this here rather easily, because you have the observable already and in the observable you know. As far as I.

D

B

Observables they should be async, so you could also, in the observable, uh have like something like the cable import right. um Have it here? Yes, potentially, but I don't.

A

B

A

Yeah, that's new! That's interesting! um Okay! I yeah. I think I uh let's, let's get to let's put some code down, um but I'm I'm I'm stomping myself, because my instinct is telling me hey. I'm just gonna start mocking things. I don't understand, so we can just unit test this thing um and so one of them being you know, hey we're going to create a subscription, um and I want to really capture these things that we've ended up creating.

A

So I kind of want to spy on.

C

A

I guess, uh but someone stopped me before I do it. I guess I don't need to mock it, but I guess I do want to just spy on it.

A

But let's, let's see what happens there, so here I'm describing requests and a good it sounds like we should be working on. Is it creates a subscription.

A

Okay and let me just stop declaring a variable up there- oh yeah, I was going to create this thing yeah, let's create action, cable link and I think I just got to do new action, cable link. That was easy um and I think for me to do this bit. I think I am going to need to uh spy on subscriptions, create.

A

A

I'm going for it. How do I do that again, spy on? Thank you, okay! All right! Thank you. I was completely blanking.

A

Subscriptions create great.

C

A

Cool so when I call requests with oh here's, an operation that takes oh yeah, query variable software, okay, and uh we could just create a little query here unless there's a more sophisticated way to create query. um But I'm just gonna create a little a silly query.

A

I know I don't think that's.

D

What they look like.

A

But that's what they're going to look like here.

A

I don't think that's what that looks like I'm just guessing.

B

What does uh graphql print actually do?

B

Graphql if you go back yep yeah, it's like graphql printing. So I'm wondering whether the query is actually a pause, javascript object of a query and operation.

A

Oh yeah, oh I don't know what prince does that's a good question.

A

Oh yeah, it takes an asp, node and returns as a string good. I yeah so we'll just give it the lovely, abstract, syntax tree, that's empty um and we'll see what happens. Print will probably blow up and we'll we can. We can end up. Maybe we could just import a query here to use um that would be interesting too. uh All right we're going to create a subscription. I really just want to get my feedback loop going.

A

So I'm going to create um my cable link and I am going to do my act, which is request.

A

And we are passing a operation. I called this query, but that was wrong. I'm creating an operation.

A

Okay, great- and I would expect cable subscriptions- create to have been called.

C

uh Oh is this: is this order stuff man that.

A

Always gets me: okay, all right.

A

I do need some navigation, I'm I'm just flying blind right.

A

Now all right um something blew up, which is surprising, uh because I really thought it would be called. Oh well, it's not called because our observer.

A

Is doing its thing asynchronously and it's not going to run until I subscribe to it.

D

Yes, uh any observable.

C

D

Not working until you're not subscribed, yes,.

A

So correct me: if I'm wrong italia, because I haven't I haven't- I haven't delved in the rx magic in a while, but there is- and this isn't rx but the principles apply. There's hot observables. That would run this right away and you're subscribing to there's a single thing. That's triggering things and you're all going to try to subscribe. To that. One thing then there's cold observables that are going to be triggered every time. Something subscribes.

B

A

Subscribe to it, let's subscribe to it, I like ips, it's like cut the nonsense. Paul write the test.

A

Let's do it uh so here's our um observable uh and um yeah, let's subscribe to it, and- and I have some thoughts diving in my head of how we can make it more um complex, but I won't do that yet so we're gonna subscribe to it and I'm gonna pass a done callback because we're not gonna be done until all this stuff is done.

B

And would be, it would be so cool if, if jess had like a way to not need, you know like we had the nice async await and would be cool if there's like a wave of observables to basically write sync style tests with the observable stuff.

A

Yes, and and and and rx, does these kind of patterns like like you could do they have a lot of cool helpers for just and that's one of the cool things about observable abstractions is, is uh it's a nice abstraction and um I think we can a promise can also kind of you can't translate an observable to a promise and we could make that make our tests a little bit more readable. It's.

B

It's fine. It's fine.

A

B

A

It's cool talking about it. I don't know.

B

The js link stuff uh does the same thing. So, okay, there you go.

A

Well, we're getting um what I don't know about, because this is an rx do I have to pass like an object here that has next error and, like all the different callbacks, or do I pass okay? Yes,.

D

I think, in this case, unlike rxjs, that does this for us, we need to specify the observer explicitly so yeah next error and complete. Oh.

A

You have to do all of them.

D

uh I'm not sure.

F

I just I'm just guessing well, let's, let's create a cool little helper.

A

For that, let's create.

B

Do we want to check if you need it first before we.

C

Go fine, that's good too yeah. Keep keep me. Keep keep me.

G

On the straight and.

C

G

Startup js link spec um just passes a callback to subscribe directly without sort of next uh on error and so on, which.

C

G

Yeah, it's just it's just a call back with a single argument called result. I don't know if that's just a shorthand way of doing an object with next I'm going to look at the.

B

But, to be honest, like in our setup link function there we're using apollo link from so maybe apollo link from does some magic tying things together. That then work with the result. Thingy.

D

If we compare with rxjs from, is actually an operator doing this, like from array from event from whatever, but let's let's check.

G

Let's see where's this from you were talking about lucas.

B

uh If you're, looking in in the apollo startup js link, spec line.

A

58., I don't need.

G

Yeah, I guess apollo link dot from basically, it looks like it sort of uh composes a series of links.

A

uh Oh yeah, so this thing blew up because it's not a yes. um How does anyone know? I can get one of those sweet ast nodes.

G

If you, if you do, we probably want to do a graphql tag like we can, um where is it called the cql tag.

D

G

Yeah, let's do that and then pass it a string and then I think that gets compiled to an ast for us.

D

Import gtl from graphql tag poll.

A

D

No, no, it's not not named. It's default, import gql from graphql tag.

A

Oh from graphql tag, ooh, okay, okay, and so then I give it a a graphql query here.

G

Yeah gql, uh so, rather than brackets, it's backticks use.

D

It as a template or poll so just without uh brackets, just backticks.

A

Oh god, I gotta.

A

Like that, or does it go the other way around.

D

No, no! No! No! No.

A

D

It was fine, oh.

A

Okay, all right yeah, all right. Okay, let's do it is it.

D

You need you need a word query as a first one, yeah.

G

And here we write what we'd normally write in our qr file.

A

The syntax was like okay, I get it, it's actually doing it. Okay, that's cool! So I'm gonna query, oh wait, but I'm in a all right, yeah, I'm tripping right now, but that's okay. uh I forgot what graphql things look like. So I'm just gonna look at one: uh okay, we're gonna, call it cory!

A

Fu and we're gonna look up project.

A

Sure- and I don't have to be explicit about it- yay yay all right. That's fine! All right! That's not a good query, but and it won't work, but that's fine.

A

A

Expected dollar found.

D

Remove brackets, you don't you're, not passing any variables.

E

A

E

Prettier you rock.

A

uh Yeah, it's probably prettier running on save I don't know, I don't know, what's happening.

G

What a great ooh lucas! That was! Really nice musical.

A

Cool, so one one thing to know too is like you know: observables, don't do their thing on asynchronously, it's just on subscribe, so all I had to do was subscribe and then I can assert this thing was called, but now I'm curious. What was it called with? uh We were called with a couple of things.

A

um And simulating this one is going to be interesting, um but I'd also like to know hey that we did unsubscribe to this thing. uh uh That sounds like an easy test to do too, but I'm just gonna write um uh a to-do.

B

um I mean: does it make sense to mock the action cable here or to have this a bit more integration and actually have the action cable deliver us some data.

A

Yeah and that's that's, that's what I'm not entirely sure about the how to do that with action. Cable um and I love to explore it uh or we could be very unit testy about it.

C

Which where's everybody out.

B

I'm at leipzig, germany, um but oh okay,.

A

I heard it's nice there.

B

Yes, we lost nico, I don't know I'm I I'm not a you know. The question is like the unit tests are fine right, like hey whatever, and I think to be honest, like the simplicity of this interface, I would just be like hey, let's, let's check those three cases that we basically have here in between line 19 and 30 right like if I would mock the cable subscription that gets created. That's what I'm trying to say.

A

You would mock this thing that we return or or like, and then manually call this thing.

B

So, basically, I would implement something that works like whatever cable subscriptions create. I assume it returns a subscription. I would basically implement a subscription. You know a mock subscription which we then can trigger receive on or, however, this works right that this callback gets executed. It's a callback. Is it a callback yeah? It's a callback.

A

Right so yeah, and- and so but what's interesting, is like that's actually not necessarily part of what's returned like we would want to spy on what work we'd spy capture that argument that we got called with and then we would manually call whatever we got called with here and that's fine. There is a way and there's a more preferable way of doing it if, if we knew and and I and I don't and we could dive into it as well- and I'm happy doing that, but if we knew oh this is this kind of object.

A

Here's how you can trigger that being called through uh this, this rails, cable stuff, um but I but maybe that's not as intuitive and so.

C

A

But uh we've got five heads uh that that are in the navigator seat um so and the silence is very realistic. No.

B

I I was I was I was, I was wondering so, if can you can you have a quick look into the implementation, what the actual cable consumer? Actually, yes,.

A

B

G

A

G

A

Send I was just looking at that right now it's going to zoom chat, but does it doesn't? Does it look like this.

G

I mean probably yes, well, okay, that's the transformed version. I guess.

A

Right um but yeah, so so we can look at you know hey when we, where do we get um subscriptions, here's our subscriptions, the prototype, that's doing create we're creating a subscription, we're adding it great, uh and so, where are we actually triggering these things?

A

um It looks like there's over here where we do um notify uh might be where we're actually triggering them. So I can see what's calling notify- and this is my very naive I've- I don't really know exactly what's going on, uh but I'm kind of reverse engineering. What's going on.

A

Here so it looks like connection gets.

A

Events and it can receive messages.

B

So we are listening on received basically right. That's the function that we're passing.

B

Received I mean some: someone must do something with the callback at some point.

A

Yeah, I think I think action cable's doing something uh for sure, um and we can also just start using it and start resolving errors.

B

Yes, so apparently it you know triggers like events, so it looks at all it looks at you know. The subscriptions is basically a list of subscriptions huh and then you know basically all of them get notified with the stuff that came from the back end, so subscriptions notify what the heck.

A

Yeah, and so I think um here, let's look for events.

A

Yes, yes, yes, yes! Yes, yes, so it's attaching to the websocket that it creates on a message that we get based on what type our message might be, we're going to notify our subscriptions. So it looks like yes, we could use action, cable directly and set up some sort of web socket thing.

B

No, that sounds too complicated, uh because the thing that we've basically creating a subscription and the subscription is added to an internal array right and then later on, the connection send something to the active subscription. So I don't know in this compile file where you are. But if you, if you have a look here, oh yeah in this.

A

uh At this file did we send something in a chat.

B

A

B

Check it out yeah, it's always bad when you screen share right, like if you scroll really down like there's, this notify notify function, right, yep and so what the notified sorry yep, what the notify does in line. 80 is like it just iterates over all the subscriptions and if there is a callback name right in our case, the callback name is received that matches the callback. It just sends uh executes that function with the argument- and I.

A

Think using notify would be cool um yeah and that way we don't have to do some fancy spy like and capturing what we did it we can. We could be a little bit more closely tied to this. What I would be concerned about is like if this isn't and there's nothing indicating this. So that's why I feel fine, but if this wasn't like a public module of this package, we're consuming like we don't want to access internals here uh too much.

A

uh We only want to interface with its api, but I think this would be fine. Does anyone else have any other feelings or thoughts about it? Does the.

D

Problem, I'm just checking the tests of the action cable subscription itself because of course they do have it like a unit test, and I see that they create a fake websocket there. Still, I'm not sure we should repeat this, I'm just saying they do this. I can post a link.

A

Yeah, I think that would be the ideal like. Let's try to test it as it would look like in that environment.

B

It's a bit integration testy to me like, if you ask.

C

B

Because you know having the, then, why didn't.

G

I put it in a folder called unit. Is that a problem, though, having making this a big unit, uh integration testy? Because it means that we don't need to worry about the internals about, like you, know, consumers and subscriptions, and so on and we'd have more. But.

B

But then we suddenly need to uh worry about how uh the action cable consumes web sockets and what they do with them right, because if that ever changes and the rails api changes- and you know, uh then suddenly- we would need to adjust our front end. But if the javascript api, that we're consuming doesn't change with the notify and so on, you know it could, I don't know, use you know pigeons for transport and not web sockets yeah.

D

That's that's, follow luca's idea. I really like it better.

A

On the other hand, the trade-off is, um and we could we can stop talking about it, but if they did change something um and we migrated to that, our tests should still pass. We wouldn't have to rewrite them. When we do very unit testy, our tests become a little bit more brittle like so.

A

That's why, like you know, hey yeah testing it from that perspective, can be nice because that's how it's actually going to be used and we're just concerned about actually uh that that o of it from that perspective, but I don't- I think that would be nice, but the level of effort, because this is new, especially new territory and domain for for for me to explore- may not be worth it right now.

A

uh That's that's where I'm at, uh but that's just me, but I am gonna call notify uh unless someone someone stops me- uh and I would highly recommend doing that at some point um cool, so we created a subscription, but I really want to see what were we created with, because we passed a couple of parameters in there, um but let me do uh um on. Let me create this to do for on subscription notify um what happens, because that's gonna be important. uh Okay, oh man. We got this.

A

This is that a random nonce yeah, that's coming from the.

G

Implementation.

D

It's unique idea: awesome.

A

We're just gonna we're just gonna. Look over that one.

A

E

A

What'd, you say.

E

A nice expect annie.

A

Yeah, oh, that's right! That's right! Yeah! Let's see that any string, can you do it like that? Yep cool, oh yeah, look at this cool thing that I sent uh yeah uh and we're gonna. It's our operation! I'll! Just put that in here.

A

um And it is the same operation name.

B

You can see that the operation is already stringified right, so yeah cool.

A

Okay and then yeah the query, though we called graphql print on it, so I'm just gonna do that.

A

um But if someone has a better idea.

B

A

It cool okay, and then we got this thing where we have received was a function.

A

All right, that's as good as it gets: okay, cool, um but now we're concerned about this bit and that sounds cool. So.

B

So I wonder, how would you now testing wise hook into the uh gs? Would you now mock out the sub subscription create, or how do you get access to the sub the stuff that's returned from subscription create.

B

We can do it because you want, you want to call notify on the cable subscriptions right.

A

Yeah, I think we can call cable subscriptions, notify and then yes that I'm assuming hits received so well- hopefully that's the case and then we can. We can look at what happens with our um observer that we passed to all of this, so it should work out. uh But I'm gonna add a nice little console log here, saying: hey, I'm hit.

A

Okay, let's check it out, so um I I feel like there's an opportunity to put some things in a before each, uh but I'm not gonna worry about it. um Actually, uh I kind of really want to now.

B

Let's worry about it later: okay, copy paste, driven development come on.

C

Okay, you're the navigator.

B

C

B

If the other person doesn't cry right, like.

A

That's good uh yeah, so this is all the same.

B

C

B

Want the mock on next, though, right.

A

I think I kind of really do um so we'll see I'm gonna leave it. I think I do uh oh gosh. Look at that. How look how look how silly I was.

C

A

C

A

Okay, so cables subscribe yeah. So now the act is gonna, be um yeah. Cable subscriptions, notify whoa, that's not the right thing um notify subscription and if it's this.

B

Would be graphql channel assume you think so? Yes,.

A

I at least assume so cool call back name, maybe.

A

Where to see you thieved, okay, okay, uh we're just gonna pass silly to it. Let's see what happens uh yeah so now. I would expect on next to happen. That would be the next thing, um but I'm not surprised it's just blowing up and I wasn't hit. um We could debug this and dive into it.

B

Let's subscriptions s identifier, so it looks. What is the identifier if you look at find all it filters by the identifier and the question is like what is the when we create it identifier, yep, you bring up a good question.

A

B

Could this be the nonce.

A

So this is and well if it is.

B

D

A

That they're using nonce in a way that's confusing, um no identify.

C

A

It's that doesn't seem like an identifier to me, especially because you can have what were you saying mikko.

E

Best action algorithm ever made about string.

A

Especially because you know it shouldn't.

B

Be happy that rails people write front end code, don't bash them. It's pretty good.

A

Though you know it's I like like it's quite you know this is. I was able to navigate pretty nicely like as far as front end code goes. Maybe this: maybe the fact that this isn't super sophisticated is actually kind of nice, but but yeah, that's that's a little wild, um and so I wonder if uh I guess we can get the identifier from what we pass here. Maybe.

G

Let's see the params it looks like is simply either the channel, which is the channel name, pass to create, um or it's an object with the channel in it. So if you go to yeah.

B

We should we go to the um should we just go into the compiled source code, that is on paul's machine and add a console log into the identifier to know what it's logging sure you guys feel free to come over and do that yeah. Let's do.

A

It um yeah so I'm here and I hit subscribe subscription.

B

ah There must be like subscriptions so yeah send perform this identifier. I saw it, I saw it. Oh you found it, you saw it yes line 343.

A

Oh you rock okay, great, I was gonna, keep moving all right. We are in action, cable and here's our params uh we're in more than just action. Cable, we're an action, cable subscription.

A

Yeah and it has the nonce- hence it's an identifier, um okay and that's actually not we can. We can capture this still and that's fine, um so I'm gonna create a nice little function. um Could we just change the identifier of.

B

The subscription in the test.

A

uh Well, we could, but this isn't going to be that bad and maybe maybe you guys will just hate it, but I don't know I'm going to say get subscription identifier.

A

And we can look at the last call to cable subscription.

B

um We have an alternative instead of notify. We could just call notify all and it will get the thing they have a notify all method. Let's do that instead.

A

So you do notify all we all. Yes, it's silly and the parameters.

B

B

A

um Oh gosh, I'm realizing we're leaving some side effects.

B

Yeah we need to clean up after our subscription. That's cool.

A

That's great! um Well let me let me leave this one. I meant to clear out the other one, um okay yeah. So how can I get rid of my? I guess. I need to hit unsubscribe on every one that I've created here. um Every observable that I've created I should on. I should unsubscribe um and that's all that sounds like you should put it in after each right. That's what I'm thinking! That's what I'm thinking um you can move observable to be a global thingy.

A

Do you mean like a shared variable yeah, you will have only one right, yeah you can. Let's do that um yeah. Let's do that.

C

uh Yeah, okay,.

A

Observable dot, unsubscribe and that's great. I don't even need this one, because now we're actually going to be unsubscribing it I don't know we wouldn't actually have tested that it's unsubscribe I'll, leave it, but anyways, that's great! um So now I'll create a nice little uh create.

A

A

I was gonna. Do this? Yes, yes, let's just do this.

A

If I've already created an observable, you've done this wrong.

A

If I've already created observable, uh cannot create or observable already exists.

A

Okay, so now we go here boom observable equals cable link, request uh we'll pass in the operation.

A

Oh, I don't have the cable link. Yes, I'm adding that to here too, because we don't have any other parameters for this thing. So let's just do that.

C

A

Cool, we got that all right and here we're going to.

A

Request from our operation um great- and here we're going to do the same thing.

A

Great, let's see what happens.

B

ah It's nice, the unsubscribe is not it's it's funny. I don't know if you even have access to the unsubscribe, because it's returning an observable which is returning a thing. So I think you know.

A

You're totally.

B

Right, I did this totally wrong. You don't unsubscribe.

A

From observables you unsubscribe from subscriptions and uh that's what this is.

B

Yeah, so I think you need to subscribe to the observable and that will return you the object with the unsubscribers.

A

Yes, you're, so right? Yes! Yes! Yes! Yes! Yes! Yes! Yes! Yes! Thank you you're! So right uh man, this! This is. This is why I'm I'm glad we're pairing, uh I'm glad you're here ip.

B

I think nico wanted to say the same thing. I was just louder. No okay,.

A

So this is really gonna have a.

A

Subscription, yes, so let me.

B

Why don't you leave the observable for now at the top and add a.

E

Subscription, maybe I.

A

Maybe I I might be, I might need to do that, but uh uh we'll we will see. uh Let me let me do this first. Yes,.

G

A

B

By the way, I wonder in real life, when those are going to clean, be cleaned up, will they be cleaned up automatically? What do you mean?

B

Because if I'm looking at the actual code line, 27 of the action cable link.

B

I'm a bit confused because the to me it seems like the. If no data is there anymore, we don't clean up the subscription, so it feels like we could end up with a stuff that we don't clean up and it stays in memory right.

A

um I I was not listening to you the last minute. I'm sorry, no.

B

It's it's fine. I can repeat myself um so in the action cable link line, 27 yeah well,.

G

C

B

Wait, do you mean this one? Yes, so you know we. If no data this to me seems like hey the subscription is over we're not sending any data anymore on that graphql subscription query right. That's when you are completely observable, but we don't clean up the subscription in that case. So you know if you create a bunch of subscriptions on one page uh and even if their subscriptions are closed at some point um you you will basically retain the cable subscription stuff in memory right. This is a really great idea, so.

A

I think we should create a test for um subscription.

B

Cleans up after itself, or something like that.

A

Yep, when, uh when is this, is this a desirable.

E

Behavior, you may not want to keep the subscription open to reopen the channel if needed. That's why they don't do.

B

It that's the question, isn't the question that we probably need to ask right like.

B

I don't know this is where maybe natalia, how do you know how this works like when.

D

What is go, what is going on complete uncomplete only means that no data will be delivered to subscribers anymore, even if they exist. At this moment uh they will receive no data, but this doesn't mean.

A

Unsubscription, do we need to clean up? Do you think we should use? Do we need to clean up? Because we've created a uh side effect here, and this is only getting clean up when we unsubscribe so should we clean it up on complete, probably.

D

I'm not sure because usually when observers are created, unsubscribe is not called incomplete.

B

Right this is not the ops observer unsubscribe, but this is the unsubscribe of the web. The subscription.

A

B

Okay, yeah, I mean, I think the question would be. Is there any case at some point where this should be cleaned up like I.

A

Think so, and that's a really really good point, because yeah this, if we just keep creating subscriptions.

E

And actually they should be cleaned up when you're, for example, amount the component that's doing the subscription or when you're really really done. I think there are two different things: stopping receiving data and closing the link.

E

At least no, I don't have experience with apollo, but in the past we will talk that it's common to stop listening for a moment and then start listening again, and you do this with a subscription that you already have.

A

Right and that's what um okay, I don't know if you could do that with rx observables. I think I think once you unsubscribe, I don't think you can re-subscribe. I think well.

D

You can always get.

A

D

Yes, with some tricks, you can resubscribe to the existing one, but in general no.

B

Okay, but backtracking here and I'm trying to keep this simple. Let's imagine we have one view app and the one view app contains both issues or maybe we have one view app at some point where you can go from one issue to another and you stay in the same view app right.

B

um So if I'm switching, you know and I'm subscribing to a chinese of issue number one, I'm navigating to issue number two, I'm now subscribing to the sines of issue number two, but we currently don't have anything that automatically like cleans up this first subscription, so you will still get stuff via web sockets.

B

Even if you navigate it away- or this thing is not seen anymore.

A

Right, I think the thing to keep in to keep in mind is like we're the we're, the ones that have created this resource and usually anything that's created. A thing should also destroy the thing and the only place that we destroy. It is here and unsubscribe, but there's only.

D

Do it manually.

A

Yeah that only gets triggered if you manually unsubscribe, not if we're just done. What is a good question would be: does cable action, cable underlying subscription thing when we don't receive any more data? Does it know I can be done now? That would be a good question to ask and if it doesn't, I think it makes a lot of sense to say we're done now and we're gonna be really done like I think that makes a lot of sense. um I mean I have no idea how this works right.

A

So I wonder, like does observer completely get called, and it's a really good thing- we're not overly mocking things out, because I think we can actually test this, um uh probably in a later a later period, but.

G

So I was just taking a look at the implementation in apollo link upstream and their uh websockets transport uh is written in a very similar way, so they are on line 210 in the file that I linked there in uh zooming chat.

G

They don't do anything when the observer uh completes uh they just return uh and unsubscribe. So I think I have a feeling that the unsubscription is just sort of handled by apollo automatically somehow, um unless they do, they do have this execute operation, which could be something else.

A

And I think we can actually keep. I think we can. We can observe this too. So it's a good thing to be aware of, and I think we can- we could check it out as well and see if unsubscribing would help or not um thanks mark all right here we go uh boom.

A

We got our on next uh great. So now, let's check out, um if there's an error.

A

On subscription notify with error.

B

Oops and we should have like multiple uh thingies as well right, like multi, like sending data multiple times, because that's the whole purpose of the websocket itself right sure.

A

Yeah, we can do it, let's do it here. uh I think it's called auroras as well. Sorry, I think you're totally right errors.

D

I was also checking view apollo implementation in the meantime, because we mean to use subscriptions with view apollo, and it seemed that they automatically unsubscribe when the component contained subscription is destroyed, like this happens with many things in view just in case.

B

Cool, so we don't need to.

D

I mean if we use view apollo. Yes, if we're using apollo client itself or like if pure polo client is used, then we need to manually unsubscribe in destroyed hook. I mean in react, I saw examples with component did unmount and they were calling unsubscribing the subscription there.

B

I just wonder if it makes sense, then to have a help or, to kind of you know clean up all the things.

A

Yeah, um so this this double, this double call didn't didn't do what I thought it would do. um So that's interesting.

A

uh So you see, we did note, we notified.

E

Twice, yes, and then only.

A

It's not easy not to fail.

E

Synchronous method, or does it have a device.

A

I think it's actually all synchronous um is there.

E

A balance inside.

A

It might not be um when I don't know what to wait for just wait.

C

C

A

I'm gonna have to uh speaking of the bounce. I'm gonna have to bounce in a little bit. Yes, um and I will uh create a new branch and push this up and mention it in that, mr and mention all of the uh the lovely navigators I had to.

A

A

uh Yeah this this isn't doing what we think. It's doing, uh I don't know that's a thing to solve so yeah. That's fine!.

C

Why are you not working okay,.

A

All right cool: well, hey thanks! Thanks everyone for hopping on and being flexible. um Let me uh struggle through this a little bit. um I will commit this and push it to a new branch and ping on that. Mr, so thanks, everybody cool sounds great.

E