fix(use-data-query): enable swr by default

BREAKING CHANGE: loading will only be set to true when fetching and if there is no data. If there
is data, loading will be false during fetching. This means that stale data will be shown during
fetches by default. If you'd like to opt out of showing stale data during loading you can use the
new `fetching` attribute that is now returned by the useDataQuery hook instead.

Author: ismay

services/data/src/react/hooks/useDataQuery.test.tsx

@@ -1,5 +1,5 @@
 import { renderHook, act } from '@testing-library/react-hooks'
-import React from 'react'
+import * as React from 'react'
 import { CustomDataProvider } from '../components/CustomDataProvider'
 import { useDataQuery } from './useDataQuery'
 
@@ -471,7 +471,8 @@ describe('useDataQuery', () => {
 
             expect(mockSpy).toHaveBeenCalledTimes(2)
             expect(result.current).toMatchObject({
-                loading: true,
+                loading: false,
+                fetching: true,
                 called: true,
                 data: { x: 42 },
             })
@@ -481,6 +482,7 @@ describe('useDataQuery', () => {
             expect(mockSpy).toHaveBeenCalledTimes(2)
             expect(result.current).toMatchObject({
                 loading: false,
+                fetching: false,
                 called: true,
                 data: { x: 43 },
             })

services/data/src/react/hooks/useDataQuery.ts

@@ -73,15 +73,18 @@ export const useDataQuery = (
     const queryKey = [staticQuery, variables]
     const queryFn = () => engine.query(staticQuery, { variables })
 
-    const { isIdle, isFetching, error, data, refetch: queryRefetch } = useQuery(
-        queryKey,
-        queryFn,
-        {
-            enabled,
-            onSuccess,
-            onError,
-        }
-    )
+    const {
+        isIdle,
+        isFetching,
+        isLoading,
+        error,
+        data,
+        refetch: queryRefetch,
+    } = useQuery(queryKey, queryFn, {
+        enabled,
+        onSuccess,
+        onError,
+    })
 
     /**
      * Refetch allows a user to update the variables or just
@@ -143,7 +146,8 @@ export const useDataQuery = (
         engine,
         // A query is idle if it is lazy and no initial data is available.
         called: !isIdle,
-        loading: isFetching,
+        loading: isLoading,
+        fetching: isFetching,
         error: ourError,
         data,
         refetch,

services/data/src/types.ts

@@ -43,6 +43,7 @@ export interface ExecuteHookResult<ReturnType> {
 export interface QueryState {
     called: boolean
     loading: boolean
+    fetching: boolean
     error?: FetchError
     data?: QueryResult
 }