How to use swr - 10 common examples

async function handleSubmit(event) {
    event.preventDefault()
    // mutate current data to optimistically update the UI
    // the fetch below could fail, in that case the UI will
    // be in an incorrect state
    mutate('/api/data', [...data, text], false)
    // send text to the API
    await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify({ text })
    })
    // to revalidate the data and ensure is not incorrect
    // we trigger a revalidation of the data
    trigger('/api/data')
    setText('')
  }

async function handleSubmit(event) {
    event.preventDefault()
    // mutate current data to optimistically update the UI
    // the fetch below could fail, in that case the UI will
    // be in an incorrect state
    mutate('/api/data', [...data, text], false)
    // send text to the API
    await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify({ text })
    })
    // to revalidate the data and ensure is not incorrect
    // we trigger a revalidation of the data
    trigger('/api/data')
    setText('')
  }

export default () => {
  const {
    pages,
    isLoadingMore,
    isReachingEnd,
    loadMore
  } = useSWRPages(
    // page key
    'demo-page',

    // page component
    ({ offset, withSWR }) => {
      const { data: projects } = withSWR(
        // use the wrapper to wrap the *pagination API SWR*
        useSWR('/api/projects?offset=' + (offset || 0), fetch)
      )
      // you can still use other SWRs outside

      if (!projects) {
        return <p>loading</p>
      }

      return projects.map(project =&gt;

function useProjects() {
  return useSWR('/api/data', fetch)
}

export const withData = (key, getData) => Component => props => {
  const { data: result, error } = useSWR(key, getData, {
    onError: captureException,
  });

  if (!!error) {
    return <div style="{{">Error: {error.message}</div>;
  }

  const loading = !result;
  if (loading) {
    return ;
  }

  return (

const Page = ({ ip, initialData }: Props) => {
  const { data, error } = useSWR(ip, getServer, {
    initialData,
  });

  return (
    <>
      <section>
        
          <a>Back</a>
        

        {error ?  : }
      </section>
    
  );
};

export default () => {
  const { data } = useSWR('/api/data', fetch)

  return <div style="{{">
    <h1>Trending Projects</h1>
    <div>
    {
      data ? data.map(project =&gt; 
        <p><a>{project}</a></p>
      ) : 'loading...'
    }
    </div>
  </div>
}

const DailyReportHeader: React.SFC = props => {
  const { api } = React.useContext(Context);
  const { _, intl } = api;
  const { data: list } = useSWR('zaobao.list', async () => {
    const { data } = await api.callRemote({
      type: 'org.umi.dashboard.zaobao.list',
    });
    return data;
  });

  return (
    Array.isArray(list) && (
      <select>
        {(list || []).map(item =&gt; (
          
            {moment(item.createdAt).format('YYYY-MM-DD')}
          
        ))}
      </select>
    )

export default function (props) {
  const { data, revalidate } = useSWR('/api/login', fetch);
  if (!data) return <h1>loading...</h1>;
  if (data.loggedIn) {
    return (
      <div>
        <h1>Welcome, { data.name }</h1>
        <img height="{80}" width="{80}" src="{data.avatar}">
        <button> {
          logout();
          revalidate();
        }}&gt;Logout</button>
        { props.children }
      </div>
    );
  } else {
    return (
      <div></div>

export default () => {
  const { data } = useSWR('/api/data', fetch)

  return (
    <div style="{{">
      <h1>Trending Projects</h1>
      <div>
        {data
          ? data.map(project =&gt; (
              <p>
                
                  <a>{project}</a>
                
              </p>
            ))
          : 'loading...'}
      </div>
    </div>