Swr: Suspense is not resolved and the requests are looping

[NicholasKuchiniski]

import React, { Suspense } from 'react';
import useSWR from '@zeit/swr'

function StarWarsSuspense() {
  return (
    <Suspense fallback={<div>loading ...</div>}>
      <StarWars />
    </Suspense>
  )
}

function StarWars() {
  const { data } = useSWR('http://swquotesapi.digitaljedi.dk/api/SWQuote/RandomStarWarsQuote', fetch, { suspense: true });

  return (
    <div>
      {data.starWarsQuote}
    </div>
  );
}

export default StarWarsSuspense;

With this code, i never get the final component, the placeholder stay forever, looking on chrome developer console, the requests are looping.

I made this code using the readme example, i tried change de fetch function to a random promise to see if i get out of fallback, without no results.

I doing something wrong or this is really something that should not happen ?

[erikjung]

I also get the same outcome: https://codesandbox.io/s/lucid-field-kbz20

Not sure if the suspense option is intended for the existing suspense feature in React stable or for the new concurrent functionality of react@experimental. Tried both approaches with both versions of React and got the same results.

Also unclear if anything special is required for the fetch function implementation. The docs imply that passing the global fetch function directly should work, but this basic example is wrapping fetch to resolve the .json() promise as well. 🤷‍♂️

[shuding]

@NicholasKuchiniski @erikjung

This is indeed a bug due to the deduplication related code. We're working on a fix.

[shuding]

Regarding the fetch, sorry for the unclear information 🙏

We just added a message to the Quick Start:

Note that fetch can be any asynchronous function, so you can use your favourite data-fetching library to handle that part.

Also in the API section:

Promise returning function to fetch your data

[shuding]

Should be fixed in 0.1.2 🙏

[erikjung]

Thanks @quietshu

Still seeing the same issue with 0.1.2 for some reason 🤔

https://codesandbox.io/s/swr-playground-ku9mq

Took fetch out of the equation and used the unit test itself, but still never resolves:

function Section() {
  const { data } = useSWR(
    "suspense-1",
    () => new Promise(res => setTimeout(() => res("SWR"), 100)),
    {
      suspense: true
    }
  );
  return <div>{data}</div>;
}

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading</div>}>
        <Section />
      </Suspense>
    </div>
  );
}

This is w/ [email protected] also.

[shuding]

@erikjung sorry that PR wasn't included in 0.1.2.
Updating to [email protected] will fix it:

https://codesandbox.io/s/swr-playground-946db