No comments
77 | }
78 |
79 | // Per above, individual comments may suspend while images load. Using
94 |
109 |
100 | {comment.author?.login}
101 |
102 |
103 |
108 |
54 |
78 | )
79 | }
80 |
--------------------------------------------------------------------------------
/issue-tracker/src/IssueListItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { useFragment } from 'react-relay/hooks'
3 | import graphql from 'babel-plugin-relay/macro'
4 |
5 | import Link from './routing/Link'
6 |
7 | import { IssueListItem_issue$key } from './__generated__/IssueListItem_issue.graphql'
8 |
9 | interface Props {
10 | issue: IssueListItem_issue$key
11 | }
12 |
13 | /**
14 | * Renders a single item (issue) in the issues list.
15 | */
16 | export default function IssueListItem(props: Props) {
17 | // Given a reference to a specific issue - props.issue - define *what*
18 | // data the component needs about the issue in order to render it.
19 | // Note that Relay will only give the component access to the exact fields
20 | // defined in the fragment. Relay will also subscribe for updates to just
21 | // those fields, updating the component if the values change due to a mutation
22 | // or the data being refetched.
23 | const issue = useFragment(
24 | graphql`
25 | fragment IssueListItem_issue on Issue {
26 | id
27 | title
28 | }
29 | `,
30 | props.issue,
31 | )
32 |
33 | // Describe how to render the data:
34 | return {issue.title}
35 | }
36 |
--------------------------------------------------------------------------------
/issue-tracker/src/Issues.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react'
2 | import { usePaginationFragment } from 'react-relay/hooks'
3 | import graphql from 'babel-plugin-relay/macro'
4 |
5 | import IssueListItem from './IssueListItem'
6 |
7 | import { Issues_repository$key } from './__generated__/Issues_repository.graphql'
8 |
9 | interface Props {
10 | repository: Issues_repository$key
11 | }
12 |
13 | /**
14 | * Renders a list of issues for a given repository.
15 | */
16 | export default function Issues(props: Props) {
17 | // Given a reference to a repository in props.repository, defines *what*
18 | // data the component needs about that repository. In this case we fetch
19 | // the list of issues starting at a given cursor (initially null to start
20 | // at the beginning of the issues list). See the usePaginationFragment()
21 | // docs: https://relay.dev/docs/en/experimental/api-reference#usepaginationfragment
22 | // for more details about how to use this hook to paginate over lists.
23 | const { data, loadNext, isLoadingNext } = usePaginationFragment(
24 | graphql`
25 | fragment Issues_repository on Repository
26 | @argumentDefinitions(
27 | cursor: { type: "String" }
28 | count: { type: "Int", defaultValue: 10 }
29 | states: { type: "[IssueState!]", defaultValue: ["OPEN"] }
30 | )
31 | @refetchable(queryName: "IssuesPaginationQuery") {
32 | issues(after: $cursor, first: $count, states: $states)
33 | @connection(key: "Issues_issues") {
34 | edges {
35 | __id
36 | node {
37 | # Compose the data dependencies of child components
38 | # by spreading their fragments:
39 | ...IssueListItem_issue
40 | }
41 | }
42 | }
43 | }
44 | `,
45 | props.repository,
46 | )
47 |
48 | // Callback to paginate the issues list
49 | const loadMore = useCallback(() => {
50 | // Don't fetch again if we're already loading the next page
51 | if (isLoadingNext) return
52 | loadNext(10)
53 | }, [isLoadingNext, loadNext])
54 |
55 | return (
56 |
55 | #{issue.number} - {issue.title} - {issue.closed ? 'Closed' : 'Open'}
56 |
61 | View on Github
62 |
63 |
64 |
65 |
75 | {issue.author?.login}
71 |
72 |
74 |
57 | {data?.issues.edges?.map(edge => {
58 | if (edge == null || edge.node == null) return null
59 |
60 | return (
61 |
76 | )
77 | }
78 |
--------------------------------------------------------------------------------
/issue-tracker/src/JSResource.ts:
--------------------------------------------------------------------------------
1 | declare const UniqueId: string
2 | type Loader = () => Promise
62 | {/* Note how we also spread IssuesListItem's fragment above */}
63 |
65 | )
66 | })}
67 |
75 |
37 |
38 | {repository!.owner.login}/{repository!.name}: Issues
39 |
40 |
41 | {/* Wrap the child in a Suspense boundary to allow rendering the
42 | layout even if the main content isn't ready */}
43 | {props.children}
44 |
45 |
46 | )
47 | }
48 |
49 | export default Root
50 |
--------------------------------------------------------------------------------
/issue-tracker/src/SuspenseImage.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import JSResource from './JSResource'
3 |
4 | type Props = React.DetailedHTMLProps<
5 | React.ImgHTMLAttributesLoading pending...
105 | ) : null}
106 | {routeComponent}
107 | <%= name %>
<% if (typeof examples !== 'undefined') { %> <% examples.forEach(function (example) { %><%= example.name %>
<% if (!location.href.match(example.url + '/')) { %> \" href=\"<%= example.url %>\">Demo, <% } if (example.type === 'backend') { %>\"><% } else { %>\"><% } %>Source <% }); %> <% } %><% if (typeof link_groups !== 'undefined') { %><%= description %>
<% link_groups.forEach(function (link_group) { %>
<%= link_group.heading %>
- <% link_group.links.forEach(function (link) { %>
- \"><%= link.name %> <% }); %>
103 |
109 |
110 |
111 |
112 | {isEditing && renderTextInput()}
113 |
50 |
51 |
52 |
60 |
63 |
73 |
74 | )
75 | }
76 |
77 | export default TodoApp
78 |
--------------------------------------------------------------------------------
/todo/ts/components/TodoList.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * This file provided by Facebook is for non-commercial testing and evaluation
3 | * purposes only. Facebook reserves all rights not expressly granted.
4 | *
5 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
6 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
7 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
8 | * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
9 | * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
10 | * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | */
12 |
13 | import React, { ChangeEvent } from "react"
14 | import { graphql, useFragment, useRelayEnvironment } from "react-relay/hooks"
15 |
16 | import MarkAllTodosMutation from "../mutations/MarkAllTodosMutation"
17 | import Todo from "./Todo"
18 |
19 | import { TodoList_viewer$key } from "../__relay_artifacts__/TodoList_viewer.graphql"
20 |
21 | interface Props {
22 | viewer: TodoList_viewer$key
23 | }
24 |
25 | const TodoList = (props: Props) => {
26 | const environment = useRelayEnvironment()
27 |
28 | const viewer = useFragment(
29 | graphql`
30 | fragment TodoList_viewer on User {
31 | todos(
32 | first: 2147483647 # max GraphQLInt
33 | ) @connection(key: "TodoList_todos") {
34 | edges {
35 | node {
36 | id
37 | complete
38 | ...Todo_todo
39 | }
40 | }
41 | }
42 | id
43 | totalCount
44 | completedCount
45 | ...Todo_viewer
46 | }
47 | `,
48 | props.viewer,
49 | )
50 |
51 | const numTodos = viewer.totalCount
52 | const numCompletedTodos = viewer.completedCount
53 |
54 | const handleMarkAllChange = (e: ChangeEventtodos
53 |- {renderTodos()}