Avoiding waterfalls with Suspense about swr

[yoshiko-pg]

I'm working on my own project to simply avoid the waterfalls in this way. If it helps.

// Component.tsx
import { useSWR } from './WrappedSwr'

export const Component = () => {
  const resource1 = useSWR<YourResponseType1>('/path1', fetcher) // fetch1
  const resource2 = useSWR<YourResponseType2>('/path2', fetcher) // fetch2
  const data1 = resource1.read() // throw proimse
  const data2 = resource2.read() // throw proimse

  // or you can pass the resource to a child component

  // return (
  //   <Suspense>
  //     <Child resource={resource1} />  // props.resource.read() in Child Component
  //   </Suspense>
  // )

  // ...

// WrappedSwr.ts
import useRawSWR, { mutate, responseInterface } from 'swr'

const useSWR = <Data>(
  key: string,
  fetcher: (args: any) => Data | Promise<Data>,
): Resource<Data> => {
  try {
    const res = useRawSWR<Data>(key, fetcher)
    // If the data is in swr's cache
    return { read: () => res.data as Data }
  } catch (promiseOrError) {
    if (typeof promiseOrError.then === 'function') {
      return wrapPromise<responseInterface<Data, Error>>(promiseOrError)
    }
    throw promiseOrError
  }
}

// from: https://codesandbox.io/s/frosty-hermann-bztrp?file=/src/fakeApi.js
function wrapPromise<T extends { data?: any }>(promise: Promise<T>) {
  let status: 'success' | 'pending' | 'error' = 'pending'
  let result: T | Error
  const suspender = promise.then(
    (r) => {
      status = 'success'
      result = r
    },
    (e) => {
      status = 'error'
      result = e
    },
  )
  return {
    read() {
      if (status === 'pending') {
        throw suspender
      } else if (status === 'error') {
        throw result
      } else if (status === 'success') {
        return (result as T).data
      }
      throw new Error('unknown status in wrapPromise')
    },
  }
}

export { useSWR, mutate }

[samcx]

I was wondering about this as well.

[sergiodxa]

You could use mutate to fill the SWR cache with data before rendering if you now what you will need.

const data = await fetcher("/api/resource/1");
mutate("/api/resource/1", data, false); // the false is to avoid a revalidation in SWR

You could do this multiple times before rendering your component, now when a component using SWR with suspense enabled is rendered it will read from the pre-filled cache, if it's already there the component will render immediately without showing the Suspense fallback.

[shuding]

Hi all! Happy to hear about your feedback on #168 🙏

[miketamis]

Here's my solve: https://medium.com/@tamis.mike/useswr-parallel-suspense-b41929a01098