React-admin: Editing a record throws Total from response is not a number error

[josephktcheung]

What you were expecting:

Expect it won't log any error in console when changing filter on a ReferenceManyField
What happened instead:

Total from response is not a number error is shown in console when filter prop is changed on ReferenceManyField
Steps to reproduce:

1. Go to codesandbox https://codesandbox.io/s/elastic-surf-urpjz
2. Edit a post -> go to comments tab
3. I added a body filter to filter comments in the comments tab in PostEdit.js. Change the body filter by typing some characters
4. Total from response is not a number. Please check your dataProvider or the API error is thrown in console

Related code:

https://codesandbox.io/s/elastic-surf-urpjz

Other information:

This is the line which throws the error https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/dataProvider/useQueryWithStore.ts#L121.

I wonder if the check here https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/dataProvider/useQueryWithStore.ts#L119-L120 is suitable for useGetManyReference / ReferenceManyField.

When the filter prop is changed, useGetManyReference will use a new relatedTo to select ids & total from store, but we are comparing them against the old relatedTo (generated using old filter prop)'s ids & total.

Environment

• React-admin version: Latest
• Last version that did not exhibit the issue (if applicable):
• React version:
• Browser:
• Stack trace (in case of a JS error):

Total from response is not a number. Please check your dataProvider or the API. 
    in Anonymous (at PostEdit.js:151)
    in PostEdit (created by WithPermissions)
    in WithPermissions (created by Router.Consumer)
    in Router.Consumer (created by Route)
    in Route (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at src/​index.js:40)

[djhi]

Thanks for the bug report and the sandbox. Reproduced

[nacimgoura]

Same error when I edit one element

[wmwart]

the same when updating with a redirect to the list view.
in ra-core version 3.2.4 everything was fine.

a problem withuseQueryWithStore.js

Total from response is not a number. Please check your dataProvider or the API. 
    in TagList (created by WithPermissions)
    in WithPermissions (created by Router.Consumer)
    in Router.Consumer (created by Route)
    in Route (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at App.js:96)
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
useQueryWithStore @ useQueryWithStore.js:120
useGetList @ useGetList.js:45
useListController @ useListController.js:71
TagList @ TagList.js:30
renderWithHooks @ react-dom.development.js:16241
updateFunctionComponent @ react-dom.development.js:18328
beginWork$1 @ react-dom.development.js:20151
beginWork$$1 @ react-dom.development.js:25714
performUnitOfWork @ react-dom.development.js:24662
workLoopSync @ react-dom.development.js:24638
performSyncWorkOnRoot @ react-dom.development.js:24237
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
batchedUpdates$1 @ react-dom.development.js:24359
notify @ Subscription.js:19
notifyNestedSubs @ Subscription.js:92
handleChangeWrapper @ Subscription.js:97
dispatch @ redux.js:222
(anonymous) @ middleware.js:22
(anonymous) @ redux-saga-core.esm.js:1410
performQuery @ useDataProvider.js:348
doQuery @ useDataProvider.js:195
(anonymous) @ useDataProvider.js:326
replayOptimisticCalls @ useDataProvider.js:325
(anonymous) @ useDataProvider.js:283
Promise.then (async)
(anonymous) @ useDataProvider.js:268
emit @ index.js:181
(anonymous) @ Notification.js:60
chainedFunction @ createChainedFunction.js:32
(anonymous) @ Transition.js:301
nextCallback @ Transition.js:331
callCallback @ react-dom.development.js:13810
commitUpdateEffects @ react-dom.development.js:13848
commitUpdateQueue @ react-dom.development.js:13836
commitLifeCycles @ react-dom.development.js:22102
commitLayoutEffects @ react-dom.development.js:25302
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25040
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
commitRoot @ react-dom.development.js:24889
finishSyncRender @ react-dom.development.js:24296
performSyncWorkOnRoot @ react-dom.development.js:24274
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
scheduleUpdateOnFiber @ react-dom.development.js:23676
enqueueSetState @ react-dom.development.js:13975
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:325
safeSetState @ Transition.js:319
(anonymous) @ Transition.js:298
nextCallback @ Transition.js:331
setTimeout (async)
onTransitionEnd @ Transition.js:356
(anonymous) @ Transition.js:297
nextCallback @ Transition.js:331
callCallback @ react-dom.development.js:13810
commitUpdateEffects @ react-dom.development.js:13848
commitUpdateQueue @ react-dom.development.js:13836
commitLifeCycles @ react-dom.development.js:22102
commitLayoutEffects @ react-dom.development.js:25302
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25040
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
commitRoot @ react-dom.development.js:24889
finishSyncRender @ react-dom.development.js:24296
performSyncWorkOnRoot @ react-dom.development.js:24274
(anonymous) @ react-dom.development.js:12180
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12130
flushSyncCallbackQueueImpl @ react-dom.development.js:12175
flushSyncCallbackQueue @ react-dom.development.js:12163
scheduleUpdateOnFiber @ react-dom.development.js:23676
dispatchAction @ react-dom.development.js:17057
(anonymous) @ Notification.js:55
handleClickAway @ Snackbar.js:187
(anonymous) @ ClickAwayListener.js:69
(anonymous) @ useEventCallback.js:15

