types for gql

libs/remix-ui/git/src/components/navigation/commitdetails.tsx

@@ -2,9 +2,18 @@ import { faCaretUp, faCaretDown, faCaretRight, faArrowUp, faArrowDown, faArrowRo
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useContext, useEffect } from "react";
 import { CommitSummary } from "../panels/commits/commitsummary";
+import { ReadCommitResult } from "isomorphic-git"
 
-export const CommitDetailsNavigation = ({ eventKey, activePanel, callback, commit, checkout }) => {
+interface CommitDetailsNavigationProps  {
+    commit: ReadCommitResult,
+    checkout: (oid: string) => void
+    eventKey: string
+    activePanel: string
+    callback: (eventKey: string) => void
+}
 
+export const CommitDetailsNavigation = (props: CommitDetailsNavigationProps) => {
+    const { commit, checkout, eventKey, activePanel, callback } = props;
     const handleClick = () => {
         if (!callback) return
         if (activePanel === eventKey) {

libs/remix-ui/git/src/components/panels/branches/branchCommits.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { gql, useQuery } from '@apollo/client';
+import { useQuery } from '@apollo/client';
+import { gql } from './../../../types';
 
-const GET_COMMITS = gql`
+const GET_COMMITS = gql(/* GraphQL */`
   query GetCommits($name: String!, $owner: String!, $cursor: String, $limit: Int = 10) {
     repository(name: $name, owner: $owner) {
       ref(qualifiedName: "master") {
@@ -28,7 +29,7 @@ const GET_COMMITS = gql`
       }
     }
   }
-`;
+`);
 
 
 export const BranchCommits = ({ owner, name }) => {
@@ -38,7 +39,7 @@ export const BranchCommits = ({ owner, name }) => {
 
   if (loading) return <p>Loading...</p>;
 
-  const { edges, pageInfo } = data.repository.ref.target.history;
+  const { edges, pageInfo } = (data.repository.ref.target.__typename === "Commit")? data.repository.ref.target.history : { edges: [], pageInfo: { endCursor: null, hasNextPage: false } };
 
   const loadNextPage= ()=>{
     fetchMore({
@@ -46,10 +47,10 @@ export const BranchCommits = ({ owner, name }) => {
         cursor: pageInfo.endCursor,
       },
       updateQuery: (prevResult, { fetchMoreResult }) => {
-        const newEdges = fetchMoreResult.repository.ref.target.history.edges;
+        const newEdges = (fetchMoreResult.repository.ref.target.__typename === "Commit"? fetchMoreResult.repository.ref.target.history.edges : [])
-        const pageInfo = fetchMoreResult.repository.ref.target.history.pageInfo;
+        const pageInfo = (fetchMoreResult.repository.ref.target.__typename === "Commit"? fetchMoreResult.repository.ref.target.history.pageInfo : {})
         
-        return newEdges.length
+        return newEdges.length && prevResult.repository.ref.target.__typename === "Commit"
           ? {
               repository: {
                 __typename: prevResult.repository.__typename,
@@ -65,7 +66,7 @@ export const BranchCommits = ({ owner, name }) => {
                   },
                 },
               },
-            }
+            } as any
           : prevResult;
       },
     });
@@ -73,7 +74,6 @@ export const BranchCommits = ({ owner, name }) => {
 
   return (
     <div>
-      <h3>Commits</h3>
       <ul>
         {edges.map(({ node }) => (
           <li key={node.oid}>

libs/remix-ui/git/src/types/codegen.ts

@@ -3,7 +3,7 @@ import { CodegenConfig } from '@graphql-codegen/cli';
 const config: CodegenConfig = {
   schema: 'https://docs.github.com/public/schema.docs.graphql',
   // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
-  documents: ['src/**/*.{ts,tsx}'],
+  documents: ['./libs/remix-ui/git/src/**/*.{ts,tsx}'],
   generates: {
     './libs/remix-ui/git/src/types/': {
       preset: 'client',

libs/remix-ui/git/src/types/fragment-masking.ts

@@ -0,0 +1,67 @@
+/* eslint-disable */
+import { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { FragmentDefinitionNode } from 'graphql';
+import { Incremental } from './graphql';
+
+
+export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
+  infer TType,
+  any
+>
+  ? [TType] extends [{ ' $fragmentName'?: infer TKey }]
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentTypeDecoration<TType, any>,
+  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentTypeDecoration<any, any>,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
+export function isFragmentReady<TQuery, TFrag>(
+  queryNode: DocumentTypeDecoration<TQuery, any>,
+  fragmentNode: TypedDocumentNode<TFrag>,
+  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
+): data is FragmentType<typeof fragmentNode> {
+  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
+    ?.deferredFields;
+
+  if (!deferredFields) return true;
+
+  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
+  const fragName = fragDef?.name?.value;
+
+  const fields = (fragName && deferredFields[fragName]) || [];
+  return fields.length > 0 && fields.every(field => data && field in data);
+}

libs/remix-ui/git/src/types/gql.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "\n  query GetCommits($name: String!, $owner: String!, $cursor: String, $limit: Int = 10) {\n    repository(name: $name, owner: $owner) {\n      ref(qualifiedName: \"master\") {\n        target {\n          ... on Commit {\n            history(first: $limit, after: $cursor) {\n              pageInfo {\n                endCursor\n                hasNextPage\n              }\n              edges {\n                node {\n                  oid\n                  messageHeadline\n                  author {\n                    name\n                    date\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n": types.GetCommitsDocument,
+};
+
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function gql(source: string): unknown;
+
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  query GetCommits($name: String!, $owner: String!, $cursor: String, $limit: Int = 10) {\n    repository(name: $name, owner: $owner) {\n      ref(qualifiedName: \"master\") {\n        target {\n          ... on Commit {\n            history(first: $limit, after: $cursor) {\n              pageInfo {\n                endCursor\n                hasNextPage\n              }\n              edges {\n                node {\n                  oid\n                  messageHeadline\n                  author {\n                    name\n                    date\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query GetCommits($name: String!, $owner: String!, $cursor: String, $limit: Int = 10) {\n    repository(name: $name, owner: $owner) {\n      ref(qualifiedName: \"master\") {\n        target {\n          ... on Commit {\n            history(first: $limit, after: $cursor) {\n              pageInfo {\n                endCursor\n                hasNextPage\n              }\n              edges {\n                node {\n                  oid\n                  messageHeadline\n                  author {\n                    name\n                    date\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+
+export function gql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;

libs/remix-ui/git/src/types/index.ts

@@ -1,6 +1,7 @@
+export * from "./fragment-masking";
+export * from "./gql";
 import { Endpoints } from "@octokit/types"
 import { CommitObject, ReadCommitResult } from "isomorphic-git"
-
 export type GitHubUser = Endpoints["GET /user"]["response"]['data']
 export type RateLimit = Endpoints["GET /rate_limit"]["response"]["data"]