Magento PWA Studio, 6 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PWA Studio Community Meeting December 6th, 2019

Description

Replacing REST with GraphQL, new SSR documentation and tutorials

A

B

You know: what's nice, it's nice to know that not all our meetings are being recorded unless this is what they watch now.

C

You just under Corbett's. Sorry sorry, don't worry about it. Please continue. Anyways get user details async day fetching, so this required a few things on our ends. So you'll see that previously this action is being called from the use navigation Tallinn it had no properties. So one of the things we have to do now is kind of tell it how it's going to fetch its data. So we're kind of calling this like query and poker.

C

But there's the API for Apollo kind of using hooks to execute queries is a little inconsistent. So mutations return, you a promise. Use query, execute the query immediately. So not something we would need use. Lazy query unfortunately, does give you a query invoker, but it's it doesn't return you a promise, so we decided to create a simple utility that kind of just wraps query execution in a callback and then Apollo, kyla client, query returns a promise. So we can kind of have this consistent API for executing queries in Redux actions.

C

So there's documentation here on why we created this. It does look like Apollo will. Probably change used lazy query to return a promise, a future release, so this utility should not be needed anymore, but until then this is kind of how we solved that problem. Are they not going.

B

To expose observable query anymore, sorry, any of Apollo being that it may yield multiple times as returning promise. It returns an object, fire, offense or something, but I think they were arguing.

B

C

Not something you read about, it's not perfect! ah No in the scope of this we're really just looking to gun rest at graph QL make the reef factors as simple as possible, and then we kind of have this expectation that, after we do all this work and rest is gone, that we will probably want to make this a lot easier. Like it's not great that this has to be a dependency, it would be nice if, like you, could pre-configure Peregrine's with the queries that actions need to run. So you don't have to pass every time.

C

You call it, but it's kind of just an intermediate step and to an idle state, and then the usage you'll see here is in the Talon. One of the new props. Now is customer query just navigation, our get customer queries here. We pass it to the talent and then the talent is what actually executes that effects to fetch that data. So it just uses that new hook with the query passes it to the action and that's all you have to do so.

C

We are very much looking for feedback, I guess in this pattern and we've kind of already established some pitfalls that are gonna happen. We have some actions that call other actions. So that means if, if that action needs to execute a query, that's now like a dependency tree that you need to establish.

C

So even they touch on this morn is stuff, but this is going to be like an easy way to give us get us off rest and hopefully, to a better state using graph QL.

B

C

We can start doing fun stuff with observable queries, not worrying about fetching data again, as mutation should automatically up like our cash I. Think once.

D

We get entirely on graph QL, it's gonna be really cool when we can start getting some fun stuff and react.

E

Suspense, it's really what we're really! Yes,.

C

Yeah, that's I, guess another big reason. We didn't try to over engineer a crazy solution here, because exactly yeah once suspense drops in concurrent load data fetching is going to be a different game.

F

It might not help us in certain areas, though, some.

B

F

Things that some of the problems we were running into was sort of that state dependencies between actions. That's.

B

F

Gonna be solved by necessarily.

C

Yeah yeah, we were having like an internal debate about we. We know users prefer kind of failsafe actions so like if I go to add an item to a cart. My cart doesn't exist. Great, a cart like don't just return an error message and make them click the button again to go through some create cart that had item workflow I'm like we're smart enough to great.

F

Assuming what you're trying to do and that sort of is what you were saying about, having to pass like certain things? Have certain actions have dependencies on others? So the the add item, the cart action now in PR you'll see that it has the add item you tation, but it also has to take the create carbocations as well in the function signature to the action, because for that fallback case where, if you try to add the item and for some reason the current cart idea, the state isn't valid. We want to recreate it automatically.

F

For you, though, that's sort of like it looks it kind of feels weird to write that code, but I think that that's just a good indicator for us for an area to improve on later, and this is sort of just an intermediate state of getting us off of rest. That I see arrest.

B

For know what yeah, so so, what people really appreciate, I think from users, is that they don't want to be asked to do something. Don't care about right. You guys are providing the money there and then also for developers. It was, in my view, right on the money to say we should have all of these different methods to try to return the same object because they're all kind of doing the same thing as far as the UI developers concerns they're, getting data that may not be there yet.

B

So, even though, in the future we may end up having a unified interface that does work for all these use cases- and you know, I was like all observables, because those were so good, even though I see that as a potential future right now, it was definitely the right choice to unify these API Zinta processes, which basically everyone understands which are language. That was the right choice. If someone a community disagrees with me,.

G

A

Any any questions any comments from anyone. Why.

F

Again, we're looking for feedback on these there's several in-flight pr's that are ready for a view.

C

Cart should hopefully land in the next couple days and then moving on to checkout, which is going to be a huge.

F

Right now in develop, create comments. Are you merged, so creation of the card come develop will be through craft QL, but all the all the mutations of the items in your cart, adding item that and that sort of thing are still done with rest, but soon those PRS when those cars land, all of the cart will be done and then we get to do checkout.

A

H

I

There we go Boop, so the first topic I want to prevent is the content, rendering.

B

I

Section basically, this is a very broad overview. What content rendering is side, rendering and client-side rendering and how it affects? Seo I, also go into how we do content range to be a studio and what you support, there's a little blurb about how upward does it using the file resolver in the template, resolver and then I go over the current content, rending processes of vineya, which is basically server-side, fast paint and client-side, rendering with react, and certainly not the last word on SSR. We have follow-up work to improve and add more information about.

I

Bugs yeah yeah yeah check it out. This is a good introduction to content mentoring. That is. The second topic is a tutorial, a create tag list component tutorial as a step-by-step on how to create a tag list component Peter based either way. It's a very, very explicit steps, very handy for absolute beginners. It goes over exactly what you need to add into what files provides images and what to expect once you get these get these files running and in the end you get this here.

I

E

When should we expect to see a PR for someone going to making the text look cool like that.

B

So clear: how to do this just saying now they here's the call. What are we like in really strong way?

B

A

B

Really good thank.

A

You Michael sit awesome in the chef I, don't know if he's talking about me or.

A

Definitely for any questions and comments from the community demos from the community.

E

Story but I'm not going to demo it, but just to say that it's working again, so it was in there, but not working on a style guide which overlaps a little bit. But anyway, since we had it in there, we thought it should at least work. So there was a PR that minded.

E

So story was only a handful of stories in there, but we'd.

D

And if you write here at component, C.

C

Be an easy way to validate things during upgrades.

A

Jimmy on the line so.

A

H

Not yet progress continues on style guide, but there's no point demoing it until it's got something really useful for people.

H

Regarding the regarding that story, book PR, one of the quirks of that one is that is that that has been a UI importing some of the glue that we use to actually make the venía app stand up, and so that means that it. That means if any a UI is import from venía concept. When really the dependency direction flows. That venía concept should depend on many a UI, so we're doing that for the story book, but it doesn't mean that you should import anything from vending a concept into there.

H

Maybe you all right just keep that in mind.

A

Great yeah, so it looks like we have no questions for us so onwards and upwards. Don't forget to smash like and subscribe.

A