Suspense Mode

[rotexhawk]

I noticed two problems with the suspense mode.

1. The default example useSWR('/api', fetch, { suspense: true }) doesn't work because it returns a readable stream.

2. When I modified the default example and returned data, I noticed, the component was rendered multiple times.

import React from 'react';
import useSWR from 'swr'

const FetchSuspense = endpoint => {
    console.log('calling me with', endpoint)
    return fetch(endpoint).then(data => data.json()).then(res => res.results[0])
}

export const Person = ({ resource, num  }) => {
     const { data } = useSWR('https://randomuser.me/api', FetchSuspense, { suspense: true })
     console.log("calling comp", num)
     return (<div>Loaded {num}: - {data.name.first}</div>)
};

[icyJoseph]

Yes, I think the docs might be misleading when using the word fetch, as you are supposed to make your own handler, as oppose to pass window.fetch. The examples are very well done though. Maybe a PR is worth the effort?

As for the second part, it happens because there's a few other values coming out from the hook, and in this case the isValidating prop triggers this re-render (there's also the error prop and the revalidate function).

import React, { Suspense } from "react";
import useSWR from "swr";

export function useWordPromise(word) {
  const { data, ...rest } = useSWR(
    word,
    arg => {
      console.log("calls promise handler");
      return new Promise(resolve => resolve(arg));
    },
    {
      suspense: true
    }
  );

  console.log("calls hook", rest);
  return data;
}

function Word() {
  const word = useWordPromise("the word");
  return <p>{word}</p>;
}

function App() {
  return (
    <Suspense fallback={<p>Loading Word</p>}>
      <Word />
    </Suspense>
  );
}

When I run the above, I see three calls hook, the initial pass, when isValidating is true, and finally when isValidating becomes false (we got data), but only one calls promise handler. Remember too that this library does re-fetch on auto focus.

[shuding]

Thank you! We'll make the documentation about fetch clearer.

The second question should be related to #57.

[shuding]

Should be fixed in swr@0.1.8.