add list result to SWRListItem

Author: promer94

examples/queries/pages/index.js

@@ -3,10 +3,23 @@ import useSWRList from 'swr/list'
 import useSWR from 'swr'
 import { useState } from 'react'
 
-const SWRListItem = ({ originKey, fetcher }) => {
-  const { data, error, isLoading, isValidating } = useSWR(originKey, fetcher)
-  console.log(originKey, data, error, isLoading, isValidating)
-  return <div>{data ? data : 'loading'}</div>
+const SWRListItem = ({ originKey, fetcher, listResult }) => {
+  const { data, error, isLoading, isValidating, mutate } = useSWR(
+    originKey,
+    fetcher
+  )
+  console.log(
+    originKey,
+    data,
+    error,
+    isLoading,
+    isValidating,
+    listResult.data,
+    listResult.error,
+    listResult.isLoading,
+    listResult.isValidating
+  )
+  return <div onClick={() => mutate()}>{data ? data : 'loading'}</div>
 }
 
 export default function Index() {
@@ -15,7 +28,7 @@ export default function Index() {
     '/api/data?id=1',
     '/api/data?id=2'
   ])
-  const { data, result } = useSWRList(keys, fetch, {
+  const { data, result, mutate } = useSWRList(keys, fetch, {
     SWRListItem,
     keepPreviousData: true
   })
@@ -29,7 +42,7 @@ export default function Index() {
       </button>
       <div>{result}</div>
       <h2>-----***----</h2>
-      <div>
+      <div onClick={() => mutate()}>
         {data ? (
           data.map(v => <div key={v.key}>{v.data ? v.data : v.error}</div>)
         ) : (

list/index.tsx

@@ -117,9 +117,10 @@ export const list = (<Data, Error, Key extends Arguments = Arguments>(
       <SWRListItem
         key={key}
         originKey={_keys[index]}
+        listResult={swr}
         fetcher={async () => {
           const data = await currentFetcher(_keys[index])
-          fetch({ dedupe: true })
+          swr.mutate()
           return data
         }}
       />
@@ -131,8 +132,7 @@ export const list = (<Data, Error, Key extends Arguments = Arguments>(
     })
 
     return {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      result: useMemo(() => keys.map(listRender), [keys]),
+      result: keys.map(listRender),
       mutate: (
         data: Data[] | Promise<Data[]> | MutatorCallback<Data[]> = () =>
           fetch({ dedupe: false }),

list/types.ts

@@ -19,6 +19,7 @@ export interface ItemComponentProps<
 > {
   originKey: Key
   fetcher: BareFetcher<Data>
+  listResult: SWRListResponse<Data, Error>
 }
 
 export interface SWRListConfiguration<