fix: always render the latest observer state (#1449)

TanStack · Dec 16, 2020 · 260ec62 · 260ec62 · vercel · Dec 16, 2020
1 parent 976e19d
commit 260ec62
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git 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
@@ -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 } })
   })

diff --git 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