React QWhy

A React library for fetch data fast and easy!

please give us a star and if you want to contributing we will be grateful to you

🚧 IMPORTANT 🚧

react-qwhy is not ready to production

Documentation · Report Bug · Request Feature

⚛️ Table of Contents

• About the Project
• Tech Stack
• Features
• Getting Started
  • Prerequisites
  • Installation
• Usage
  • Return Type
  • Example
• Roadmap
• Contributing
• FAQ
• License
• Contact
• Acknowledgements

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

• REACT
• NEXT JS
• GATSBY
• Any Framework built-on React

Features

1. Esay to Use 🧠
2. Fully Type Safety 🌀
3. No Providers and all that sh^t 👌
4. Incredibly Fast 🚀
5. 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;

Roadmap

• [ working on ] useMutation 🔥
• [ X ] State Management 🐐
• [ Y ] Support

Contributing

Contributions are always welcome! 😇

See contributing.md for ways to get started.

FAQ

• it's work on react-native?

  • Yes

• why I use this instead of react-query?

  • Use whatever you want. 🤷

License

Distributed under the no License. See LICENSE.txt for more information.

Contact

Ali Elmalki - @npm - [e-mail]

Project Link: https://github.com/aliel0malki/react-qwhy

Acknowledgements

useful resources and libraries we have used in react-qwhy.

• React
• Vite
• Vitest
• RollUp