Getting the list of repositories

[00:00 - 00:19] Getting the list of repositories. In this section we'll define a component that will render the list of repositories. Inside of SRC, repositories, create a new file, repositories, list, TSX. Define the GraphQL query, const, list, repositories equals GQL.

[00:20 - 00:36] Here we define a query, list, repositories, where we want to get the viewer, repositories, we want to limit it by first 100. With nodes, and for each node we want to get name and URL. Define the repository's list component.

[00:37 - 01:06] Expert, const, repositories, list equals a function. Here you want to generate the types for our query. Run Apollo code generate. After it's done, get the loading, error, and data using the use query from type list repositories imported from the generated types and passing the query, list , repository.

[01:07 - 01:35] Now get the repos list from the data, const, repos equals data, viewer, repositories, nodes. As you can see we are traversing the structure from the query. Viewer repositories nodes, and then we'll get the list of nodes of repositories . Then let's handle the loading state. If loading return a panel with height 10 pixels top 25% left center.

[01:36 - 02:07] Inside of it will render text saying loading. The left property of the text should also be center. After the loading state let's handle the error. If error return a fragment saying error. And here we stringify the error JSON stringify error. If everything is fine we return a panel with text inside and the text should be a list repositories.

[02:08 - 02:53] Now we'll render a list top two. We'll add an offset and then on action. This is where we process triggering the elements in the list. We'll get an element and we want to open repos find repo where repo name matches the element content . We get the URL from there or use an empty string. So what we do here, if the user presses enter when one of the elements is selected or clicks on the list element, we will try to find a repo with the same name as the element content and then open the URL of this element.

[02:54 - 03:23] So we pass the items equals repos map for each repo. We want repo name or empty string as a fallback. And if there are none where another fallback an empty array. We have a reference to this list to focus it immediately after we mount the repository's list component. Defining your ref list ref equals use ref for now we'll use type any and pass it as a ref to list element.

[03:24 - 03:57] We don't need those empty lines. Now add a use effect that will trigger focus on the list ref element use effect. Here we define our side effect. We pass an array containing data. So every time the data changes and rerun the list, we want to focus on it. List ref current focus. Now go to repositories TSX remove the repositories list from here import repositories list from repositories list from repositories list.

[03:58 - 04:24] Run the application to make sure it works. Yarn start repositories list repositories. Here you might get a data merge error. To fix it, we'll set the merge strategy for the user model. Open client provider in the SRC auth folder. Define cache const cache equals new in memory cache type policies user merge.

[04:25 - 04:50] Here we define the merge policy for the user model. This way when we fetch the data from GitHub Apollo will try to merge the user data instead of overriding it. Add our cache policy to the Apollo client. Launch that up again. Go to repositories. Try to list the repositories. And it should work now.