Merge branch 'master' into beta

Author: tannerlinsley

docs/src/pages/guides/testing.md

@@ -86,3 +86,55 @@ expect(result.current).toEqual({answer: 42});
 ```
 
 Here we are making use of `waitFor` and waiting until our Nock expectation indicates that it has been called. This way we know that our hook has finished and should have the correct data.
+
+## Testing Load More / Infinite Scroll
+
+First we need to mock our API response
+
+```
+function generateMockedResponse(page) {
+  return {
+    page: page,
+    items: [...]
+  }
+}
+```
+
+Then, our `nock` configuration needs to differentiate responses based on the page, and we'll be using `uri` to do this.
+`uri`'s value here will be something like `"/?page=1` or `/?page=2`
+
+```
+const expectation = nock('http://example.com')
+  .persist()
+  .query(true)
+  .get('/api/data')
+  .reply(200, (uri) => {
+    const url = new URL(`http://example.com${uri}`);
+    const { page } = Object.fromEntries(url.searchParams);
+    return generateMockedResponse(page);
+  });
+```
+
+(Notice the `.persist()`, because we'll be calling from this endpoint multiple times)
+
+Now we can safely run our tests, the trick here is to await both `isFetching` and then `!isFetching` after calling `fetchMore()`:
+
+```
+const { result, waitFor } = renderHook(() => useInfiniteQueryCustomHook(), { wrapper });
+
+await waitFor(() => result.current.isSuccess);
+
+expect(result.current.data).toStrictEqual(generateMockedResponse(1));
+
+result.current.fetchMore();
+
+await waitFor(() => result.current.isFetching);
+await waitFor(() => !result.current.isFetching);
+
+expect(result.current.data).toStrictEqual([
+  ...generateMockedResponse(1),
+  ...generateMockedResponse(2),
+]);
+
+expectation.done();
+```

examples/focus-refetching/next.config.js

@@ -0,0 +1,48 @@
+const Module = require('module')
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const node_modules = path.resolve(__dirname, 'node_modules')
+
+const originalRequire = Module.prototype.require
+
+// The following ensures that there is always only a single (and same)
+// copy of React in an app at any given moment.
+Module.prototype.require = function(modulePath) {
+  // Only redirect resolutions to non-relative and non-absolute modules
+  if (
+    ['/react/', '/react-dom/', '/react-query/'].some(d => {
+      try {
+        return require.resolve(modulePath).includes(d)
+      } catch (err) {
+        return false
+      }
+    })
+  ) {
+    try {
+      modulePath = resolveFrom(node_modules, modulePath)
+    } catch (err) {
+      //
+    }
+  }
+
+  return originalRequire.call(this, modulePath)
+}
+
+module.exports = {
+  webpack: config => {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        react$: resolveFrom(path.resolve('node_modules'), 'react'),
+        'react-query$': resolveFrom(
+          path.resolve('node_modules'),
+          'react-query'
+        ),
+        'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+      },
+    }
+    return config
+  },
+}

examples/nextjs/next.config.js

@@ -0,0 +1,48 @@
+const Module = require('module')
+const path = require('path')
+const resolveFrom = require('resolve-from')
+
+const node_modules = path.resolve(__dirname, 'node_modules')
+
+const originalRequire = Module.prototype.require
+
+// The following ensures that there is always only a single (and same)
+// copy of React in an app at any given moment.
+Module.prototype.require = function (modulePath) {
+  // Only redirect resolutions to non-relative and non-absolute modules
+  if (
+    ['/react/', '/react-dom/', '/react-query/'].some(d => {
+      try {
+        return require.resolve(modulePath).includes(d)
+      } catch (err) {
+        return false
+      }
+    })
+  ) {
+    try {
+      modulePath = resolveFrom(node_modules, modulePath)
+    } catch (err) {
+      //
+    }
+  }
+
+  return originalRequire.call(this, modulePath)
+}
+
+module.exports = {
+  webpack: config => {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        react$: resolveFrom(path.resolve('node_modules'), 'react'),
+        'react-query$': resolveFrom(
+          path.resolve('node_modules'),
+          'react-query'
+        ),
+        'react-dom$': resolveFrom(path.resolve('node_modules'), 'react-dom'),
+      },
+    }
+    return config
+  },
+}