WIP: useSWRAggregator

aggregator/index.tsx

@@ -0,0 +1,115 @@
+import React, { useRef, useMemo, useCallback } from 'react'
+import useSWR, { unstable_serialize } from 'swr'
+import {
+  preload,
+  withMiddleware,
+  useIsomorphicLayoutEffect,
+  mergeObjects
+} from 'swr/_internal'
+
+import type {
+  SWRHook,
+  Middleware,
+  Arguments,
+  GlobalState,
+  BareFetcher,
+  SWRResponse,
+  defaultConfig
+} from 'swr/_internal'
+
+import type {
+  SWRAggregatorConfiguration,
+  SWRAggregator,
+  SWRArray
+} from './types'
+
+const defaultChildren = () => {
+  return null
+}
+interface Props<Key extends Arguments, Data = any> {
+  _key: Key
+  fetcherRef: React.RefObject<BareFetcher<Data>>
+  children?: (
+    value: SWRResponse<Data, Error>,
+    index: number
+  ) => React.ReactElement<any, any> | null
+  index: number
+}
+const SWRAggregatorItem = <Key extends Arguments, Data = any>({
+  _key,
+  index,
+  fetcherRef,
+  children = defaultChildren
+}: Props<Key, Data>) => {
+  const item = useSWR(_key, async (key: any) => {
+    const currentFetcher = fetcherRef.current
+    if (!currentFetcher) {
+      throw new Error('No fetcher found')
+    }
+    const data = await currentFetcher(key)
+    return data
+  })
+  return children(item, index)
+}
+
+export const aggregator = (<Data, Error, Key extends Arguments = Arguments>(
+    useSWRNext: SWRHook
+  ) =>
+  (
+    _keys: Key[],
+    fetcher: BareFetcher<Data>,
+    config: typeof defaultConfig & SWRAggregatorConfiguration<Data, Error, Key>
+  ) => {
+    if (!Array.isArray(_keys)) throw new Error('not array')
+    const fetcherRef = useRef(fetcher)
+    const configRef = useRef(config)
+    const swrkeys = unstable_serialize(_keys)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const keys = useMemo(() => _keys.map(v => unstable_serialize(v)), [swrkeys])
+    const lazyFetcher = useCallback(async (): Promise<any> => {
+      const revalidate = async (index: number) => {
+        const key = keys[index]
+        const currentFetcher = fetcherRef.current
+        return preload(key, currentFetcher)
+      }
+      return Promise.all(keys.map((___, i) => revalidate(i)))
+    }, [keys])
+    const swr = useSWRNext(_keys, lazyFetcher, config)
+    const result = {
+      mutate: swr.mutate,
+      get data() {
+        return swr.data?.map((v: any, i: number) =>
+          mergeObjects(v, {
+            key: keys[i],
+            originKey: _keys[i]
+          })
+        )
+      },
+      get isLoading() {
+        return swr.isLoading
+      },
+      get isValidating() {
+        return swr.isValidating
+      }
+    }
+    const item = (key: string, index: number) => (
+      <SWRAggregatorItem
+        key={key}
+        _key={_keys[index]}
+        index={index}
+        fetcherRef={fetcherRef}
+      >
+        {(v: SWRResponse<Data>, i: number) => config.children(v, i, result)}
+      </SWRAggregatorItem>
+    )
+
+    useIsomorphicLayoutEffect(() => {
+      fetcherRef.current = fetcher
+      configRef.current = config
+    })
+    return Object.assign(result, { items: keys.map(item) })
+  }) as unknown as Middleware
+
+export default withMiddleware(useSWR, aggregator) as unknown as SWRAggregator
+
+export { SWRAggregatorConfiguration, SWRAggregator, SWRArray }

aggregator/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "swr-aggregator",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/aggregator",
+  "exports": "./dist/index.mjs",
+  "private": true,
+  "scripts": {
+    "watch": "bunchee index.tsx --no-sourcemap -w",
+    "build": "bunchee index.tsx --no-sourcemap",
+    "types:check": "tsc --noEmit",
+    "clean": "rimraf dist"
+  },
+  "peerDependencies": {
+    "swr": "*",
+    "react": "*",
+    "use-sync-external-store": "*"
+  }
+}

