React-qwhy NPM

🚧 IMPORTANT 🚧

react-qwhy is not ready to production

⚛️ Table of Contents

About the Project

I was and still am using react-query, but it is difficult to install and setup the environment, so I thought of building my own library, developing it, and using it in my projects, so react-qwhy appeared.

Works On

Features

Esay to Use 🧠
Fully Type Safety 🌀
No Providers and all that sh^t 👌
Incredibly Fast 🚀
Scalable & Timeless in Development 🕛

Getting Started

Prerequisites

Just React Library

Installation

Install react-qwhy with npm

  npm install react-qwhy

Install react-qwhy with yarn

  yarn add react-qwhy

Install react-qwhy with pnpm

  pnpm add react-qwhy

Usage

Here's how to use useQuery

import { useQuery } from "react-qwhy";

function yourComponent() {
  ...
  // return params
  const {} = useQuery(qName: string, qFn: Function)
  ...
  return ...;
}

useQuery Return

Variable	Return Type
`status`	`number`
`isLoading`	`boolean`
`error`	`any`
`data`	`<ResultProps[]>` or `undefined`

Example

import { useQuery } from "../dist/index";

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

// fetch function //
const fetchTodos = async () => {
  const req = await fetch("https://jsonplaceholder.typicode.com/todos");
  const res = await req.json();
  return res;
};

function App() {
  /*
   * Fetch todos from [ JsonPlaceholder ]
   * Pass TodoProps as [] to useQuery()
   * Pass a name & query function to useQuery()
   */

  const { data, isLoading } = useQuery<TodoProps[]>("fetch_todos", fetchTodos);

  // When fetch progress, display h1 written in it "loading..." //
  if (isLoading) return <h1>loading...</h1>;

  // return the component //
  return (
    <>
      <ul>
        {data?.map((todo) => (
          <li key={todo.id}>
            <h1>{todo.title}</h1>
            <h5>completed? {todo.completed ? "Yes" : "No"}</h5>
            <h5>{todo.id}</h5>
            <span>{todo.userId}</span>
          </li>
        ))}
      </ul>
    </>
  );
}

export default App;