Getting the list of issues
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)