aggregator/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "outDir": "./dist"
+  },
+  "include": ["./*.tsx"]
+}

aggregator/types.ts

@@ -0,0 +1,79 @@
+import type {
+  SWRConfiguration,
+  Arguments,
+  BareFetcher,
+  KeyedMutator,
+  Fetcher,
+  SWRResponse
+} from 'swr/_internal'
+
+export type Keys<T extends Arguments = Arguments> = T[]
+
+export interface SWRArray<
+  Data = any,
+  Error = any,
+  Key extends Arguments = Arguments
+> {
+  mutate: KeyedMutator<Data[]>
+  data?: Array<{
+    data?: Data
+    error?: Error
+    key: string
+    originKey: Key
+  }>
+  isValidating: boolean
+  isLoading: boolean
+}
+
+export interface SWRAggregatorConfiguration<
+  Data = any,
+  Error = any,
+  OriginKey extends Arguments = Arguments
+> extends SWRConfiguration<Data, Error> {
+  children: (
+    value: SWRResponse<Data, Error>,
+    index: number,
+    array: SWRArray<Data, Error, OriginKey>
+  ) => React.ReactElement<any, any> | null
+}
+
+interface AggregatorResult<
+  Data = any,
+  Error = any,
+  Key extends Arguments = Arguments
+> extends SWRArray<Data, Error, Key> {
+  items: Array<JSX.Element | null>
+}
+
+export interface SWRAggregator {
+  <Data = any, Error = any, Key extends Arguments = Arguments>(
+    key: Keys<Key>
+  ): AggregatorResult<Data, Error>
+  <Data = any, Error = any, Key extends Arguments = Arguments>(
+    key: Keys<Key>,
+    fetcher: Fetcher<Data, Key> | null
+  ): AggregatorResult<Data, Error>
+  <Data = any, Error = any, Key extends Arguments = Arguments>(
+    key: Keys<Key>,
+    config: SWRAggregatorConfiguration<Data, Error, Key> | undefined
+  ): AggregatorResult<Data, Error>
+  <Data = any, Error = any, Key extends Arguments = Arguments>(
+    key: Keys<Key>,
+    fetcher: Fetcher<Data, Key> | null,
+    config: SWRAggregatorConfiguration<Data, Error, Key> | undefined
+  ): AggregatorResult<Data, Error>
+  <Data = any, Error = any>(key: Keys): AggregatorResult<Data, Error>
+  <Data = any, Error = any>(
+    key: Keys,
+    fetcher: BareFetcher<Data> | null
+  ): AggregatorResult<Data, Error>
+  <Data = any, Error = any>(
+    key: Keys,
+    config: SWRAggregatorConfiguration<Data, Error> | undefined
+  ): AggregatorResult<Data, Error>
+  <Data = any, Error = any>(
+    key: Keys,
+    fetcher: BareFetcher<Data> | null,
+    config: SWRAggregatorConfiguration<Data, Error> | undefined
+  ): AggregatorResult<Data, Error>
+}

examples/aggregate/README.md

