Getting the list of issues

[00:00 - 00:27] Getting the list of issues. Inside of SRC issues, create a new file, issues, list, TSS, define the query, list issues, equals GQL, and here we want to get the query, list issues with a viewer that will contain issues, first 100, and for each node, we want to get title and URL.

[00:28 - 00:37] Run the code generator to get the types for the new query. After we get the types, import them into the component, and now define the issues list.

[00:38 - 00:45] Expert const, issues list is a component. Here we need to define a ref to be able to focus on our list.

[00:46 - 01:05] const list ref equals use ref will use type any here. Use the query to get the data loading and error states. const loading error and data equals use query, passing the list issues type and list issues query.

[01:06 - 01:22] Now get the issues list, const issues equals data viewer issues nodes, and after we have them, return the layout. We'll render a panel that will render list issues text and the list.

[01:23 - 01:39] Pass the on action handler, it will get an element, and then call open with the URL of the issue matching the element content. So we try to find an issue inside of the issues array where the title equals the element content.

[01:40 - 01:44] And also pass in the items. It is issues map for each issue.

[01:45 - 01:51] We either return issue title or use an empty string. If there are no issues, then we use an empty array.

[01:52 - 01:58] Define a use effect that will focus on list ref every time that data changes. Define an early return for the loading state.

[01:59 - 02:07] Here we render a panel with a loading text and an early return for an error state. Here we render a JSON representation of the error.

[02:08 - 02:14] Open issues.tsx, remove the issues list mock, and import the real issues list. Launch the app.

[02:15 - 02:20] You should be able to list the issues and the app should show the list of issues to you.