SWF

simple manager api fetch inspired by SWR

Installation

npm install @raulpesilva/swf

or

yarn add @raulpesilva/swf

TODO

• [ ] - Examples
• [ ] - Tests
• [ ] - Doc

Usage

import useSWF from '@raulpesilva/swf'


type TodoProps = {
  id: number;
  userId: number;
  title: string;
  completed: boolean
}

const instanceGet = async (url: Url) => await fetch(url, { method: 'get' }).then(data => data.json())

const Foo = () => {
  const { loading, send, error, result } = useSWF<TodoProps[]>('https://jsonplaceholder.typicode.com/todos', instanceGet);

  useEffect(() => {
    send();
  }, [send]);

  if (loading) return <div>loading...</div>;
  if (error) return <div>{JSON.stringify(error)}</div>;
  if (!result?.length) return <div>Empty</div>;
  return (
    <div>
      {result.map((todo) => {
        return (
          <div key={todo.id}>
            <p>{todo.title}</p>
            <input type="checkbox" checked={todo.completed} />
          </div>
        );
      })}
    </div>
  );
};

or

import useSWF from '@raulpesilva/swf'


type TodoProps = {
  id: number;
  userId: number;
  title: string;
  completed: boolean
}

const instanceGet = async (url: Url) => await fetch(url, { method: 'get' }).then(data => data.json())

const Foo = () => {
  const { loading, send, error, result, preFetch } = useSWF<TodoProps[]>('https://jsonplaceholder.typicode.com/todos', instanceGet);

  useEffect(() => {
    preFetch();
  }, [preFetch]);

  const handleSendRequest = () => {
    send();
  };

  if (loading) return <div>loading...</div>;
  if (error) return <div>{JSON.stringify(error)}</div>;
  if (!result?.length)
    return (
      <div>
        <h1>Empty</h1>
        <button onClick={handleSendRequest}>Request todos</button>
      </div>
    );
  return (
    <div>
      {result.map((todo) => {
        return (
          <div key={todo.id}>
            <p>{todo.title}</p>
            <input type="checkbox" checked={todo.completed} />
          </div>
        );
      })}
    </div>
  );
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT © raulpesilva