Query examples: Prefetching (reduxjs#1105)

* Add prefetching examples
* Updated CSB links in docs

Author: msutkowski

docs/rtk-query/usage/prefetching.mdx

@@ -119,7 +119,7 @@ dispatch(api.endpoints[endpointName].initiate(arg, { forceRefetch: true }))
 This is a very basic example that shows how you can prefetch when a user hovers over the next arrow. This is probably not the optimal solution, because if they hover, click, then change pages without moving their mouse, we wouldn't know to prefetch the next page because we wouldn't see the next `onMouseEnter` event. In this case, you would need to handle this on your own. You could also consider automatically prefetching the next page...
 
 <iframe
-  src="https://codesandbox.io/embed/concepts-prefetching-h594j?fontsize=12&hidenavigation=1&theme=dark"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/prefetching?fontsize=12&hidenavigation=1&theme=dark"
   style={{
     width: '100%',
     height: '600px',
@@ -137,7 +137,7 @@ This is a very basic example that shows how you can prefetch when a user hovers
 Picking up on our last example, we automatically `prefetch` the next page, giving the appearance of no network delay.
 
 <iframe
-  src="https://codesandbox.io/embed/concepts-prefetching-automatic-2id61?fontsize=12&hidenavigation=1&theme=dark"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/prefetching-automatic?fontsize=12&hidenavigation=1&theme=dark"
   style={{
     width: '100%',
     height: '600px',
@@ -155,7 +155,7 @@ Picking up on our last example, we automatically `prefetch` the next page, givin
 After the first query initialized by `useQuery` runs, we automatically fetch all remaining pages.
 
 <iframe
-  src="https://codesandbox.io/embed/concepts-prefetching-automatic-waterfall-ihe5e?fontsize=12&hidenavigation=1&theme=dark&module=%2Fsrc%2Ffeatures%2Fposts%2FPostsManager.tsx"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-toolkit/tree/feature/v1.6-integration/examples/query/react/prefetching-automatic-waterfall?fontsize=12&hidenavigation=1&theme=dark&module=%2Fsrc%2Ffeatures%2Fposts%2FPostsManager.tsx"
   style={{
     width: '100%',
     height: '600px',

examples/query/react/mutations/src/features/posts/PostsManager.tsx

@@ -85,25 +85,63 @@ const AddPost = () => {
 }
 
 const PostList = () => {
-  const { data: posts, isLoading } = useGetPostsQuery()
-  const { push } = useHistory()
+  const [page, setPage] = useState(1)
+  const { data: posts, isLoading, isFetching } = hooks.listPosts.useQuery(page)
+  const prefetchPage = usePrefetch('listPosts')
+
+  const prefetchNext = useCallback(() => {
+    prefetchPage(page + 1)
+  }, [prefetchPage, page])
+
+  useEffect(() => {
+    if (page !== posts?.total_pages) {
+      prefetchNext()
+    }
+  }, [posts, page, prefetchNext])
 
   if (isLoading) {
     return <div>Loading</div>
   }
 
-  if (!posts) {
+  if (!posts?.data) {
     return <div>No posts :(</div>
   }
 
   return (
-    <List spacing={3}>
-      {posts.map(({ id, name }) => (
-        <ListItem key={id} onClick={() => push(`/posts/${id}`)}>
-          <ListIcon as={MdBook} color="green.500" /> {name}
-        </ListItem>
-      ))}
-    </List>
+    <Box>
+      <HStack spacing="14px">
+        <Button
+          onClick={() => setPage((prev) => prev - 1)}
+          isLoading={isFetching}
+          disabled={page === 1}
+        >
+          <Icon as={MdArrowBack} />
+        </Button>
+        <Button
+          onClick={() => setPage((prev) => prev + 1)}
+          isLoading={isFetching}
+          disabled={page === posts.total_pages}
+          onMouseEnter={prefetchNext}
+        >
+          <Icon as={MdArrowForward} />
+        </Button>
+        <Box>{`${page} / ${posts.total_pages}`}</Box>
+      </HStack>
+      <List spacing={3} mt={6}>
+        {posts?.data.map(({ id, title, status }) => (
+          <ListItem key={id}>
+            <ListIcon as={MdBook} color="green.500" /> {title}{' '}
+            <Badge
+              ml="1"
+              fontSize="0.8em"
+              colorScheme={getColorForStatus(status)}
+            >
+              {status}
+            </Badge>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
   )
 }
 

examples/query/react/prefetching-automatic-waterfall/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true