How to use the react-suspense-fetch.prepare function in react-suspense-fetch

To help you get started, we’ve selected a few react-suspense-fetch examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dai-shi / react-suspense-fetch / examples / 03_props / src / App.tsx View on Github external
import React, { Suspense } from 'react';

import { prepare } from 'react-suspense-fetch';

import Item from './Item';

export const fetchFunc = async (userId: string) => (await fetch(`https://reqres.in/api/users/${userId}?delay=3`)).json();

const items = [
  { id: '1', result: prepare(fetchFunc) },
  { id: '2', result: prepare(fetchFunc) },
  { id: '3', result: prepare(fetchFunc) },
];

const App: React.FC = () => (
  Loading...}>
    {items.map(({ id, result }) => (
      <div>
        
        <hr>
      </div>
    ))}
  
);

export default App;
github dai-shi / react-suspense-fetch / examples / 04_auth / src / UserData.tsx View on Github external
import { AuthContext } from './App';

const fetchUserDataFunc = async (token: string) =&gt; {
  const res = await fetch('https://reqres.in/api/items?delay=2', {
    headers: {
      Token: token,
    },
  });
  const data = await res.json();
  return data as { data: { id: number; name: string }[] };
};

const extractToken = (authState: { token: string }) =&gt; authState.token;

const UserItems = prepare(fetchUserDataFunc, extractToken);

const UserData: React.FC = () =&gt; {
  const [authState] = useContext(AuthContext);
  if (!authState) throw new Error('no authState');
  run(UserItems, authState);
  return (
    <ul>
      {UserItems.data.map((item) =&gt; (
        <li>{item.name}</li>
      ))}
    </ul>
  );
};

export default UserData;

react-suspense-fetch

A low-level library for React Suspense for Data Fetching

MIT
Latest version published 2 years ago

Package Health Score

45 / 100
Full package analysis