How to use the swr function in swr

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>

export function OverthoughtPost(props: Props) {
  const initialData = props.post
  const { data: post } = useSWR(`${props.slug}`, getPostBySlug, { initialData })

  return (
    
      { post
        ? 
        : 
      }
    
  )
}

export default function() {
  const { data: readers, error: readersError } = useSWR('/api/readers', fetch, { revalidateOnFocus: false });
  const { data: status, error: statusError } = useSWR('/api/status', fetch, { revalidateOnFocus: false });
  const { data: count, error: countError } = useSWR(
    () => `/api/count?count=${readers.length}`,
    fetch,
    { revalidateOnFocus: false },
  );

  function renderReaders() {
    if (readersError) return <div>failed to load: {readersError.message}</div>;
    if (!readers) return <div>loading...</div>;
    return (
      <ul>
        {
          readers.map(({ id, name }) =&gt; (
            <li>{name}</li>
          ))
        }</ul>

export default function useRequest<data>(
  request: GetRequest,
  { initialData, ...config }: Config = {}
): Return {
  const { data: response, error, isValidating, revalidate } = useSWR&lt;
    AxiosResponse<data>,
    AxiosError
  &gt;(request &amp;&amp; JSON.stringify(request), () =&gt; axios(request || {}), {
    ...config,
    initialData: initialData &amp;&amp; {
      status: 200,
      statusText: 'InitialData',
      config: request,
      headers: {},
      data: initialData
    }
  })

  return {
    data: response &amp;&amp; response.data,
    response,</data></data>