@cubejs-client/react 1.7.37 → 1.7.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cubejs-client/react",
-  "version": "1.7.37",
+  "version": "1.7.38",
   "author": "Cube Dev, Inc.",
   "license": "MIT",
   "engines": {},
@@ -15,7 +15,10 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsc --build",
+    "test": "yarn unit",
+    "test:types": "tsc --project tsconfig.test.json",
     "tsc": "tsc --build",
+    "unit": "yarn test:types && jest --runInBand",
     "watch": "tsc --build --watch"
   },
   "files": [
@@ -24,18 +27,28 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.13.9",
-    "@cubejs-client/core": "1.7.37",
+    "@cubejs-client/core": "1.7.38",
     "core-js": "^3.34.0",
     "ramda": "^0.27.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.12.13",
+    "@babel/preset-typescript": "^7.13.0",
+    "@types/jest": "^29",
     "@types/ramda": "^0.27.40",
-    "@types/react": "^16.9.41",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "babel-jest": "^29",
+    "jest": "^29",
+    "jest-environment-jsdom": "^29",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {
     "react": ">=16.10.2"
   },
-  "gitHead": "28c8efd405d900a1b9cb6cb5ebc2ec951aa375be"
+  "gitHead": "9ea1fda5dade5b8a4256acd20bcf77318fe13a72"
 }

package/src/CubeProvider.tsx

@@ -4,7 +4,7 @@ import CubeContext from './CubeContext';
 import type { CubeContextProps, CubeProviderProps } from './types';
 
 /**
- * Cube.js context provider
+ * Cube context provider
  * ```js
  * import React from 'react';
  * import cube from '@cubejs-client/core';

package/src/QueryBuilder.tsx

@@ -78,7 +78,7 @@ const granularities: GranularityOption[] = [
 ];
 
 /**
- * `<QueryBuilder />` is used to build interactive analytics query builders. It abstracts state management and API calls to Cube.js Backend. It uses render prop technique and doesn’t render anything itself, but calls the render function instead.
+ * `<QueryBuilder />` is used to build interactive analytics query builders. It abstracts state management and API calls to Cube Backend. It uses render prop technique and doesn’t render anything itself, but calls the render function instead.
  *
  * **Example**
  *
@@ -144,6 +144,8 @@ const granularities: GranularityOption[] = [
 export default class QueryBuilder extends React.Component<QueryBuilderProps, QueryBuilderInternalState> {
   static contextType = CubeContext;
 
+  context!: React.ContextType<typeof CubeContext>;
+
   static defaultProps = {
     cubeApi: null,
     stateChangeHeuristics: null,
@@ -278,10 +280,6 @@ export default class QueryBuilder extends React.Component<QueryBuilderProps, Que
   // TypeScript field declarations into `everything-else`, which the configured
   // order puts after `lifecycle`. Runtime is unaffected: field initializers run
   // right after `super()`, so the constructor's assignments still win.
-  //
-  // `this.context` is not re-declared: React types it as `any`, and a field
-  // declaration would be emitted at runtime and shadow the context React
-  // assigns.
   private mutexObj: MutexObj;
 
   private orderMembersOrderKeys: string[];

package/src/QueryRenderer.tsx

@@ -20,6 +20,8 @@ import type {
 export default class QueryRenderer extends React.Component<QueryRendererProps, QueryRendererState> {
   static contextType = CubeContext;
 
+  context!: React.ContextType<typeof CubeContext>;
+
   static defaultProps = {
     cubeApi: null,
     query: null,
@@ -83,10 +85,6 @@ export default class QueryRenderer extends React.Component<QueryRendererProps, Q
   // TypeScript field declarations into `everything-else`, which the configured
   // order puts after `lifecycle`. Runtime is unaffected: field initializers run
   // right after `super()`, so the constructor's assignments still win.
-  //
-  // `this.context` is not re-declared: React types it as `any`, and a field
-  // declaration would be emitted at runtime and shadow the context React
-  // assigns.
   private mutexObj: MutexObj;
 
   cubeApi(): CubeApi {

package/src/hooks/cube-query.ts

@@ -22,7 +22,7 @@ import type {
 } from '../types';
 
 /**
- * A React hook for executing Cube.js queries
+ * A React hook for executing Cube queries
  * ```js
  * import React from 'react';
  * import { Table } from 'antd';
@@ -75,15 +75,33 @@ export function useCubeQuery(
   const [progress, setProgress] = useState<ProgressResponse | null>(null);
   const [error, setError] = useState<Error | null>(null);
   const context = useContext(CubeContext);
+  const requestIdRef = useRef(0);
+  const hasStartedRequestRef = useRef(false);
 
   let subscribeRequest: UnsubscribeObj | null = null;
 
-  // `progressResponse` is not part of the public `ProgressResult` API
-  const progressCallback: ProgressCallback = (progressResult) => setProgress(
-    (progressResult as unknown as ProgressResultWithResponse).progressResponse
-  );
+  function isCurrentRequest(requestId: number) {
+    return requestId === requestIdRef.current;
+  }
 
-  async function fetch() {
+  function startRequest() {
+    hasStartedRequestRef.current = true;
+
+    return ++requestIdRef.current;
+  }
+
+  function createProgressCallback(requestId: number): ProgressCallback {
+    return (progressResult) => {
+      if (isCurrentRequest(requestId)) {
+        // `progressResponse` is not part of the public `ProgressResult` API
+        setProgress(
+          (progressResult as unknown as ProgressResultWithResponse).progressResponse
+        );
+      }
+    };
+  }
+
+  async function fetchQuery(requestId: number) {
     const { resetResultSetOnChange } = options;
     const cubeApi = options.cubeApi || context?.cubeApi;
 
@@ -97,25 +115,38 @@ export function useCubeQuery(
 
     setError(null);
     setLoading(true);
+    setProgress(null);
 
     try {
       const response = await cubeApi.load(query, {
         mutexObj: mutexRef.current,
         mutexKey: 'query',
-        progressCallback,
+        progressCallback: createProgressCallback(requestId),
         castNumerics: Boolean(typeof options.castNumerics === 'boolean' ? options.castNumerics : context?.options?.castNumerics),
         ...(options.cache ? { cache: options.cache } : {}),
       });
 
-      setResultSet(response);
-      setProgress(null);
+      if (isCurrentRequest(requestId)) {
+        setResultSet(response);
+        setProgress(null);
+      }
     } catch (loadError) {
-      setError(loadError as Error);
-      setResultSet(null);
-      setProgress(null);
+      if (isCurrentRequest(requestId)) {
+        setError(loadError as Error);
+        setResultSet(null);
+        setProgress(null);
+      }
+    }
+
+    if (isCurrentRequest(requestId)) {
+      setLoading(false);
     }
+  }
+
+  async function fetch() {
+    const requestId = startRequest();
 
-    setLoading(false);
+    await fetchQuery(requestId);
   }
 
   useEffect(() => {
@@ -129,6 +160,8 @@ export function useCubeQuery(
 
     async function loadQuery() {
       if (!skip && isQueryPresent(query)) {
+        const requestId = startRequest();
+
         // `areQueriesEqual` is declared for a single query, and reads no more
         // than `order` off one when given an array of queries
         const previousQuery = currentQuery as DeeplyReadonly<Query> | null;
@@ -142,6 +175,7 @@ export function useCubeQuery(
 
         setError(null);
         setLoading(true);
+        setProgress(null);
 
         try {
           if (subscribeRequest) {
@@ -155,34 +189,43 @@ export function useCubeQuery(
               {
                 mutexObj: mutexRef.current,
                 mutexKey: 'query',
-                progressCallback,
+                progressCallback: createProgressCallback(requestId),
                 ...(options.cache ? { cache: options.cache } : {}),
               },
               (e, result) => {
-                if (e) {
-                  setError(e);
-                } else {
-                  setResultSet(result);
+                if (isCurrentRequest(requestId)) {
+                  if (e) {
+                    setError(e);
+                  } else {
+                    setResultSet(result);
+                  }
+                  setLoading(false);
+                  setProgress(null);
                 }
-                setLoading(false);
-                setProgress(null);
               }
             );
           } else {
-            await fetch();
+            await fetchQuery(requestId);
           }
         } catch (e) {
-          setError(e as Error);
-          setResultSet(null);
-          setLoading(false);
-          setProgress(null);
+          if (isCurrentRequest(requestId)) {
+            setError(e as Error);
+            setResultSet(null);
+            setLoading(false);
+            setProgress(null);
+          }
         }
+      } else if (hasStartedRequestRef.current) {
+        setLoading(false);
+        setProgress(null);
       }
     }
 
     loadQuery();
 
     return () => {
+      requestIdRef.current += 1;
+
       if (subscribeRequest) {
         subscribeRequest.unsubscribe();
         subscribeRequest = null;

package/src/index.ts

@@ -4,7 +4,7 @@
  * @menuCategory Reference
  * @subcategory Frontend
  * @menuOrder 3
- * @description `@cubejs-client/react` provides React Components for easy Cube.js integration in a React app.
+ * @description `@cubejs-client/react` provides React Components for easy Cube integration in a React app.
  */
 import QueryRenderer from './QueryRenderer';
 import QueryRendererWithTotals from './QueryRendererWithTotals';

