@drieam/react-query

Convenient hooks and utilities for React Query.

Installation

Install @drieam/react-query and its peer dependency:

$ pnpm add @drieam/react-query react-query

Configuration

The library should be configured to the needs for your app, for Eduframe it would look like this:

import type { ReactNode } from 'react';
import { notification } from "antd";
import { Configuration } from "@drieam/react-query";
import { getCSRFToken } from "@common/dom";

const configuration = new Configuration({
  defaultHeaders: {
    "X-CSRF-Token": getCSRFToken(),
    "Cache-Control": "no-cache",
    Credentials: "same-origin",
  },
  isCamelCased: false,
  notifyError: (message: ReactNode) => notification.error({ message }),
  notifySuccess: (message: ReactNode) => notification.success({ message }),
});

Usage

Next to our configuration, we have to create a QueryClient instance and set that in our ReactQueryProvider. Afterwards we can use our useFetch, useFetchInfinite, useFetchPaginated, useCreate, useUpdate, and useDelete hooks.

Hereby a useFetch example based on React Query's documentation:

import { QueryClient, QueryClientProvider } from "react-query";
import { Configuration, useFetch } from "@drieam/react-query";

interface Label {
  id: number;
  name: string;
};

const configuration = new Configuration();
const queryClient = new QueryClient();

export default function App() {
  return (
    <ReactQueryProvider configuration={configuration} queryClient={queryClient}>
      {children}
    </ReactQueryProvider>
  );
}

function Example() {
  const { data, error, isLoading } = useFetch<Label[]>("/labels");

  if (isLoading) return "Loading...";

  if (error) return "An error has occurred: " + error.message;

  return (
    <div>
      <ul>
        {data.map((label: Label) => (
          <li key={label.id}>{label.name}</li>
        ))}
      </ul>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

Hooks and utilities

• Query hooks
  • useFetch
  • useFetchInfinite
  • useFetchPaginated
  • useCreate
  • useUpdate
  • useDelete
• Infinite query hooks
  • useInfiniteData
  • useInfiniteScroll
• Utilities
  • isRequestError
• Test utilities
  • makePaginated