@@ -0,0 +1,30 @@
+# Basic
+
+## One-Click Deploy
+
+Deploy your own SWR project with Vercel.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?s=https://github.com/vercel/swr/tree/main/examples/basic)
+
+## How to Use
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/vercel/swr/tar.gz/main | tar -xz --strip=2 swr-main/examples/basic
+cd basic
+```
+
+Install it and run:
+
+```bash
+yarn
+yarn dev
+# or
+npm install
+npm run dev
+```
+
+## The Idea behind the Example
+
+Show a basic usage of SWR fetching data from an API in two different pages.

examples/aggregate/libs/fetch.js

@@ -0,0 +1,4 @@
+export default async function fetcher(...args) {
+  const res = await fetch(...args)
+  return res.json()
+}

examples/aggregate/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "queries",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "next": "latest",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "swr": "latest"
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/aggregate/pages/api/data.js

@@ -0,0 +1,14 @@
+const projects = [
+  'facebook/flipper',
+  'vuejs/vuepress',
+  'rust-lang/rust',
+  'vercel/next.js'
+]
+
+export default async function api(req, res) {
+  if (req.query.id) {
+    return new Promise(resolve => {
+      setTimeout(() => resolve(projects[req.query.id]), 1500)
+    }).then(v => res.json(v))
+  }
+}

examples/aggregate/pages/index.js

@@ -0,0 +1,43 @@
+import fetch from '../libs/fetch'
+import useSWRAggregator from 'swr/aggregator'
+import { useState } from 'react'
+
+function Index() {
+  const [keys, setKeys] = useState([
+    '/api/data?id=0',
+    '/api/data?id=1',
+    '/api/data?id=2'
+  ])
+  const { data, items, mutate } = useSWRAggregator(keys, fetch, {
+    keepPreviousData: true,
+    children: (item, index, array) => {
+      console.log(item.data)
+      return <div>{item.data ? item.data : 'loading'}</div>
+    }
+  })
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h1>Trending Projects</h1>
+      <button
+        onClick={() => setKeys(s => s.concat(`/api/data?id=${s.length}`))}
+      >
+        add
+      </button>
+      <div>{items}</div>
+      <h2>-----***----</h2>
+      <div onClick={() => mutate()}>
+        {data ? (
+          data.map(v => (
+            <div key={v.key}>{v.data ? v.data : v.error.toString()}</div>
+          ))
+        ) : (
+          <div>loading</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default function Page() {
+  return <Index></Index>
+}

jest.config.js

@@ -8,7 +8,8 @@ module.exports = {
     '^swr/infinite$': '<rootDir>/infinite/index.ts',
     '^swr/immutable$': '<rootDir>/immutable/index.ts',
     '^swr/mutation$': '<rootDir>/mutation/index.ts',
-    '^swr/_internal$': '<rootDir>/_internal/index.ts'
+    '^swr/_internal$': '<rootDir>/_internal/index.ts',
+    '^swr/aggregator$': '<rootDir>/aggregator/index.ts'
   },
   transform: {
     '^.+\\.(t|j)sx?$': '@swc/jest'

package.json

@@ -28,6 +28,12 @@
       "module": "./infinite/dist/index.esm.js",
       "require": "./infinite/dist/index.js"
     },
+    "./aggregator": {
+      "import": "./aggregator/dist/index.mjs",
+      "module": "./aggregator/dist/index.esm.js",
+      "require": "./aggregator/dist/index.js",
+      "types": "./aggregator/dist/aggregator/index.d.ts"
+    },
     "./immutable": {
       "types": "./immutable/dist/immutable/index.d.ts",
       "import": "./immutable/dist/index.mjs",
@@ -53,11 +59,14 @@
     "immutable/dist/**/*.{js,d.ts,mjs}",
     "mutation/dist/**/*.{js,d.ts,mjs}",
     "_internal/dist/**/*.{js,d.ts,mjs}",
+    "aggregator/dist/**/*.{js,d.ts,mjs}",
     "core/package.json",
     "infinite/package.json",
     "immutable/package.json",
     "mutation/package.json",
-    "_internal/package.json"
+    "_internal/package.json",
+    "aggregator/package.json",
+    "package.json"
   ],
   "repository": "github:vercel/swr",
   "homepage": "https://swr.vercel.app",
@@ -68,7 +77,7 @@
     "csb:build": "pnpm build",
     "clean": "pnpm -r run clean",
     "watch": "pnpm -r run watch",
-    "build": "pnpm build-package _internal && pnpm build-package core && pnpm build-package infinite && pnpm build-package immutable && pnpm build-package mutation",
+    "build": "pnpm build-package _internal && pnpm build-package core && pnpm build-package infinite && pnpm build-package immutable && pnpm build-package mutation &&  pnpm bunchee index.tsx --cwd aggregator",
     "build-package": "bunchee index.ts --cwd",
     "types:check": "pnpm -r run types:check",
     "prepublishOnly": "pnpm clean && pnpm build",