1export const RepositoriesFragment = graphql`
2  fragment ViewerRepos_repositories on User
3  @argumentDefinitions(
4    first: { type: "Int", defaultValue: 10 }
5    after: { type: "String" }
6    orderBy: {
7      type: "RepositoryOrder"
8      defaultValue: { field: PUSHED_AT, direction: DESC }
9    }
10    isFork: { type: "Boolean", defaultValue: false }
11  )
12  @refetchable(queryName: "RepositoriesPaginationQuery") {
13    repositories(
14      first: $first
15      after: $after
16      orderBy: $orderBy
17      isFork: $isFork
18    ) @connection(key: "Repositories_repositories") {
19      totalCount
20      edges {
21        node {
22          id
23          name
24          nameWithOwner
25          }
26        }
27        pageInfo {
28          endCursor
29          hasNextPage
30          hasPreviousPage
31        }
32        
33    }
34}

1export const REPOSITORIES_QUERY = gql`
2query {
3  viewer {
4    repositories(first: 10) {
5      totalCount
6      edges {
7        node {
8          id
9          name
10          nameWithOwner
11        }
12      }
13              pageInfo {
14          endCursor
15          hasNextPage
16          hasPreviousPage
17        }
18    }
19  }
20}
21`

1import { useQuery, gql } from '@apollo/client';
2
3function Repositories() {
4  // Fetch the first 10 repositories
5  const { loading, error, data, fetchMore } = useQuery(REPOSITORIES_QUERY, {
6    variables: { first: 10 },
7  });
8
9  if (loading) return <p>Loading...</p>;
10  if (error) return <p>Error :(</p>;
11
12  const { edges, pageInfo } = data.viewer.repositories;
13
14  return (
15    <div>
16      <h3>Repositories</h3>
17      <ul>
18        {edges.map(({ node }) => (
19          <li key={node.id}>
20            {node.nameWithOwner}
21          </li>
22        ))}
23      </ul>
24      {pageInfo.hasNextPage && (
25        <button
26          onClick={() =>
27            fetchMore({
28              variables: {
29                first: 10,
30                after: pageInfo.endCursor,
31              },
32            })
33          }
34        >
35          Load more
36        </button>
37      )}
38    </div>
39  )
40}
41

1import { useMutation, gql } from '@apollo/client';
2
3const ADD_REPOSITORY = gql`
4  mutation AddRepository($name: String!) {
5    createRepository(input: { name: $name, visibility: PUBLIC }) {
6      repository {
7        id
8        name
9        nameWithOwner
10      }
11    }
12  }
13`;
14
15function AddRepository() {
16  let input;
17  const [addRepository, { data, loading, error }] = useMutation(ADD_REPOSITORY);
18
19  if (loading) return 'Submitting...';
20  if (error) return `Submission error! ${error.message}`;
21
22  return (
23    <div>
24      <form
25        onSubmit={(e) => {
26          e.preventDefault();
27          addRepository({
28            variables: { name: input.value },
29            update: (cache, { data: { createRepository } }) => {
30              // Read the query for the viewer's repositories
31              const data = cache.readQuery({
32                query: REPOSITORIES_QUERY,
33                variables: { first: 10 },
34              });
35              // Insert the new repository into the cache
36              cache.writeQuery({
37                query: REPOSITORIES_QUERY,
38                variables: { first: 10 },
39                data: {
40                  ...data,
41                  viewer: {
42                    ...data.viewer,
43                    repositories: {
44                      ...data.viewer.repositories,
45                      edges: [
46                        ...data.viewer.repositories.edges,
47                        {
48                          __typename: 'RepositoryEdge',
49                          node: createRepository.repository,
50                        },
51                      ],
52                    },
53                  },
54                },
55              });
56            },
57          });
58          input.value = '';
59        }}
60      >
61        <input
62          ref={(node) => {
63            input = node;
64          }}
65        />
66        <button type="submit">Add Repository</button>
67      </form>
68    </div>
69  );
70}

1  const [commit, isInFlight] = useMutation<AddRepositoryMutation>(ADD_REPOSITORY);

1       const frag_data = usePaginationFragment<Fragment_name$data,any>(SomeFragment, refs);
2      const some_fragment = frag_data.data as Fragment_name$data;
3    

1      const frag_data = usePaginationFragment<MainQuery,Fragment_name$key>(SomeFragment, ref);
2      const some_fragment = frag_data.data
3
4    

1   const frag_data = useFragment<Fragment_name$key>(SomeFragment, ref);
2   const paginated_frag_data = usePaginationFragment<MainQuery,Fragment_name$key>(SomeFragment, ref);

1export const mainQuery = graphql`
2  query MainQuery() {
3    stuff {
4      ...Fragment_name
5    }
6  }
7`;

1  const query = useLazyLoadQuery<MainQuery>(mainQuery)

1export const SomeFragment = graphql`
2  fragment Fragment_name on Stuff {
3  edges {
4    node {
5      id
6      name
7      createdAt
8    }
9  }  
10
11  }
12`

1      const frag_data = usePaginationFragment<MainQuery,Fragment_name$key>(SomeFragment, ref);
2      const some_fragment = frag_data.data

1  refs?: {
2    readonly " $fragmentSpreads": FragmentRefs<
3      | "Fragment_name"
4      | "Fragment_history"
5  >;
6  } | null;

1type OneItem = {
2id
3name 
4createdAt
5}

1type ItemList = OneItem[]
2{items.mao((item) => (
3  <ItemCard key={item.id} item={item} />
4))}
5type ItemCardItem = ItemList[number]
6
7finction ItemCard({ item }:ItemCardItem) {
8  return <div>{item.name}</div>;
9}

1type Items = ReadOnlyArray<ItemList>
2// ❌ not allowed
3type ItemCardItem = ItemList[number]

1type ReadonlyToRegular<T> = T extends ReadonlyArray<infer U> ? Array<U> : never;
2type Items = ReadOnlyArray<ItemList>
3type ItemCardItem = ReadonlyToRegular<ItemList>[number]

1<!-- ❌ -->
2  function SomeList() {
3    const { loading, error, data } = useQuery(SOME_QUERY, {
4      variables: { first: 10 },
5    })
6    return(
7      <Suspense fallback={<div>Loading...</div>}>
8        <div>This is a data fetching component</div>;
9      </Suspense>
10    ) 
11  }
12  

1<!--  ✅ -->
2function ParentComponent() {
3  return(
4    <Suspense fallback={<div>Loading...</div>}>
5      <SomeList />
6      </Suspense>
7
8  )
9  
10}
11  function SomeList() {
12    const { loading, error, data } = useQuery(SOME_QUERY, {
13      variables: { first: 10 },
14    })
15    return(
16        <div>This is a data fetching component</div>;
17    ) 
18  }
19  

1        const [, startTransition] = useTransition();
2        const [keyword, setKeyword] = useState("");
3
4        const { loading, error, data } = useQuery(SOME_QUERY, {
5          variables: { query: keyword, first:19 },
6
7        })
8
9        return(
10          <div>
11            <input value={keyword} 
12            <!-- ❌ will cause flickers
13            onChange={(e) => {
14              setKeyword(e.target.value)
15   
16            }} -->
17            <!-- ✅ -->
18            onChange={(e) => {
19              startTransition(() => {
20              setKeyword(e.target.value)
21              })
22            }}
23            />
24  
25            <Suspense fallback={<div>Loading...</div>}>
26              <SearchResults data={data} />
27            </Suspense>
28          </div>
29        )
30
31      

1export function useDebouncedValue<T = any>(value: T, delay: number) {
2  const [isDebouncing, setIsDebouncing] = useState(false);
3  const [debouncedValue, setDebouncedValue] = useState<T>(value);
4
5  useEffect(() => {
6    setIsDebouncing(true);
7    const timer = setTimeout(() => {
8      setDebouncedValue(value);
9      setIsDebouncing(false);
10    }, delay);
11
12    return () => {
13      clearTimeout(timer);
14    };
15  }, [value, delay]);
16
17  return { debouncedValue, setDebouncedValue,isDebouncing };
18}
19
20
21import { useTransition, useState, useEffect } from "react";
22import { navigate, useLocation } from "rakkasjs";
23import { SearchType } from "./__generated__/SearchListQuery.graphql";
24
25export function useGithubSearch() {
26  const { current } = useLocation();
27  const initSearchType = current.searchParams.get("st") as SearchType | null;
28  const initSearchValue = current.searchParams.get("sq") ?? "";
29
30  const [, startTransition] = useTransition();
31  const { debouncedValue, setDebouncedValue, isDebouncing } = useDebouncedValue(
32    initSearchValue,
33    5000,
34  );
35  const [searchType, setSearchType] = useState<SearchType>(
36    initSearchType ?? "REPOSITORY",
37  );
38  useEffect(() => {
39    if (debouncedValue !== initSearchValue) {
40      setDebouncedValue(initSearchValue);
41    }
42  }, []);
43  useEffect(() => {
44    const new_url = new URL(current);
45    if (debouncedValue && debouncedValue !== initSearchValue) {
46      new_url.searchParams.set("sq", debouncedValue);
47    }
48    if (searchType && searchType !== initSearchType) {
49      new_url.searchParams.set("st", searchType);
50    }
51    startTransition(() => {
52      navigate(new_url.toString());
53    });
54  }, [debouncedValue, searchType]);
55
56  return {
57    debouncedValue,
58    setDebouncedValue,
59    isDebouncing,
60    searchType,
61    setSearchType,
62    startTransition,
63    current,
64  };
65}
66