Merge pull request #6262 from marmelab/Fix-usequerywithstore-enabled-…

…loaded Fix useQueryWithStore outputs incorrect loaded field when enabled is false
marmelab · May 10, 2021 · e23e30f · e23e30f
2 parents 080fff6 + 92270b7
commit e23e30f
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 7 deletions.
diff --git a/packages/ra-core/src/dataProvider/useQueryWithStore.spec.tsx b/packages/ra-core/src/dataProvider/useQueryWithStore.spec.tsx
@@ -55,6 +55,12 @@ describe('useQueryWithStore', () => {
         expect(callArgs.error).toBeNull();
         expect(callArgs.total).toBeNull();
 
+        await new Promise(resolve => setImmediate(resolve)); // wait for useEffect
+        callArgs = callback.mock.calls[1][0];
+        expect(callArgs.loading).toEqual(false);
+        expect(callArgs.loaded).toEqual(false);
+
+        callback.mockClear();
         rerender(
             <DataProviderContext.Provider value={dataProvider}>
                 <UseQueryWithStore
@@ -64,16 +70,43 @@ describe('useQueryWithStore', () => {
             </DataProviderContext.Provider>,
             { admin: { resources: { posts: { data: {} } } } }
         );
-        await new Promise(resolve => setImmediate(resolve)); // dataProvider Promise returns result on next tick
-        callArgs = callback.mock.calls[2][0];
+        callArgs = callback.mock.calls[0][0];
+        expect(callArgs.data).toBeUndefined();
+        expect(callArgs.loading).toEqual(false);
+        expect(callArgs.loaded).toEqual(false);
+        expect(callArgs.error).toBeNull();
+        expect(callArgs.total).toBeNull();
+
+        callback.mockClear();
+        await new Promise(resolve => setImmediate(resolve)); // wait for useEffect
+        callArgs = callback.mock.calls[0][0];
         expect(callArgs.data).toBeUndefined();
         expect(callArgs.loading).toEqual(true);
         expect(callArgs.loaded).toEqual(false);
         expect(callArgs.error).toBeNull();
         expect(callArgs.total).toBeNull();
 
-        await new Promise(resolve => setImmediate(resolve)); // dataProvider Promise returns result on next tick
-        callArgs = callback.mock.calls[4][0];
+        callArgs = callback.mock.calls[1][0];
+        expect(callArgs.data).toEqual({
+            id: 1,
+            title: 'titleFromDataProvider',
+        });
+        expect(callArgs.loading).toEqual(false);
+        expect(callArgs.loaded).toEqual(true);
+        expect(callArgs.error).toBeNull();
+        expect(callArgs.total).toBeNull();
+
+        callback.mockClear();
+        rerender(
+            <DataProviderContext.Provider value={dataProvider}>
+                <UseQueryWithStore
+                    callback={callback}
+                    options={{ enabled: false }}
+                />
+            </DataProviderContext.Provider>,
+            { admin: { resources: { posts: { data: {} } } } }
+        );
+        callArgs = callback.mock.calls[0][0];
         expect(callArgs.data).toEqual({
             id: 1,
             title: 'titleFromDataProvider',
@@ -82,6 +115,14 @@ describe('useQueryWithStore', () => {
         expect(callArgs.loaded).toEqual(true);
         expect(callArgs.error).toBeNull();
         expect(callArgs.total).toBeNull();
+
+        callback.mockClear();
+        await new Promise(resolve => setImmediate(resolve)); // wait for useEffect
+        callArgs = callback.mock.calls[0][0];
+        expect(callArgs.loading).toEqual(false);
+        expect(callArgs.loaded).toEqual(false);
+        expect(callArgs.error).toBeNull();
+        expect(callArgs.total).toBeNull();
     });
 
     it('should return data from dataProvider', async () => {

diff --git a/packages/ra-core/src/dataProvider/useQueryWithStore.ts b/packages/ra-core/src/dataProvider/useQueryWithStore.ts
@@ -145,7 +145,7 @@ export const useQueryWithStore = <State extends ReduxState = ReduxState>(
         total,
         error: null,
         loading: options?.enabled === false ? false : true,
-        loaded: isDataLoaded(data),
+        loaded: options?.enabled === false ? false : isDataLoaded(data),
         refetch,
     });
 
@@ -158,7 +158,7 @@ export const useQueryWithStore = <State extends ReduxState = ReduxState>(
                 total,
                 error: null,
                 loading: options?.enabled === false ? false : true,
-                loaded: isDataLoaded(data),
+                loaded: options?.enabled === false ? false : isDataLoaded(data),
                 refetch,
             });
         } else if (!isEqual(state.data, data) || state.total !== total) {
@@ -217,7 +217,8 @@ export const useQueryWithStore = <State extends ReduxState = ReduxState>(
                             resolve({
                                 error: null,
                                 loading: false,
-                                loaded: true,
+                                loaded:
+                                    options?.enabled === false ? false : true,
                             });
                         })
                         .catch(error => {