Repository: tannerlinsley/react-query
Pull request #1449 (2020-12-16 08:22:36)

fix: always render the latest observer state
Fixes https://github.com/tannerlinsley/react-query/issues/1413

vercel[bot]: This pull request is being automatically deployed with Vercel ([learn more](https://vercel.link/github-learn-more)).  
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: [https://vercel.com/tannerlinsley/react-query/9i89t3q8n](https://vercel.com/tannerlinsley/react-query/9i89t3q8n)  
✅ Preview: *In Progress*



Patch:
diff --git a/src/react/useBaseQuery.ts b/src/react/useBaseQuery.ts
index 75e320964..c31f64dc9 100644
--- a/src/react/useBaseQuery.ts
+++ b/src/react/useBaseQuery.ts
@@ -53,14 +53,13 @@ export function useBaseQuery<TData, TError, TQueryFnData, TQueryData>(
     observer.setOptions(defaultedOptions)
   }
 
-  const [currentResult, setCurrentResult] = React.useState(() =>
-    observer.getCurrentResult()
-  )
+  const [, rerender] = React.useState({})
+  const currentResult = observer.getCurrentResult()
 
   // Subscribe to the observer
   React.useEffect(() => {
     errorResetBoundary.clearReset()
-    return observer.subscribe(notifyManager.batchCalls(setCurrentResult))
+    return observer.subscribe(notifyManager.batchCalls(rerender))
   }, [observer, errorResetBoundary])
 
   // Handle suspense


Test patch:
diff --git a/src/react/tests/useInfiniteQuery.test.tsx b/src/react/tests/useInfiniteQuery.test.tsx
index a0558b3a3..86cdee785 100644
--- a/src/react/tests/useInfiniteQuery.test.tsx
+++ b/src/react/tests/useInfiniteQuery.test.tsx
@@ -238,10 +238,10 @@ describe('useInfiniteQuery', () => {
     // Set state
     expect(states[4]).toMatchObject({
       data: { pages: ['0-desc', '1-desc'] },
-      isFetching: false,
+      isFetching: true,
       isFetchingNextPage: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPreviousData: true,
     })
     expect(states[5]).toMatchObject({
       data: { pages: ['0-desc', '1-desc'] },
@@ -842,7 +842,7 @@ describe('useInfiniteQuery', () => {
     // Set state
     expect(states[2]).toMatchObject({
       hasNextPage: true,
-      data: { pages: [0] },
+      data: { pages: [7, 8] },
       isFetching: false,
       isFetchingNextPage: false,
       isSuccess: true,
diff --git a/src/react/tests/useQuery.test.tsx b/src/react/tests/useQuery.test.tsx
index 6f73279e6..4c53f047c 100644
--- a/src/react/tests/useQuery.test.tsx
+++ b/src/react/tests/useQuery.test.tsx
@@ -558,7 +558,7 @@ describe('useQuery', () => {
     // First success
     expect(states[1]).toMatchObject({ isLoading: false, isSuccess: true })
     // Switch
-    expect(states[2]).toMatchObject({ isLoading: false, isSuccess: true })
+    expect(states[2]).toMatchObject({ isLoading: true, isSuccess: false })
     // Second load
     expect(states[3]).toMatchObject({ isLoading: true, isSuccess: false })
     // Second success
@@ -758,7 +758,7 @@ describe('useQuery', () => {
     // Fetched
     expect(states[1]).toMatchObject({ data: 1 })
     // Rerender
-    expect(states[2]).toMatchObject({ data: 1 })
+    expect(states[2]).toMatchObject({ data: undefined })
     // Switch
     expect(states[3]).toMatchObject({ data: undefined })
     // Fetched
@@ -1087,9 +1087,9 @@ describe('useQuery', () => {
     // Set state
     expect(states[2]).toMatchObject({
       data: 0,
-      isFetching: false,
+      isFetching: true,
       isSuccess: true,
-      isPreviousData: false,
+      isPreviousData: true,
     })
     // Previous data
     expect(states[3]).toMatchObject({
@@ -1155,9 +1155,9 @@ describe('useQuery', () => {
     // Set state
     expect(states[2]).toMatchObject({
       data: 0,
-      isFetching: false,
+      isFetching: true,
       isSuccess: true,
-      isPreviousData: false,
+      isPreviousData: true,
     })
     // Previous data
     expect(states[3]).toMatchObject({
@@ -1240,7 +1240,7 @@ describe('useQuery', () => {
       data: 0,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPreviousData: true,
     })
     // Switched query key
     expect(states[4]).toMatchObject({
@@ -1322,7 +1322,7 @@ describe('useQuery', () => {
       data: 10,
       isFetching: false,
       isSuccess: true,
-      isPreviousData: false,
+      isPreviousData: true,
     })
     // Switched query key
     expect(states[2]).toMatchObject({
@@ -2112,7 +2112,7 @@ describe('useQuery', () => {
     // Initial
     expect(states[0]).toMatchObject({ data: { count: 0 } })
     // Set state
-    expect(states[1]).toMatchObject({ data: { count: 0 } })
+    expect(states[1]).toMatchObject({ data: { count: 1 } })
     // Update
     expect(states[2]).toMatchObject({ data: { count: 1 } })
   })