Installation

Get started with qortex in your project. Installation is simple and takes just a few minutes.

Requirements

  • React 18 or higher
  • TypeScript 5.0 or higher (recommended)
  • Node.js 16 or higher

Choose Your Package

For React Applications

Use qortex-react for complete React integration with hooks

# Using npm
npm install qortex-react

# Using pnpm
pnpm add qortex-react

# Using yarn
yarn add qortex-react

Includes qortex-core automatically

For Other Frameworks

Use qortex-core for framework-agnostic data fetching

# Using npm
npm install qortex-core

# Using pnpm
pnpm add qortex-core

# Using yarn
yarn add qortex-core

Use with Vue, Svelte, or vanilla JavaScript

Setup Steps

Choose Your Package

Step 1

Select the package that fits your framework

// For React applications
import { useQuery, registerFetcher, setDefaultConfig } from "qortex-react";

// For other frameworks
import { registerFetcher, setDefaultConfig } from "qortex-core";

Import and Setup

Step 2

Import qortex in your application

import { useQuery, registerFetcher, setDefaultConfig } from "qortex-react";

// Set global defaults (optional)
setDefaultConfig({
  staleTime: 5 * 60 * 1000, // 5 minutes
  refetchOnSubscribe: "stale",
  throttleTime: 100,
  usePreviousDataOnError: false
});

Register Fetchers

Step 3

Register your data fetching functions

// Register a fetcher
registerFetcher(["todos"], {
  fetcher: async () => {
    const response = await fetch("/api/todos");
    return response.json();
  },
  placeholderData: []
});

Use in Components

Step 4

Start using qortex in your React components

function TodosList() {
  const { data, isLoading, error, refetch } = useQuery(["todos"]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <ul>
        {data?.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

Package Information

qortex-react

< 2KB gzipped

Complete React data fetching solution (includes qortex-core)

Best for: React applications

Features:

  • useQuery hook
  • useQueryData hook
  • Query management
  • Caching
  • Deduplication
  • Background updates
  • React integration

qortex-core

< 2KB gzipped

Framework-agnostic data fetching library

Best for: Vue, Svelte, vanilla JS

Features:

  • Query management
  • Caching
  • Deduplication
  • Background updates
  • TypeScript support
  • Framework agnostic

Next Steps

Now that you have qortex installed, you're ready to start building amazing applications!

Basic Usage GuideAPI Reference