Unable 'strict' checks for TSC (#347)

Author: IvanGoncharov

.eslintrc.yml

@@ -54,9 +54,7 @@ overrides:
       'react/jsx-key': off
       'react/no-string-refs': off
       '@typescript-eslint/no-var-requires': off
-
-      # FIXME: blocked by improper type checking should be fixed
-      # after we switch TSC in strict mode
+      '@typescript-eslint/no-non-null-assertion': off
       '@typescript-eslint/no-unnecessary-boolean-literal-compare': off
       '@typescript-eslint/no-explicit-any': off
       '@typescript-eslint/dot-notation': off

package-lock.json

@@ -59,6 +59,7 @@
     "@types/node": "18.15.5",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
+    "@types/webpack-node-externals": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "5.30.7",
     "@typescript-eslint/parser": "5.30.7",
     "cspell": "6.2.3",

package.json

@@ -26,15 +26,15 @@ function consoleError(msg: string) {
 
 http
   .createServer((request, response) => {
-    const url = new URL(request.url, 'file:');
+    const url = new URL(request.url!, 'file:');
     let filePath = url.pathname;
     if (filePath === '/') {
       filePath = '/index.html';
     }
     filePath = path.join(options.directory, filePath);
 
     const extname = String(path.extname(filePath)).toLowerCase();
-    const mimeTypes = {
+    const mimeTypes: { [ext: string]: string } = {
       '.html': 'text/html',
       '.js': 'text/javascript',
       '.css': 'text/css',

scripts/serve-directory.ts

@@ -10,10 +10,10 @@ interface GraphViewportProps {
   typeGraph: TypeGraph | null;
   displayOptions: VoyagerDisplayOptions;
 
-  selectedTypeID: string;
-  selectedEdgeID: string;
+  selectedTypeID: string | null;
+  selectedEdgeID: string | null;
 
-  onSelectNode: (id: string) => void;
+  onSelectNode: (id: string | null) => void;
   onSelectEdge: (id: string) => void;
 }
 
@@ -35,10 +35,13 @@ export default class GraphViewport extends Component<
 
   // Handle async graph rendering based on this example
   // https://gist.github.com/bvaughn/982ab689a41097237f6e9860db7ca8d6
-  _currentTypeGraph = null;
-  _currentDisplayOptions = null;
+  _currentTypeGraph: TypeGraph | null = null;
+  _currentDisplayOptions: VoyagerDisplayOptions | null = null;
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(
+    props: GraphViewportProps,
+    state: GraphViewportState,
+  ): GraphViewportState | null {
     const { typeGraph, displayOptions } = props;
 
     if (
@@ -56,7 +59,10 @@ export default class GraphViewport extends Component<
     this._renderSvgAsync(typeGraph, displayOptions);
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(
+    prevProps: GraphViewportProps,
+    prevState: GraphViewportState,
+  ) {
     const { svgViewport } = this.state;
 
     if (svgViewport == null) {
@@ -150,7 +156,7 @@ export default class GraphViewport extends Component<
     }
   }
 
-  focusNode(id) {
+  focusNode(id: string) {
     const { svgViewport } = this.state;
     if (svgViewport) {
       svgViewport.focusElement(id);

src/components/GraphViewport.tsx

@@ -33,8 +33,8 @@ interface IntrospectionModalProps {
 
 export function IntrospectionModal(props: IntrospectionModalProps) {
   const { open, presets, onChange, onClose } = props;
-  const presetNames = presets != null ? Object.keys(presets) : [];
-  const hasPresets = presetNames.length > 0;
+  const hasPresets = presets != null;
+  const presetNames = hasPresets ? Object.keys(presets) : [];
 
   const [submitted, setSubmitted] = useState({
     inputType: hasPresets ? InputType.Presets : InputType.SDL,
@@ -103,7 +103,7 @@ export function IntrospectionModal(props: IntrospectionModalProps) {
   function handleSubmit() {
     switch (inputType) {
       case InputType.Presets:
-        onChange(buildClientSchema(presets[activePreset].data));
+        onChange(buildClientSchema(presets?.[activePreset].data));
         break;
       case InputType.Introspection:
         // check for errors and check if valid

src/components/IntrospectionModal.tsx

@@ -9,7 +9,6 @@ import { GraphQLSchema } from 'graphql/type';
 import { buildClientSchema, IntrospectionQuery } from 'graphql/utilities';
 import {
   Children,
-  type ReactElement,
   type ReactNode,
   useEffect,
   useMemo,
@@ -52,7 +51,7 @@ export interface VoyagerProps {
 }
 
 export default function Voyager(props: VoyagerProps) {
-  const initialDisplayOptions: VoyagerDisplayOptions = useMemo(
+  const initialDisplayOptions = useMemo(
     () => ({
       rootType: undefined,
       skipRelay: true,
@@ -83,10 +82,19 @@ export default function Voyager(props: VoyagerProps) {
       return null;
     }
 
-    const introspectionSchema =
-      introspectionResult.value instanceof GraphQLSchema
-        ? introspectionResult.value
-        : buildClientSchema(introspectionResult.value.data);
+    let introspectionSchema;
+    if (introspectionResult.value instanceof GraphQLSchema) {
+      introspectionSchema = introspectionResult.value;
+    } else {
+      if (
+        introspectionResult.value.errors != null ||
+        introspectionResult.value.data == null
+      ) {
+        // FIXME: display errors
+        return null;
+      }
+      introspectionSchema = buildClientSchema(introspectionResult.value.data);
+    }
 
     const schema = getSchema(
       introspectionSchema,
@@ -105,7 +113,13 @@ export default function Voyager(props: VoyagerProps) {
     setSelected({ typeID: null, edgeID: null });
   }, [typeGraph]);
 
-  const [selected, setSelected] = useState({ typeID: null, edgeID: null });
+  const [selected, setSelected] = useState<{
+    typeID: string | null;
+    edgeID: string | null;
+  }>({
+    typeID: null,
+    edgeID: null,
+  });
 
   const {
     allowToChangeSchema = false,
@@ -115,7 +129,7 @@ export default function Voyager(props: VoyagerProps) {
     hideVoyagerLogo = true,
   } = props;
 
-  const viewportRef = useRef(null);
+  const viewportRef = useRef<GraphViewport>(null);
   useEffect(() => viewportRef.current?.resize(), [hideDocs]);
 
   return (
@@ -143,7 +157,10 @@ export default function Voyager(props: VoyagerProps) {
   function renderPanel() {
     const children = Children.toArray(props.children);
     const panelHeader = children.find(
-      (child: ReactElement) => child.type === Voyager.PanelHeader,
+      (child) =>
+        typeof child === 'object' &&
+        'type' in child &&
+        child.type === Voyager.PanelHeader,
     );
 
     return (
@@ -156,7 +173,7 @@ export default function Voyager(props: VoyagerProps) {
             typeGraph={typeGraph}
             selectedTypeID={selected.typeID}
             selectedEdgeID={selected.edgeID}
-            onFocusNode={(id) => viewportRef.current.focusNode(id)}
+            onFocusNode={(id) => viewportRef.current?.focusNode(id)}
             onSelectNode={handleSelectNode}
             onSelectEdge={handleSelectEdge}
           />
@@ -210,7 +227,7 @@ export default function Voyager(props: VoyagerProps) {
     );
   }
 
-  function handleSelectNode(typeID: string) {
+  function handleSelectNode(typeID: string | null) {
     setSelected((oldSelected) => {
       if (typeID === oldSelected.typeID) {
         return oldSelected;
@@ -219,9 +236,9 @@ export default function Voyager(props: VoyagerProps) {
     });
   }
 
-  function handleSelectEdge(edgeID: string) {
+  function handleSelectEdge(edgeID: string | null) {
     setSelected((oldSelected) => {
-      if (edgeID === oldSelected.edgeID) {
+      if (edgeID === oldSelected.edgeID || edgeID == null) {
         // deselect if click again
         return { ...oldSelected, edgeID: null };
       } else {

src/components/Voyager.tsx

@@ -8,7 +8,7 @@ import WrappedTypeName from './WrappedTypeName';
 
 interface ArgumentProps {
   arg: GraphQLArgument;
-  filter: string;
+  filter: string | null;
   expanded: boolean;
   onTypeLink: (type: GraphQLNamedType) => void;
 }

src/components/doc-explorer/Argument.tsx

@@ -3,7 +3,7 @@ import './Description.css';
 import Markdown from '../utils/Markdown';
 
 interface DescriptionProps {
-  text?: string;
+  text: string | undefined | null;
   className: string;
 }