fets-react-query-wrapper

A React wrapper for react-query and fets library.

Make HTTP requests without effort and typed-safe based on OpenApi.

Requirements

You must have react-query@4 and fets installed on your app.

# pnpm
pnpm add react-query@4 fets

Getting started

# pnpm
pnpm add fets-react-query-wrapper

Configuration

import { createClient, type NormalizeOAS } from "fets";

import type oas from "./oas";

export const NotificationsClient =
  createClient <
  NormalizeOAS <
  typeof oas >>
    {
      endpoint: "http://localhost:4799",
    };

createResource to create a Resource Component

import { createResource } from "fets-react-query-wrapper";
import { NotificationsClient } from "./notifications-client";

export const NotificationsResource = createResource({
  client: NotificationsClient,
});

Usage

import { NotificationsResource } from "./api/notifications-wrapper";

function App() {
  return (
    <NotificationsResource
      path="/notifications"
      render={({ data }) => {
        return (
          <ul>
            {data?.notifications?.map((notification) => (
              <li key={notification.id}>{notification.titulo}</li>
            ))}
          </ul>
        );
      }}
    ></NotificationsResource>
  );
}

export default App;