Merge pull request #44 from thefrontside/pc/paginate-all

paginate the all query

Author: dagda1

cli/.gitignore

@@ -3,3 +3,4 @@ node_modules
 build
 graphgen
 example/package-lock.json
+vite.config.ts.timestamp-*

cli/app/src/components/Factory/Factory.tsx

@@ -3,12 +3,21 @@ import { StrictMode, Suspense } from "react";
 import { StyledEngineProvider } from "@mui/material/styles";
 import { GraphInspector } from "../GraphInspector/GraphInspector";
 import { Topbar } from "../Topbar/Topbar";
-import { createClient, dedupExchange, fetchExchange, Provider } from "urql";
+import { createClient, dedupExchange, Exchange, fetchExchange, Provider } from "urql";
+import { cacheExchange } from "@urql/exchange-graphcache";
+import { relayPagination } from '@urql/exchange-graphcache/extras';
 
 const client = createClient({
   url: "/graphql",
   exchanges: [
     dedupExchange,
+    cacheExchange({
+      resolvers: {
+        Query: {
+          all: relayPagination(),
+        },
+      },
+    }) as Exchange,
     fetchExchange,
   ],
 });

cli/app/src/components/GraphInspector/GraphInspector.css

@@ -50,3 +50,8 @@
 .type-label :first-child {
   margin-right: .25rem;
 }
+
+.error {
+  color: #FF9494;
+  font-size: 2rem;
+}

cli/app/src/components/GraphInspector/GraphInspector.tsx

@@ -1,22 +1,61 @@
 import "./GraphInspector.css";
 import type { SyntheticEvent } from "react";
-import { useCallback, useEffect, useReducer, useRef } from "react";
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
 import TreeView from "@mui/lab/TreeView";
 import { Node } from "./Node";
-import { all, node } from "./queries";
+import { allQuery, node } from "./queries";
 import { graphReducer } from "./graphReducer";
 import { VertexNode } from "../../../../graphql/types";
 import { MinusSquare, PlusSquare } from "./icons";
 import { StyledTreeItem } from "./StyledTreeItem";
 import { fetchGraphQL } from "../../graphql/fetchGraphql";
 import { Loader } from "../Loader/Loader";
-
+import { useQuery } from 'urql';
+import type { Page } from '../../../../graphql/relay';
 const emptyGraph = { graph: {} };
 
