useCubeQuery returns stale result even if resetResultSetOnChange is set

[nevnein]

Describe the bug
Changing the query passed to useCubeQuery causes the latter to return the old value even if resetResultSetOnChange is set to true

To Reproduce
Steps to reproduce the behavior:

1. Create some query and pass it to useCubeQuery, then log both the query and the results, something like this

const result = useCubeQuery(query, { resetResultSetOnChange: true })

console.log('Test query: ', query)
console.log('Test result: ', result)

2. Change the query in any way, eg. user interaction
3. See logs

Expected behavior
I expect the resultSet to be null if the passed query has changed (I guess isLoading should be true, either)

Screenshots
You can see from the following screenshot that even though the query changed (there's a filter in the second one), the returned resultSet is the same (actually the whole object is the same), then after a third render the result is the one expected (last two lines).

Version:
0.30.64

[github-actions]

If you are interested in working on this issue, please leave a comment below and we will be happy to assign the issue to you.
If this is the first time you are contributing a Pull Request to Cube.js, please check our contribution guidelines.
You can also post any questions while contributing in the #contributors channel in the Cube.js Slack.

[runoncedev]

Having the same problem, anyone found a solution?

[nevnein]

Having the same problem, anyone found a solution?

I ended up writing my own data fetching hook wrapping @cubejs-client/core, works for my use case but it's still missing some functionality. Eventually I'll open a PR, but in the meantime you can do the same, it's kinda simple to wrap cubejsApi.load() and make it behave how you want to.

[markuskolp]

I'm having the same problem as well.
I would like to keep using the useCubeQuery hook - any new ideas?

If not: @nevnein : can you share the code for your wrapping of cubejsApi.load() ?

Thanks!

[markuskolp]

Hi, I took the useCubeQuery() source itself to make my own wrapper now (

cube/packages/cubejs-client-react/src/hooks/cube-query.js

Line 8 in f29c592

export function useCubeQuery(query, options = {}) {

)

The deep compare in the useEffect() is not working for me, as it can't see a difference when the "query" object changes and therefore won't make a new fetch. A workaround was to put one or more of the object properties into the dependency e.g. query.limit. Not nice but works. I'am new to react so I still struggle with understanding the rerendering of hooks ;-)

useEffect(() => {
...
}, [query.limit, query.filters, query.measures, query.order, query.segments]);