Merge branch 'master' into next

Author: boschni

docs/src/components/markdown.module.css

@@ -64,13 +64,15 @@
 .markdown > p > a,
 .markdown > ul > li > a,
 .markdown > ol > li > a,
+.markdown > blockquote > p > a,
 .markdown > table > tbody > tr > td > a {
   @apply text-blue-600 font-semibold transition-colors duration-150 ease-out;
 }
 
 .markdown > p > a:hover,
 .markdown > ul > li > a:hover,
 .markdown > ol > li > a:hover,
+.markdown > blockquote > p > a:hover,
 .markdown > table > tbody > tr > td > a:hover {
   @apply text-blue-800 transition-colors duration-150 ease-out;
 }

docs/src/pages/index.js

@@ -14,6 +14,8 @@ const supporters = [
   ['@bgazzera', 'https://github.com/bgazzera'],
   ['Gabe Ragland', 'https://github.com/gragland'],
   ['Matt Wood', 'https://github.com/mattwoodnyc'],
+  ['Joshua Turner', 'https://github.com/joshua-turner'],
+  ['Fillip Peyton', 'https://github.com/fillippeyton'],
 ]
 
 const fans = [
@@ -31,6 +33,7 @@ const fans = [
   'Juliano Farias (@frontendwizard)',
   'Kristóf Poduszló (@kripod)',
   'Peter Pistorius (@peterp)',
+  'Agustín Villalobos (@agustin-v)',
 ]
 
 const Home = () => {

docs/src/pages/quick-start.md

@@ -54,8 +54,8 @@ function Todos() {
       <button
         onClick={() =>
           addTodo({
-            id: Date.now()
-            title: 'Do Laundry',
+            id: Date.now(),
+            title: 'Do Laundry'
           })
         }
       >

examples/custom-hooks/README.md

@@ -3,4 +3,4 @@
 To run this example:
 
 - `npm install` or `yarn`
-- `npm run start` or `yarn start`
+- `npm start` or `yarn start`

examples/custom-hooks/package.json

@@ -20,7 +20,8 @@
     "@rescripts/cli": "^0.0.11",
     "@rescripts/rescript-use-babel-config": "^0.0.8",
     "@rescripts/rescript-use-eslint-config": "^0.0.9",
-    "babel-eslint": "10.0.1"
+    "babel-eslint": "10.0.1",
+    "eslint-config-prettier": "^6.12.0"
   },
   "browserslist": {
     "production": [

package.json

@@ -22,10 +22,10 @@
     "test:types": "tsc",
     "test:eslint": "eslint --ext .ts,.tsx ./src",
     "build": "yarn build:commonjs && yarn build:es && yarn build:umd && yarn build:types",
-    "build:commonjs": "rm -rf ./lib && BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/*.test.tsx ./src --out-dir lib",
-    "build:es": "rm -rf ./es && babel --extensions .ts,.tsx --ignore ./src/**/*.test.tsx ./src --out-dir es",
-    "build:umd": "rm -rf ./dist && NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
-    "build:types": "rm -rf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
+    "build:commonjs": "rimraf ./lib && cross-env BABEL_ENV=commonjs babel --extensions .ts,.tsx --ignore ./src/**/*.test.tsx ./src --out-dir lib",
+    "build:es": "rimraf ./es && babel --extensions .ts,.tsx --ignore ./src/**/*.test.tsx ./src --out-dir es",
+    "build:umd": "rimraf ./dist && cross-env NODE_ENV=production rollup -c && rollup-plugin-visualizer stats-react.json",
+    "build:types": "rimraf ./types && tsc --project ./tsconfig.types.json && replace 'import type' 'import' ./types -r --silent && replace 'export type' 'export' ./types -r --silent",
     "now-build": "yarn && cd www && yarn && yarn build",
     "start": "rollup -c -w",
     "format": "prettier {.,src,src/**,example/src,example/src/**,types}/*.{md,js,jsx,tsx,json} --write",
@@ -106,6 +106,7 @@
     "react-dom": "^16.13.1",
     "react-error-boundary": "^2.2.2",
     "replace": "^1.2.0",
+    "rimraf": "^3.0.2",
     "rollup": "^2.16.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",

src/core/query.ts

@@ -439,6 +439,10 @@ export class Query<TData = unknown, TError = unknown, TQueryFnData = TData> {
         cursor = options.getFetchMore(lastPage, pages)
       }
 
+      if (!cursor && typeof lastPage !== 'undefined') {
+        return Promise.resolve(pages)
+      }
+
       const queryFn = options.queryFn || defaultQueryFn
 
       return Promise.resolve()

src/react/tests/useInfiniteQuery.test.tsx

@@ -31,11 +31,15 @@ const initialItems = (page: number): Result => {
   }
 }
 
-const fetchItems = async (page: number, ts: number): Promise<Result> => {
+const fetchItems = async (
+  page: number,
+  ts: number,
+  nextId?: any
+): Promise<Result> => {
   await sleep(10)
   return {
     items: [...new Array(10)].fill(null).map((_, d) => page * pageSize + d),
-    nextId: page + 1,
+    nextId: nextId ?? page + 1,
     ts,
   }
 }
@@ -1108,4 +1112,137 @@ describe('useInfiniteQuery', () => {
     // ensure that Item: 4 is no longer rendered
     expect(rendered.queryAllByText('Item: 4')).toHaveLength(0)
   })
+
+  it('should compute canFetchMore correctly for falsy getFetchMore return value on refetching', async () => {
+    const key = queryKey()
+    const MAX = 2
+
+    function Page() {
+      const fetchCountRef = React.useRef(0)
+      const [isRemovedLastPage, setIsRemovedLastPage] = React.useState<boolean>(
+        false
+      )
+      const {
+        status,
+        data,
+        error,
+        isFetching,
+        isFetchingMore,
+        fetchMore,
+        canFetchMore,
+        refetch,
+      } = useInfiniteQuery<Result, Error>(
+        key,
+        (_key, nextId = 0) =>
+          fetchItems(
+            nextId,
+            fetchCountRef.current++,
+            nextId === MAX || (nextId === MAX - 1 && isRemovedLastPage)
+              ? false
+              : undefined
+          ),
+        {
+          getFetchMore: (lastGroup, _allGroups) => lastGroup.nextId,
+        }
+      )
+
+      return (
+        <div>
+          <h1>Pagination</h1>
+          {status === 'loading' ? (
+            'Loading...'
+          ) : status === 'error' ? (
+            <span>Error: {error?.message}</span>
+          ) : (
+            <>
+              <div>Data:</div>
+              {data?.map((page, i) => (
+                <div key={i}>
+                  <div>
+                    Page {i}: {page.ts}
+                  </div>
+                  <div key={i}>
+                    {page.items.map(item => (
+                      <p key={item}>Item: {item}</p>
+                    ))}
+                  </div>
+                </div>
+              ))}
+              <div>
+                <button
+                  onClick={() => fetchMore()}
+                  disabled={!canFetchMore || Boolean(isFetchingMore)}
+                >
+                  {isFetchingMore
+                    ? 'Loading more...'
+                    : canFetchMore
+                    ? 'Load More'
+                    : 'Nothing more to load'}
+                </button>
+                <button onClick={() => refetch()}>Refetch</button>
+                <button onClick={() => setIsRemovedLastPage(true)}>
+                  Remove Last Page
+                </button>
+              </div>
+              <div>
+                {isFetching && !isFetchingMore
+                  ? 'Background Updating...'
+                  : null}
+              </div>
+            </>
+          )}
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(client, <Page />)
+
+    rendered.getByText('Loading...')
+
+    await waitFor(() => {
+      rendered.getByText('Item: 9')
+      rendered.getByText('Page 0: 0')
+    })
+
+    fireEvent.click(rendered.getByText('Load More'))
+
+    await waitFor(() => rendered.getByText('Loading more...'))
+
+    await waitFor(() => {
+      rendered.getByText('Item: 19')
+      rendered.getByText('Page 0: 0')
+      rendered.getByText('Page 1: 1')
+    })
+
+    fireEvent.click(rendered.getByText('Load More'))
+
+    await waitFor(() => rendered.getByText('Loading more...'))
+
+    await waitFor(() => {
+      rendered.getByText('Item: 29')
+      rendered.getByText('Page 0: 0')
+      rendered.getByText('Page 1: 1')
+      rendered.getByText('Page 2: 2')
+    })
+
+    rendered.getByText('Nothing more to load')
+
+    fireEvent.click(rendered.getByText('Remove Last Page'))
+
+    await sleep(10)
+
+    fireEvent.click(rendered.getByText('Refetch'))
+
+    await waitFor(() => rendered.getByText('Background Updating...'))
+
+    await waitFor(() => {
+      rendered.getByText('Page 0: 3')
+      rendered.getByText('Page 1: 4')
+    })
+
+    expect(rendered.queryByText('Item: 29')).toBeNull()
+    expect(rendered.queryByText('Page 2: 5')).toBeNull()
+
+    rendered.getByText('Nothing more to load')
+  })
 })

yarn.lock

@@ -6692,7 +6692,7 @@ [email protected]:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==