GitLab Frontend Skillsharing, 16 Aug 2019

Previous Meeting

⏯

youtube image

►

From YouTube: FE Skillsharing: GraphQL feature walkthrough with Natalia Tepluhina

Description

In this video, we review the design versions dropdown feature. https://gitlab.com/gitlab-org/gitlab-ee/issues/9491 The UI part is already implemented, so we're not touching any templates. Instead, we cover the flow of fetching new data from GraphQL endpoint and incorporate them into design management application.

Chapters:
1. Show GraphiQL explorer
2. Integrate the query
3. Using this query in the Vue component
4. Refactor Design dropdown to fetch data from Apollo cache

For more information about FE Skillsharing, see https://gitlab.com/gitlab-org/frontend/skillsharing

A

Okay, so we're going to implement the design version drop down to our design management application, as you can see from the design, it's a simple drop-down list in all the versions we have right now in our app.

A

We have the component already implemented, but it's not working because we don't have versions fetched from the backend to see how we can fetch versions, let's go to our practical interface and check our documentation for grad kill schema currently, as you can see, we're patching on a list of designs which correlates perfectly with what we have on the front-end.

A

Now, let's try to bet versions. As you can see, they are located within project query and you should go to the issue. We have to the design collection and you can see we have a list of designs here and versions as well. I've already created a very simple query for versions: I will just uncomment it here and let's give it a try, as you can see it fetched an array of versions. So we need to add this part of the project query to our front-end.

A

Here you can see the query for the project. It's already created within the design, management application and the version part is commanded: let's uncomment it and check how it will work on the front and side with a couple adapters: I'm, saving this and switching our Paula.

A

Let me just reload a friend and let's what we're fetching from the backend.

A

Yeah my college sucks: let's roll off a console and check Apollo Deftones, one of them.

A

North Face, we can always build the metal and check grab brunch elderly. Let me just refresh the page and.

A

We can see here in the response, will fetch me the portrait where the designs and versions then check Apollo, Wonderland, of course, beatbox, because we're recording, but in fact we had versions right now on our front end and we can use them in the index key component with Ravens and AM to date, the property oil versions and we've gathered all versions.

A

The power Apollo object, so we'll feature not only designs but versions as well in our update hood we're just getting rid of all the edges part and we're saving them to the out versions array, let's filter the Browns of back and let's simply check the. What do we have on our index? As you can see, there is an array of all versions wedged from the back end, and we don't have edges here because we did the transformation.

A

Now, let's see, how do we pass them to our design drop down component? Here we have an upload form where, with as other versions for the top, let's go deeper and here in the upload form. We have this on versions drop down and again we were passing all versions to the fourth and here just rendering them as it dropped down.

A

In fact, it could be done different differently with a breath gel, because we can simply clear in our apollo cash and see what's going on without even additional network requests, let's check out market where it's one more time.

A

As you can see here, we are batching two queries its permission and project. Let's try to move our all versions, query directly to the drop down bone. To do so, I will uncomment these two queries. We just important, where is from gradual files here, I will also command this mixing. In fact, this Nixon is just passing a crop hang on. Let's add Apollo properties here where we will add two queries.

A

First, one will be all versions.

A

But there is an issue, we're using project path and issue a team, and we should fetch it from somewhere. The Institute properties are coming from.

A

Application Clara, this query is fetching project pass and issue ID from our Apollo cache, where the stored from the euro. So let's just copy paste this updatable and ended answer: let's go to the browser and check what's going on here now: errors, as you can see, our problem is still working and let's go to the network tab refresh it.

A

As you can see, additional Network requests, it's still the same director Larry because from the data design drop down from Lawrenceburg from the design Lucian, but the on component, it just fetching the data from Apollo cash rather already stored by project relative I. Think that's. It.