Query from a React app

Wire a React app to Cube Cloud REST or GraphQL endpoints using the JavaScript client libraries and deployment-scoped URLs.

Cube offers both REST and GraphQL APIs, which can be used to query data from applications built in React or other frontend frameworks.

You can find your REST API endpoint on the Overview page. In development mode, Cube creates an isolated endpoint for testing data model changes without affecting production. The structure of your REST API endpoint in development mode should follow the format below.

https://<deployment-id>.<region>.cubecloudapp.dev/dev-mode/<dev-branch-name>/cubejs-api/v1

To test your REST API from your terminal, you can use curl. Click on “How to connect your application” next to the REST API, and it will display a code snippet that you can run in your terminal to test the endpoint with curl.

Cube offers a frontend JavaScript SDK, as well as a React integration that you can use in your application.

First, you’ll need to install two packages from npm:

• @cubejs-client/core
• @cubejs-client/react

Next, initialize cubeApi within your application.

Please note that you must sign your request with the correct authentication token. Cube uses the JSON Web Token (JWT) standard by default to authenticate requests. You can copy a temporary token from the “How to connect to your application” modal window. For production use, you must generate this token from your secret key. You can learn more about this in the Authentication & Authorization section of the documentation.

import cube from "@cubejs-client/core";

const cubeApi = cube("your-token", {
  apiUrl:
    "https://<delpoyment-id>.<region>.cubecloudapp.dev/dev-mode/<dev-branch-name>/cubejs-api/v1",
});

The Cube React package includes a CubeProvider that can be used in your React application.

import { CubeProvider } from "@cubejs-client/react";

<CubeProvider cubeApi={cubeApi}>// your application</CubeProvider>;

Finally, you can use the useCubeQuery hook to load data from Cube into your React application.

import { useCubeQuery } from '@cubejs-client/react';
...
const { resultSet, isLoading, error, progress } = useCubeQuery({
  "measures": ["orders_view.completed_count"],
	"timeDimensions": [
    {
      "dimension": "orders_view.created_at",
      "granularity": "month"
    }
  ]
});

For more information on the JavaScript SDK and integration with React, please refer to the documentation.