Repository: tannerlinsley/react-query
Pull request #3532 (2022-04-19 16:08:10)

Exposing errorUpdateCount on useQuery
exposing errorUpdateCount state,

vercel[bot]: **The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated |
| :--- | :----- | :------ | :------ |
| **react-query** | 🔄 Building ([Inspect](https://vercel.com/tanstack/react-query/8FCLEgQHujkoQbKnBzvMm5fTYLGM)) |  | Apr 19, 2022 at 4:08PM (UTC) |


codesandbox[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/tannerlinsley/react-query/pr/3532/builds/241214) or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a5aee5ae6de0c305eef9e13bb17e38cb73d2ecfd:

|Sandbox| Source |
|--|--|
|[tannerlinsley/react-query: basic](https://codesandbox.io/s/tannerlinsley-react-query-basic-fn7bqv)| Configuration |
|[tannerlinsley/react-query](https://codesandbox.io/s/tannerlinsley-react-query-grwii7)| Configuration |

TkDodo: please check prettier:

```
> react-query@1.0.0-semantic-release test:format
> yarn prettier --check

$ prettier "{.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,ts,tsx,json}" --check
Checking formatting...
[warn] src/react/tests/useQuery.test.tsx
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
```
TkDodo: some test are failing - please add `errorUpdateCount` to the failing tests
OmerCohenAviv: > now there are conflicts, sorry 🙈 . can you please resolve them?

hopefully it's ok now sorry for trouble 

Patch:
diff --git a/docs/src/pages/reference/useQuery.md b/docs/src/pages/reference/useQuery.md
index e55ef3f4e..b9751c3c8 100644
--- a/docs/src/pages/reference/useQuery.md
+++ b/docs/src/pages/reference/useQuery.md
@@ -238,6 +238,8 @@ const result = useQuery({
   - The failure count for the query.
   - Incremented every time the query fails.
   - Reset to `0` when the query succeeds.
+- `errorUpdateCount: number`
+  - The sum of all errors.
 - `refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>`
   - A function to manually refetch the query.
   - If the query errors, the error will only be logged. If you want an error to be thrown, pass the `throwOnError: true` option
diff --git a/src/core/queryObserver.ts b/src/core/queryObserver.ts
index 439752a9a..c3fa0f683 100644
--- a/src/core/queryObserver.ts
+++ b/src/core/queryObserver.ts
@@ -594,6 +594,7 @@ export class QueryObserver<
       error,
       errorUpdatedAt,
       failureCount: state.fetchFailureCount,
+      errorUpdateCount: state.errorUpdateCount,
       isFetched: state.dataUpdateCount > 0 || state.errorUpdateCount > 0,
       isFetchedAfterMount:
         state.dataUpdateCount > queryInitialState.dataUpdateCount ||
diff --git a/src/core/types.ts b/src/core/types.ts
index 25a2b9027..63d04d5e6 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -328,6 +328,7 @@ export interface QueryObserverBaseResult<TData = unknown, TError = unknown> {
   error: TError | null
   errorUpdatedAt: number
   failureCount: number
+  errorUpdateCount: number
   isError: boolean
   isFetched: boolean
   isFetchedAfterMount: boolean
diff --git a/src/devtools/Explorer.tsx b/src/devtools/Explorer.tsx
index 48b214411..0c4ed4268 100644
--- a/src/devtools/Explorer.tsx
+++ b/src/devtools/Explorer.tsx
@@ -19,6 +19,16 @@ export const LabelButton = styled('button', {
   color: 'white',
 })
 
+export const ExpandButton = styled('button', {
+  cursor: 'pointer',
+  color: 'inherit',
+  font: 'inherit',
+  outline: 'inherit',
+  background: 'transparent',
+  border: 'none',
+  padding: 0,
+})
+
 export const Value = styled('span', (_props, theme) => ({
   color: theme.danger,
 }))
@@ -107,13 +117,13 @@ export const DefaultRenderer: Renderer = ({
     <Entry key={label}>
       {subEntryPages?.length ? (
         <>
-          <button onClick={() => toggleExpanded()}>
+          <ExpandButton onClick={() => toggleExpanded()}>
             <Expander expanded={expanded} /> {label}{' '}
             <Info>
               {String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : ''}
               {subEntries.length} {subEntries.length > 1 ? `items` : `item`}
             </Info>
-          </button>
+          </ExpandButton>
           {expanded ? (
             subEntryPages.length === 1 ? (
               <SubEntries>


Test patch:
diff --git a/src/react/tests/useInfiniteQuery.test.tsx b/src/react/tests/useInfiniteQuery.test.tsx
index 453142d29..8574c5027 100644
--- a/src/react/tests/useInfiniteQuery.test.tsx
+++ b/src/react/tests/useInfiniteQuery.test.tsx
@@ -73,6 +73,7 @@ describe('useInfiniteQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      errorUpdateCount: 0,
       fetchNextPage: expect.any(Function),
       fetchPreviousPage: expect.any(Function),
       hasNextPage: undefined,
@@ -103,6 +104,7 @@ describe('useInfiniteQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      errorUpdateCount: 0,
       fetchNextPage: expect.any(Function),
       fetchPreviousPage: expect.any(Function),
       hasNextPage: true,
diff --git a/src/react/tests/useQuery.test.tsx b/src/react/tests/useQuery.test.tsx
index e4d26912b..77341d186 100644
--- a/src/react/tests/useQuery.test.tsx
+++ b/src/react/tests/useQuery.test.tsx
@@ -169,6 +169,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      errorUpdateCount: 0,
       isError: false,
       isFetched: false,
       isFetchedAfterMount: false,
@@ -193,6 +194,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      errorUpdateCount: 0,
       isError: false,
       isFetched: true,
       isFetchedAfterMount: true,
@@ -247,6 +249,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 0,
+      errorUpdateCount: 0,
       isError: false,
       isFetched: false,
       isFetchedAfterMount: false,
@@ -271,6 +274,7 @@ describe('useQuery', () => {
       error: null,
       errorUpdatedAt: 0,
       failureCount: 1,
+      errorUpdateCount: 0,
       isError: false,
       isFetched: false,
       isFetchedAfterMount: false,
@@ -295,6 +299,7 @@ describe('useQuery', () => {
       error: 'rejected',
       errorUpdatedAt: expect.any(Number),
       failureCount: 2,
+      errorUpdateCount: 1,
       isError: true,
       isFetched: true,
       isFetchedAfterMount: true,