@cubejs-client/react 0.34.60 → 0.35.0

package/index.d.ts

@@ -10,7 +10,7 @@
 declare module '@cubejs-client/react' {
   import * as React from 'react';
   import {
-    CubejsApi,
+    CubeApi,
     Query,
     ResultSet,
     SqlQuery,
@@ -39,11 +39,7 @@ declare module '@cubejs-client/react' {
   }
 
   type CubeProviderProps = {
-    cubeApi?: CubejsApi | null;
-    /**
-     * @deprecated Use `cubeApi` instead
-     */
-    cubejsApi?: CubejsApi | null;
+    cubeApi: CubeApi | null;
     options?: CubeProviderOptions;
     children: React.ReactNode;
   };
@@ -52,20 +48,20 @@ declare module '@cubejs-client/react' {
    * Cube.js context provider
    * ```js
    * import React from 'react';
-   * import cubejs from '@cubejs-client/core';
+   * import cube from '@cubejs-client/core';
    * import { CubeProvider } from '@cubejs-client/react';
    *
    * const API_URL = 'https://harsh-eel.aws-us-east-2.cubecloudapp.dev';
-   * const CUBEJS_TOKEN =
+   * const CUBE_TOKEN =
    *   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.* eyJpYXQiOjE1OTE3MDcxNDgsImV4cCI6MTU5NDI5OTE0OH0.* n5jGLQJ14igg6_Hri_Autx9qOIzVqp4oYxmX27V-4T4';
    *
-   * const cubejsApi = cubejs(CUBEJS_TOKEN, {
+   * const cubeApi = cube(CUBE_TOKEN, {
    *   apiUrl: `${API_URL}/cubejs-api/v1`,
    * });
    *
    * export default function App() {
    *   return (
-   *     <CubeProvider cubejsApi={cubejsApi}>
+   *     <CubeProvider cubeApi={cubeApi}>
    *       //...
    *     </CubeProvider>
    *   )
@@ -77,26 +73,26 @@ declare module '@cubejs-client/react' {
   export const CubeProvider: React.FC<CubeProviderProps>;
 
   type CubeContextProps = {
-    cubejsApi: CubejsApi;
+    cubeApi: CubeApi;
     options?: CubeProviderOptions;
   };
 
   /**
-   * In case when you need direct access to `cubejsApi` you can use `CubeContext` anywhere in your app
+   * In case when you need direct access to `cubeApi` you can use `CubeContext` anywhere in your app
    *
    * ```js
    * import React from 'react';
    * import { CubeContext } from '@cubejs-client/react';
    *
    * export default function DisplayComponent() {
-   *   const { cubejsApi } = React.useContext(CubeContext);
+   *   const { cubeApi } = React.useContext(CubeContext);
    *   const [rawResults, setRawResults] = React.useState([]);
    *   const query = {
    *     ...
    *   };
    *
    *   React.useEffect(() => {
-   *     cubejsApi.load(query).then((resultSet) => {
+   *     cubeApi.load(query).then((resultSet) => {
    *       setRawResults(resultSet.rawData());
    *     });
    *   }, [query]);
@@ -140,9 +136,9 @@ declare module '@cubejs-client/react' {
     resetResultSetOnChange?: boolean;
     updateOnlyOnStateChange?: boolean;
     /**
-     * `CubejsApi` instance to use
+     * `CubeApi` instance to use
      */
-    cubejsApi?: CubejsApi;
+    cubeApi?: CubeApi;
     /**
      * Output of this function will be rendered by the `QueryRenderer`
      */
@@ -170,9 +166,9 @@ declare module '@cubejs-client/react' {
 
   type QueryBuilderProps = {
     /**
-     * `CubejsApi` instance to use
+     * `CubeApi` instance to use
      */
-    cubejsApi?: CubejsApi;
+    cubeApi?: CubeApi;
     /**
      * State for the QueryBuilder to start with. Pass in the value previously saved from onVizStateChanged to restore a session.
      */
@@ -358,12 +354,12 @@ declare module '@cubejs-client/react' {
    * import ReactDOM from 'react-dom';
    * import { Layout, Divider, Empty, Select } from 'antd';
    * import { QueryBuilder } from '@cubejs-client/react';
-   * import cubejs from '@cubejs-client/core';
+   * import cube from '@cubejs-client/core';
    * import 'antd/dist/antd.css';
    *
    * import ChartRenderer from './ChartRenderer';
    *
-   * const cubejsApi = cubejs('YOUR-CUBEJS-API-TOKEN', {
+   * const cubeApi = cube('YOUR-CUBE-API-TOKEN', {
    *   apiUrl: 'http://localhost:4000/cubejs-api/v1',
    * });
    *
@@ -377,7 +373,7 @@ declare module '@cubejs-client/react' {
    *         },
    *       ],
    *     }}
-   *     cubejsApi={cubejsApi}
+   *     cubeApi={cubeApi}
    *     render={({ resultSet, measures, availableMeasures, updateMeasures }) => (
    *       <Layout.Content style={{ padding: '20px' }}>
    *         <Select
@@ -462,15 +458,9 @@ declare module '@cubejs-client/react' {
 
   type UseCubeQueryOptions = {
     /**
-     * @deprecated Use the `cubeApi` option
-     * A `CubejsApi` instance to use. Taken from the context if the param is not passed
-     */
-    cubejsApi?: CubejsApi;
-
-    /**
-     * A `CubejsApi` instance to use. Taken from the context if the param is not passed
+     * A `CubeApi` instance to use. Taken from the context if the param is not passed
      */
-    cubeApi?: CubejsApi;
+    cubeApi?: CubeApi;
     /**
      * Query execution will be skipped when `skip` is set to `true`. You can use this flag to avoid sending incomplete queries.
      */
@@ -503,8 +493,7 @@ declare module '@cubejs-client/react' {
    */
   type CubeFetchOptions = {
     skip?: boolean;
-    cubeApi?: CubejsApi;
-    cubejsApi?: CubejsApi;
+    cubeApi?: CubeApi;
     query?: Query;
   };
 
@@ -566,7 +555,7 @@ declare module '@cubejs-client/react' {
    * ```js
    * <QueryBuilder
    *   // ...
-   *   cubejsApi={cubejsApi}
+   *   cubeApi={cubeApi}
    *   render={({
    *     // ...
    *     availableMeasures,
@@ -595,7 +584,7 @@ declare module '@cubejs-client/react' {
    * ```js
    * <QueryBuilder
    *   // ...
-   *   cubejsApi={cubejsApi}
+   *   cubeApi={cubeApi}
    *   render={({
    *     // ...
    *     measures,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cubejs-client/react",
-  "version": "0.34.60",
+  "version": "0.35.0",
   "author": "Cube Dev, Inc.",
   "license": "MIT",
   "engines": {},
@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@cubejs-client/core": "^0.34.60",
+    "@cubejs-client/core": "^0.35.0",
     "core-js": "^3.6.5",
     "ramda": "^0.27.2"
   },
@@ -42,5 +42,5 @@
   "peerDependencies": {
     "react": ">=16.10.2"
   },
-  "gitHead": "7434929be3e99eb1d1fbb8a6b6c7f2427c6fcae6"
+  "gitHead": "75bc6c3d96392b7823e714d17ac85ab435e55b05"
 }

package/src/CubeProvider.jsx

@@ -1,16 +1,9 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import CubeContext from './CubeContext';
 
-export default function CubeProvider({ cubeApi, cubejsApi, children, options = {} }) {
-  useEffect(() => {
-    if (cubejsApi && !cubeApi) {
-      console.warn('"cubejsApi" is deprecated and will be removed in the following version. Use "cubeApi" instead.');
-    }
-  }, [cubeApi, cubejsApi]);
-  
+export default function CubeProvider({ cubeApi, children, options = {} }) {
   return (
     <CubeContext.Provider value={{
-      cubejsApi,
       cubeApi,
       options
     }}

package/src/QueryBuilder.jsx

@@ -33,7 +33,7 @@ export default class QueryBuilder extends React.Component {
   static contextType = CubeContext;
 
   static defaultProps = {
-    cubejsApi: null,
+    cubeApi: null,
     stateChangeHeuristics: null,
     disableHeuristics: false,
     render: null,
@@ -136,14 +136,14 @@ export default class QueryBuilder extends React.Component {
     const { schemaVersion, onSchemaChange } = this.props;
     const { meta } = this.state;
 
-    if (this.prevContext?.cubejsApi !== this.context?.cubejsApi) {
+    if (this.prevContext?.cubeApi !== this.context?.cubeApi) {
       this.prevContext = this.context;
       await this.fetchMeta();
     }
 
     if (prevProps.schemaVersion !== schemaVersion) {
       try {
-        const newMeta = await this.cubejsApi().meta();
+        const newMeta = await this.cubeApi().meta();
         if (!equals(newMeta, meta) && typeof onSchemaChange === 'function') {
           onSchemaChange({
             schemaVersion,
@@ -160,7 +160,7 @@ export default class QueryBuilder extends React.Component {
   }
 
   fetchMeta = async () => {
-    if (!this.cubejsApi()) {
+    if (!this.cubeApi()) {
       return;
     }
 
@@ -171,7 +171,7 @@ export default class QueryBuilder extends React.Component {
 
     try {
       this.setState({ isFetchingMeta: true });
-      meta = await this.cubejsApi().meta();
+      meta = await this.cubeApi().meta();
     } catch (error) {
       metaError = error.response?.plainError || error;
       richMetaError = error;
@@ -194,10 +194,10 @@ export default class QueryBuilder extends React.Component {
     );
   };
 
-  cubejsApi() {
-    const { cubejsApi } = this.props;
+  cubeApi() {
+    const { cubeApi } = this.props;
     // eslint-disable-next-line react/destructuring-assignment
-    return cubejsApi || (this.context && this.context.cubejsApi);
+    return cubeApi || (this.context && this.context.cubeApi);
   }
 
   getMissingMembers(query, meta) {
@@ -522,7 +522,7 @@ export default class QueryBuilder extends React.Component {
 
     if (shouldFetchDryRun && isQueryPresent(finalState.query) && finalState.missingMembers.length === 0) {
       try {
-        const response = await this.cubejsApi().dryRun(finalState.query, {
+        const response = await this.cubeApi().dryRun(finalState.query, {
           mutexObj: this.mutexObj,
         });
 
@@ -577,13 +577,13 @@ export default class QueryBuilder extends React.Component {
 
   render() {
     const { query } = this.state;
-    const { cubejsApi, render, wrapWithQueryRenderer } = this.props;
+    const { cubeApi, render, wrapWithQueryRenderer } = this.props;
 
     if (wrapWithQueryRenderer) {
       return (
         <QueryRenderer
           query={query}
-          cubejsApi={cubejsApi}
+          cubeApi={cubeApi}
           resetResultSetOnChange={false}
           render={(queryRendererProps) => {
             if (render) {

package/src/QueryRenderer.jsx

@@ -8,7 +8,7 @@ export default class QueryRenderer extends React.Component {
   static contextType = CubeContext;
 
   static defaultProps = {
-    cubejsApi: null,
+    cubeApi: null,
     query: null,
     render: null,
     queries: null,
@@ -40,7 +40,7 @@ export default class QueryRenderer extends React.Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     const {
-      query, queries, render, cubejsApi, loadSql, updateOnlyOnStateChange
+      query, queries, render, cubeApi, loadSql, updateOnlyOnStateChange
     } = this.props;
     if (!updateOnlyOnStateChange) {
       return true;
@@ -48,7 +48,7 @@ export default class QueryRenderer extends React.Component {
     return !equals(nextProps.query, query)
       || !equals(nextProps.queries, queries)
       || ((nextProps.render == null || render == null) && nextProps.render !== render)
-      || nextProps.cubejsApi !== cubejsApi
+      || nextProps.cubeApi !== cubeApi
       || nextProps.loadSql !== loadSql
       || !equals(nextState, this.state)
       || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
@@ -65,9 +65,9 @@ export default class QueryRenderer extends React.Component {
     }
   }
 
-  cubejsApi() {
+  cubeApi() {
     // eslint-disable-next-line react/destructuring-assignment
-    return this.props.cubejsApi || this.context && this.context.cubejsApi;
+    return this.props.cubeApi || this.context && this.context.cubeApi;
   }
 
   load(query) {
@@ -79,11 +79,11 @@ export default class QueryRenderer extends React.Component {
       ...(resetResultSetOnChange ? { resultSet: null } : {})
     });
     const { loadSql } = this.props;
-    const cubejsApi = this.cubejsApi();
+    const cubeApi = this.cubeApi();
 
     if (query && isQueryPresent(query)) {
       if (loadSql === 'only') {
-        cubejsApi.sql(query, { mutexObj: this.mutexObj, mutexKey: 'sql' })
+        cubeApi.sql(query, { mutexObj: this.mutexObj, mutexKey: 'sql' })
           .then(sqlQuery => this.setState({ sqlQuery, error: null, isLoading: false }))
           .catch(error => this.setState({
             ...(resetResultSetOnChange ? { resultSet: null } : {}),
@@ -92,8 +92,8 @@ export default class QueryRenderer extends React.Component {
           }));
       } else if (loadSql) {
         Promise.all([
-          cubejsApi.sql(query, { mutexObj: this.mutexObj, mutexKey: 'sql' }),
-          cubejsApi.load(query, { mutexObj: this.mutexObj, mutexKey: 'query' })
+          cubeApi.sql(query, { mutexObj: this.mutexObj, mutexKey: 'sql' }),
+          cubeApi.load(query, { mutexObj: this.mutexObj, mutexKey: 'query' })
         ]).then(([sqlQuery, resultSet]) => this.setState({
           sqlQuery, resultSet, error: null, isLoading: false
         }))
@@ -103,7 +103,7 @@ export default class QueryRenderer extends React.Component {
             isLoading: false
           }));
       } else {
-        cubejsApi.load(query, { mutexObj: this.mutexObj, mutexKey: 'query' })
+        cubeApi.load(query, { mutexObj: this.mutexObj, mutexKey: 'query' })
           .then(resultSet => this.setState({ resultSet, error: null, isLoading: false }))
           .catch(error => this.setState({
             ...(resetResultSetOnChange ? { resultSet: null } : {}),
@@ -115,7 +115,7 @@ export default class QueryRenderer extends React.Component {
   }
 
   loadQueries(queries) {
-    const cubejsApi = this.cubejsApi();
+    const cubeApi = this.cubeApi();
     const { resetResultSetOnChange } = this.props;
     this.setState({
       isLoading: true,
@@ -124,7 +124,7 @@ export default class QueryRenderer extends React.Component {
     });
 
     const resultPromises = Promise.all(toPairs(queries).map(
-      ([name, query]) => cubejsApi.load(query, { mutexObj: this.mutexObj, mutexKey: name }).then(r => [name, r])
+      ([name, query]) => cubeApi.load(query, { mutexObj: this.mutexObj, mutexKey: name }).then(r => [name, r])
     ));
 
     resultPromises

package/src/hooks/cube-fetch.js

@@ -19,7 +19,7 @@ export function useCubeFetch(method, options = {}) {
   const { skip = false } = options;
 
   async function load(loadOptions = {}, ignoreSkip = false) {
-    const cubeApi = options.cubeApi || options.cubejsApi || context?.cubeApi || context?.cubejsApi;
+    const cubeApi = options.cubeApi || context?.cubeApi;
     const query = loadOptions.query || options.query;
 
     const queryCondition = method === 'meta' ? true : query && isQueryPresent(query);

package/src/hooks/cube-query.js

@@ -18,16 +18,10 @@ export function useCubeQuery(query, options = {}) {
   let subscribeRequest = null;
 
   const progressCallback = ({ progressResponse }) => setProgress(progressResponse);
-  
-  useEffect(() => {
-    if (options.cubejsApi && !options.cubeApi) {
-      console.warn('"cubejsApi" is deprecated and will be removed in the following version. Use "cubeApi" instead.');
-    }
-  }, [options.cubeApi, options.cubejsApi]);
 
   async function fetch() {
     const { resetResultSetOnChange } = options;
-    const cubeApi = options.cubeApi || options.cubejsApi || context?.cubeApi || context?.cubejsApi;
+    const cubeApi = options.cubeApi || context?.cubeApi;
 
     if (!cubeApi) {
       throw new Error('Cube API client is not provided');
@@ -68,7 +62,7 @@ export function useCubeQuery(query, options = {}) {
   useEffect(() => {
     const { skip = false, resetResultSetOnChange } = options;
 
-    const cubeApi = options.cubeApi || options.cubejsApi || context?.cubeApi || context?.cubejsApi;
+    const cubeApi = options.cubeApi || context?.cubeApi;
 
     if (!cubeApi) {
       throw new Error('Cube API client is not provided');