package/src/types.ts

@@ -86,7 +86,7 @@ export type QueryRendererProps = {
   query: Query | Query[];
   queries?: { [key: string]: Query };
   /**
-   * Indicates whether the generated by `Cube.js` SQL Code should be requested. See [rest-api#sql](/reference/rest-api#v1sql). When set to `only` then only the request to [/v1/sql](/reference/rest-api#v1sql) will be performed. When set to `true` the sql request will be performed along with the query request. Will not be performed if set to `false`
+   * Indicates whether the generated by `Cube` SQL Code should be requested. See [rest-api#sql](/reference/rest-api#v1sql). When set to `only` then only the request to [/v1/sql](/reference/rest-api#v1sql) will be performed. When set to `true` the sql request will be performed along with the query request. Will not be performed if set to `false`
    */
   loadSql?: 'only' | boolean;
   /**
@@ -245,19 +245,19 @@ export type QueryBuilderRenderProps = {
 
   availableFilterMembers: Array<AvailableCube<TCubeMeasure> | AvailableCube<TCubeDimension>>;
   /**
-   * An array of available measures to select. They are loaded via the API from Cube.js Backend.
+   * An array of available measures to select. They are loaded via the API from Cube Backend.
    */
   availableMeasures: TCubeMeasure[];
   /**
-   * An array of available dimensions to select. They are loaded via the API from Cube.js Backend.
+   * An array of available dimensions to select. They are loaded via the API from Cube Backend.
    */
   availableDimensions: TCubeDimension[];
   /**
-   * An array of available time dimensions to select. They are loaded via the API from Cube.js Backend.
+   * An array of available time dimensions to select. They are loaded via the API from Cube Backend.
    */
   availableTimeDimensions: TCubeDimension[];
   /**
-   * An array of available segments to select. They are loaded via the API from Cube.js Backend.
+   * An array of available segments to select. They are loaded via the API from Cube Backend.
    */
   availableSegments: TCubeSegment[];