+const limit = 5;
+
 export function GraphInspector(): JSX.Element {
+  // TODO: call setAfter when scrolling
+  const [after] = useState('');
+  const [typename, setTypename] = useState<string | undefined>();
+
+  const [result] = useQuery<{ all: Page<VertexNode> }, {
+    typename: string;
+    first: number;
+    after: string;
+  }>({
+    query: allQuery,
+    pause: !typename,
+    variables: {
+      typename,
+      first: limit,
+      after
+    },
+  });
+
   const [{ graph }, dispatch] = useReducer(graphReducer, emptyGraph);
   const expandedNodes = useRef(new Set<string>());
 
+  const { data, error } = result;
+
+  useEffect(() => {
+    const edges = data?.all?.edges ?? [];
+
+    if (edges.length === 0) {
+      return;
+    }
+
+    dispatch({
+      type: "ALL",
+      payload: {
+        typename,
+        nodes: edges.map(edge => edge.node),
+      },
+    });
+  }, [data, typename])
+
   const handleChange = useCallback(
     async (_: SyntheticEvent, nodeIds: string[]) => {
       if (nodeIds.length === 0) {
@@ -79,22 +118,8 @@ export function GraphInspector(): JSX.Element {
         return;
       }
 
-      try {
-        const response = await all(nodeId);
-
-        dispatch({
-          type: "ALL",
-          payload: {
-            typename: nodeIds[0],
-            nodes: response.data.all,
-          },
-        });
-      } catch (e) {
-        console.error(e);
-        throw e;
-      }
-    },
-    [],
+      setTypename(nodeId);
+    }, [],
   );
 
   useEffect(() => {
@@ -120,6 +145,10 @@ export function GraphInspector(): JSX.Element {
     return <h2>No graph nodes</h2>;
   }
 
+  if (error) {
+    return <p className="error">Oh no... {error?.message}</p>
+  }
+
   return (
     <TreeView
       aria-label="graph inspector"
@@ -135,20 +164,19 @@ export function GraphInspector(): JSX.Element {
           label={<div className="root">{label}</div>}
         >
           {nodes.length > 0
-            ? nodes.map((vertexNode, i) => {
-              return (
-                <StyledTreeItem
-                  key={vertexNode.id}
-                  nodeId={vertexNode.id}
-                  label={
-                    <Node
-                      parentId={`${typename}.nodes.${i}`}
-                      node={vertexNode}
-                    />
-                  }
-                />
-              );
-            })
+            ? nodes.map((vertexNode, i) => (
+              <StyledTreeItem
+                key={vertexNode.id}
+                nodeId={vertexNode.id}
+                label={
+                  <Node
+                    parentId={`${typename}.nodes.${i}`}
+                    node={vertexNode}
+                  />
+                }
+              />
+            )
+            )
             : <Loader />}
         </StyledTreeItem>
       ))}

cli/app/src/components/GraphInspector/StyledTreeItem.tsx

@@ -1,10 +1,10 @@
 import { alpha, styled } from "@mui/material/styles";
 import TreeItem, { treeItemClasses, TreeItemProps } from "@mui/lab/TreeItem";
-import { FC } from "react";
+import { FC } from 'react';
 
-export const StyledTreeItem: FC<TreeItemProps> = styled((
-  props: TreeItemProps,
-) => <TreeItem {...props} />)(({ theme }) => ({
+export const StyledTreeItem: FC<TreeItemProps> = styled((props: TreeItemProps) => (
+  <TreeItem {...props} />
+))(({ theme }) => ({
   [`& .${treeItemClasses.iconContainer}`]: {
     "& .close": {
       opacity: 0.3,

cli/app/src/components/GraphInspector/graphReducer.ts

@@ -1,7 +1,7 @@
 import produce from "immer";
-import { assert } from "../../assert/assert.ts";
+import { assert } from "../../assert/assert";
 import { match } from "ts-pattern";
-import type { VertexNode } from "../../../../graphql/types.ts";
+import type { VertexNode } from "../../../../graphql/types";
 
 interface Type {
   typename: string;

cli/app/src/components/GraphInspector/queries.ts

@@ -1,4 +1,5 @@
 import { fetchGraphQL } from "../../graphql/fetchGraphql";
+import { gql } from 'urql';
 
 export async function node(id: string) {
   return await fetchGraphQL(
@@ -33,11 +34,11 @@ export async function node(id: string) {
   );
 }
 
-export async function all(typename: string) {
-  return await fetchGraphQL(
-    `
-    query All($typename: String!) {
-      all(typename:$typename) {
+export const allQuery = gql`
+query All($typename: String!, $first: Int!, $after: String!) {
+  all(typename:$typename, first: $first, after: $after) {
+    edges {
+      node {
         id
         fields {
           key
@@ -57,9 +58,10 @@ export async function all(typename: string) {
         }
       }
     }
-  `,
-    {
-      "typename": typename,
-    },
-  );
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
 }
+`

cli/graphql/.vscode/extensions.json

@@ -32,6 +32,25 @@ type Vertex implements Node {
   fields: [FieldEntry!]!
 }
 
+type VertexEdge {
+  node: Vertex!
+  cursor: String!
+}
+
+type PageInfo {
+  hasNextPage: Boolean!
+  hasPreviousPage: Boolean!
+  startCursor: String
+  endCursor: String
+}
+
+type VertexConnection {
+  count: Int!
+  total: Int!
+  pageInfo: PageInfo!
+  edges: [VertexEdge]!
+}
+
 type Type {
   typename: String!
   count: Int!
@@ -40,7 +59,7 @@ type Type {
 type Query {
   meta: [Type]
   graph: JSON
-  all(typename: String!): [Vertex!]
+  all(typename: String!, first: Int!, after: String!): VertexConnection!
   node(id: ID!): Node
 }