[meastp]

Same error using DeleteButton and BulkDeleteButton. Also, I get this error afterwards: TypeError: record is undefined - with deletemany there shouldn't be a single record. Also, a valid response from delete and deleteMany (according to the docs) is null.

[JulienMattiussi]

I tried to reproduce with your sandBox but unsuccessfully.

(I also forked it to avoid a deprecation message and to have a displayed filter comments more clear for me, but besides that, it's the same)
https://codesandbox.io/s/loving-pascal-pfsge

I also tried some Delete and BulkDelete on it. But I can't see the described error.

Maybe this have been already fixed with later versions ?
Or just the sandbox have changed and don't represent this issue anymore ?
Any advice to reproduce it ?

[josephktcheung]

@JulienMattiussi I think it's fixed by these lines https://github.com/marmelab/react-admin/blob/master/packages/ra-core/src/dataProvider/useQueryWithStore.ts#L121-L130 which is released in 3.3.0

[josephktcheung]

I'm closing this issue. Can anyone try upgrading to 3.3.0 and see if it's fixed for your project? Thanks

[nacimgoura]

I use react-admin 3.3.0 and I still have this error.

[josephktcheung]

@nacimgoura can you reproduce it in another codesandbox for your use case?

[josephktcheung]

Okay I have reproduced it. v3.3.0 solved the ReferenceManyField issue but the same error appears multiple times after I update a post. Attached gif:

[nacimgoura]

Thanks you @josephktcheung

[christianlusardi]

Same error using BulkDeleteButton and redirect to a list view

[poerwiyanto]

Hi, I am still learning to use react-admin. I got the same error after I deleted or edited a record. It also happened when I try to update a record in React-Admin tutorial (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/tutorial). Is there any solution for this issue? Thanks.

[JulienMattiussi]

The bug was introduced in 3.3.0
It's happens only if undoable={true]
We're working on it

[tarcisiobruni]

Same error here. Thanks @JulienMattiussi

[bateview]

The error is introduced even when you are deleting an object.

[fzaninotto]

But it's fixed in 3.3.3, right?

[dhstack]

It is fixed for me in 3.3.3.

[maier-stefan]

3.3.3 does not fix it for me....

[fzaninotto]

@maier-stefan Can you please post a CodeSandbox showing the error in 3.3.3?

[maier-stefan]

OK i got it now running.
I think it was mostly because of my backend (migrated from 2.x.x to 3.3.3)
But still have an issue, ideal i want to use the "simpleRestProvider" as before. but it does not work and still get the total count error, even i return the headers. But with the jsonServerProvider it works.
What could be the issue here?

```import { fetchUtils } from "ra-core";
//import simpleRestProvider from "ra-data-simple-rest";
import jsonServerProvider from "ra-data-json-server";
import { config } from "./config";

const httpClient = (url, options = {}) => {
if (!options.headers) {
options.headers = new Headers({
Accept: "application/json"
});
}
const token = localStorage.getItem("token");
options.headers.set("Authorization", Bearer ${token});
return fetchUtils.fetchJson(url, options);
};

export default jsonServerProvider(config.apiBaseUrl, httpClient);
```

[fzaninotto]

@maier-stefan For troubleshooting, please use StackOverflow. This bug tracker is for bugs only.