cube-js / cube-js/cube

[cubejs-client-react] React 18: useCubeQuery isLoading false before resultSet

Open
#9,935 5 comments 0 reactions 0 assignees View on GitHub
client:react
Dominant language
Rust
Stars
20.8k
Forks
2.1k
Avg merge
1d 2h
Merged PRs (30d)
181

Description

**Describe the bug**
useCubeQuery isLoading is set to false early when using React 18.

**To Reproduce**

Steps to reproduce the behavior:

With a fork of React sandbox from the [Cubejs React docs](https://cube.dev/docs/frontend-introduction/react#introduction-for-react-developers) updated to use React 18 [here](https://codesandbox.io/p/devbox/cube-js-react-client-forked-mygf7q?from-embed=)

1. Load the Sandbox
2. Open the Sandbox console view
3. View the properties output in the console

**Expected behavior**
The `isLoading` should remain `true` until the `raw` data value is an array (this is what we see when the sandbox example uses React 16).

**Actual behavior**
The `isLoading` becomes `true` while `raw` data value is still null (with React 18 dependency)

**Screenshots**

Image

**Minimally reproducible Cube Schema**
See the linked sandbox instance. The significant code is:

```jsx
const App = () => {
// Query data from Cube.js Backend
const { resultSet, isLoading, error, progress } = useCubeQuery({
measures: ["Orders.count"],
dimensions: ["ProductCategories.name"],
filters: [
{
member: "ProductCategories.name",
operator: "equals",
values: ["Electronics"],
},
],
timeDimensions: [
{
dimension: "Orders.createdAt",
granularity: "month",
dateRange: ["2022-01-01", "2023-01-01"],
},
],
});

const raw = resultSet?.rawData();

React.useEffect(() => {
console.log({ isLoading, raw, time: performance.now() });
}, [isLoading, raw]);

if (isLoading) {
return (


{(progress && progress.stage && progress.stage.stage) || "Loading..."}

);
}

if (error) {
return

{error.toString()}
;
}

return

{JSON.stringify(raw, null, 2)}
;
};

```

**Version:**
@cubejs-client: @latest
React: 18
Chrome: 139.0.7258.155
MS Edge: 139.0.3405.125

**Additional context**
I can reproduce this issue as a minimal test case in our own project as well as the sandbox. This occurs with both dev and production builds.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.