React query ESLint and dev tools (#437)

* Install React Query ESLint plugin

* Better query keys

* Add ReactQueryDevTools

* Move retry logic to global defaults

* Remove unused import

* Add explorer to query key

* Move dev tools to bottom-left

packages/graph-explorer/.eslintrc.json

@@ -6,9 +6,10 @@
   "extends": [
     "plugin:react/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:react/jsx-runtime"
+    "plugin:react/jsx-runtime",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
-  "plugins": ["react"],
+  "plugins": ["react", "@tanstack/query"],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": [
@@ -20,7 +21,10 @@
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "react/display-name": "off",
-    "no-console": ["error", { "allow": ["warn", "error"] }]
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/no-rest-destructuring": "warn",
+    "@tanstack/query/stable-query-client": "error"
   },
   "settings": {
     "react": {

packages/graph-explorer/package.json

@@ -97,6 +97,7 @@
     "@react-types/radio": "^3.8.0",
     "@react-types/shared": "^3.23.0",
     "@react-types/switch": "^3.5.2",
+    "@tanstack/eslint-plugin-query": "^5.43.1",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",

packages/graph-explorer/src/connector/queries.ts

@@ -7,10 +7,6 @@ import {
   typeofVertexId,
 } from "./useGEFetchTypes";
 
-function exponentialBackoff(attempt: number): number {
-  return Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000);
-}
-
 /**
  * Retrieves the neighbor info for the given node using the provided filters to
  * limit the results.
@@ -25,9 +21,6 @@ export const neighborsQuery = (
   queryOptions({
     queryKey: ["neighbors", request, explorer],
     enabled: Boolean(explorer) && Boolean(request),
-    staleTime: 1000 * 60, // 1 minute cache
-    retry: 3,
-    retryDelay: exponentialBackoff,
     queryFn: async (): Promise<NeighborsResponse | null> => {
       if (!explorer || !request) {
         return null;
@@ -51,10 +44,7 @@ export type NeighborCountsQueryResponse = {
 export const neighborsCountQuery = (id: VertexId, explorer: Explorer | null) =>
   queryOptions({
     queryKey: ["neighborsCount", id, explorer],
-    enabled: !!explorer,
-    staleTime: 1000 * 60, // 1 minute cache
-    retry: 3,
-    retryDelay: exponentialBackoff,
+    enabled: Boolean(explorer),
     queryFn: async (): Promise<NeighborCountsQueryResponse | undefined> => {
       const result = await explorer?.fetchNeighborsCount({
         vertexId: id.toString(),

packages/graph-explorer/src/core/ConnectedProvider/ConnectedProvider.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { NotificationProvider } from "../../components/NotificationProvider";
 import Toast from "../../components/Toast";
 import AppStatusLoader from "../AppStatusLoader";
@@ -17,10 +18,16 @@ export type ConnectedProviderProps = {
   config?: RawConfiguration;
 } & ThemeProviderProps;
 
+function exponentialBackoff(attempt: number): number {
+  return Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000);
+}
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      retry: 0,
+      retry: 3,
+      retryDelay: exponentialBackoff,
+      staleTime: 1000 * 60, // 1 minute cache
       refetchOnWindowFocus: false,
     },
   },
@@ -48,6 +55,10 @@ const ConnectedProvider = (
             </MantineEmotionProvider>
           </MantineProvider>
         </DndProvider>
+        <ReactQueryDevtools
+          initialIsOpen={false}
+          buttonPosition="bottom-left"
+        />
       </QueryClientProvider>
     </div>
   );

packages/graph-explorer/src/hooks/useUpdateVertexTypeCounts.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { useConfiguration } from "../core";
 import { explorerSelector } from "../core/connector";
@@ -10,30 +10,22 @@ const useUpdateVertexTypeCounts = (vertexType?: string) => {
   const configId = config?.id;
   const explorer = useRecoilValue(explorerSelector);
 
-  const vertexConfig = useMemo(() => {
-    if (!vertexType) {
-      return;
-    }
-
-    return config?.getVertexTypeConfig(vertexType);
-  }, [config, vertexType]);
-
-  const updateSchemaState = useUpdateSchema();
   const query = useQuery({
-    queryKey: ["fetchCountsByType", vertexConfig?.type],
+    queryKey: ["fetchCountsByType", vertexType, explorer],
     queryFn: () => {
-      if (vertexConfig?.total != null || vertexConfig?.type == null) {
-        return;
+      if (!vertexType) {
+        return { total: 0 };
       }
 
       return explorer?.fetchVertexCountsByType({
-        label: vertexConfig?.type,
+        label: vertexType,
       });
     },
-    enabled: vertexConfig?.total == null && vertexConfig?.type != null,
+    enabled: Boolean(vertexType),
   });
 
   // Sync the result over to the schema in Recoil state
+  const updateSchemaState = useUpdateSchema();
   useEffect(() => {
     if (!configId || !query.data) {
       return;

packages/graph-explorer/src/modules/KeywordSearch/useKeywordSearchQuery.ts

@@ -2,7 +2,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNotification } from "../../components/NotificationProvider";
 import { explorerSelector } from "../../core/connector";
 import usePrefixesUpdater from "../../hooks/usePrefixesUpdater";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect } from "react";
 import { createDisplayError } from "../../utils/createDisplayError";
 import { useRecoilValue } from "recoil";
 
@@ -26,22 +26,18 @@ export function useKeywordSearchQuery({
   const { enqueueNotification } = useNotification();
   const queryClient = useQueryClient();
 
-  const queryKey = useMemo(
-    () => [
+  const query = useQuery({
+    queryKey: [
       "keyword-search",
       debouncedSearchTerm,
       vertexTypes,
       searchByAttributes,
       exactMatch,
+      explorer,
     ],
-    [debouncedSearchTerm, vertexTypes, searchByAttributes, exactMatch]
-  );
-
-  const query = useQuery({
-    queryKey,
     queryFn: async ({ signal }) => {
       if (!explorer) {
-        return;
+        return { vertices: [] };
       }
 
       return await explorer.keywordSearch(
@@ -55,7 +51,7 @@ export function useKeywordSearchQuery({
         { signal }
       );
     },
-    enabled: isOpen && !!explorer,
+    enabled: isOpen && Boolean(explorer),
   });
 
   // Sync sparql prefixes

packages/graph-explorer/src/workspaces/DataExplorer/DataExplorer.tsx

@@ -196,7 +196,7 @@ const DataExplorer = ({ classNamePrefix = "ft" }: ConnectionsProps) => {
 
   const updatePrefixes = usePrefixesUpdater();
   const { data, isFetching } = useQuery({
-    queryKey: ["keywordSearch", vertexType, pageIndex, pageSize],
+    queryKey: ["keywordSearch", vertexType, pageIndex, pageSize, explorer],
     queryFn: () => {
       if (!vertexType || !explorer) {
         return { vertices: [] } as KeywordSearchResponse;