Fix mutations example (reduxjs#1179)

Author: msutkowski

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

@@ -85,63 +85,25 @@ const AddPost = () => {
 }
 
 const PostList = () => {
-  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])
+  const { data: posts, isLoading } = useGetPostsQuery()
+  const { push } = useHistory()
 
   if (isLoading) {
     return <div>Loading</div>
   }
 
-  if (!posts?.data) {
+  if (!posts) {
     return <div>No posts :(</div>
   }
 
   return (
-    <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>
+    <List spacing={3}>
+      {posts.map(({ id, name }) => (
+        <ListItem key={id} onClick={() => push(`/posts/${id}`)}>
+          <ListIcon as={MdBook} color="green.500" /> {name}
+        </ListItem>
+      ))}
+    </List>
   )
 }
 

examples/query/react/mutations/src/mocks/db.ts

@@ -10,18 +10,23 @@ const db = factory({
   },
 })
 
-db.post.create({ id: nanoid(), name: 'A sample post' })
-db.post.create({ id: nanoid(), name: 'A post about rtk query' })
+;[
+  'A sample post',
+  'A post about RTK Query',
+  'How to randomly throw errors, a novella',
+].forEach((name) => {
+  db.post.create({ id: nanoid(), name })
+})
 
 export const handlers = [
   rest.post('/posts', async (req, res, ctx) => {
     const { name } = req.body as Partial<Post>
 
-    if (Math.random() < 0.5) {
+    if (Math.random() < 0.3) {
       return res(
-        ctx.json({ error: 'Oh no, there was an error' }),
+        ctx.json({ error: 'Oh no, there was an error, try again.' }),
         ctx.status(500),
-        ctx.delay(400)
+        ctx.delay(300)
       )
     }
 
@@ -30,16 +35,16 @@ export const handlers = [
       name,
     })
 
-    return res(ctx.json(post), ctx.delay(400))
+    return res(ctx.json(post), ctx.delay(300))
   }),
   rest.put('/posts/:id', (req, res, ctx) => {
     const { name } = req.body as Partial<Post>
 
-    if (Math.random() < 0.5) {
+    if (Math.random() < 0.3) {
       return res(
-        ctx.json({ error: 'Oh no, there was an error' }),
+        ctx.json({ error: 'Oh no, there was an error, try again.' }),
         ctx.status(500),
-        ctx.delay(400)
+        ctx.delay(300)
       )
     }
 
@@ -48,7 +53,7 @@ export const handlers = [
       data: { name },
     })
 
-    return res(ctx.json(post), ctx.delay(400))
+    return res(ctx.json(post), ctx.delay(300))
   }),
   ...db.post.toHandlers('rest'),
 ] as const