How to use the swr function in swr

To help you get started, we’ve selected a few swr 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 zeit / swr / examples / api-hooks / hooks / use-projects.js View on Github external
function useProjects() {
  return useSWR('/api/data', fetch)
}
github ejarzo / Shape-Your-Music / src / middleware / withData.js View on Github external
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 (
github openmultiplayer / web / frontend / src / pages / servers / [ip].tsx View on Github external
const Page = ({ ip, initialData }: Props) =&gt; {
  const { data, error } = useSWR(ip, getServer, {
    initialData,
  });

  return (
    &lt;&gt;
      <section>
        
          <a>Back</a>
        

        {error ?  : }
      </section>
    
  );
};
github zeit / swr / examples / basic / pages / index.js View on Github external
export default () =&gt; {
  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>
}
github umijs / umi / packages / umi-plugin-ui / src / plugins / dashboard / ui / plugins / dailyReportHeader.tsx View on Github external
const DailyReportHeader: React.SFC = props =&gt; {
  const { api } = React.useContext(Context);
  const { _, intl } = api;
  const { data: list } = useSWR('zaobao.list', async () =&gt; {
    const { data } = await api.callRemote({
      type: 'org.umi.dashboard.zaobao.list',
    });
    return data;
  });

  return (
    Array.isArray(list) &amp;&amp; (
      <select>
        {(list || []).map(item =&gt; (
          
            {moment(item.createdAt).format('YYYY-MM-DD')}
          
        ))}
      </select>
    )
github sorrycc / learn-react-with-umi / swr / layouts / index.js View on Github external
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>
github zeit / swr / examples / basic-typescript / pages / index.tsx View on Github external
export default () =&gt; {
  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>
github brianlovin / brian-lovin-next / src / pages / overthought / [slug].tsx View on Github external
export function OverthoughtPost(props: Props) {
  const initialData = props.post
  const { data: post } = useSWR(`${props.slug}`, getPostBySlug, { initialData })

  return (
    
      { post
        ? 
        : 
      }
    
  )
}
github sorrycc / learn-react-with-umi / swr / pages / index.js View on Github external
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(
    () =&gt; `/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>
github zeit / swr / examples / axios-typescript / libs / useRequest.ts View on Github external
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>

swr

React Hooks library for remote data fetching

MIT
Latest version published 3 months ago

Package Health Score

98 / 100
Full package analysis