New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@simple-api/react

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@simple-api/react - npm Package Compare versions

Comparing version
1.0.6
 to
1.0.7
+1
-1
package.json
{
"name": "@simple-api/react",
"version": "1.0.6",
"version": "1.0.7",
"description": "React TanStack Query adapter for SimpleAPI Engine",

@@ -5,0 +5,0 @@ "main": "./dist/index.js",

+31
-58
README.md

@@ -0,1 +1,5 @@

<p align="center">
<img src="../../public/logo.png" width="200" alt="simple-api logo">
</p>
# @simple-api/react

@@ -5,11 +9,16 @@

@simple-api/react provides a seamless bridge between your API definitions and React components. It automatically generates type-safe hooks for every endpoint, with built-in support for mutations, intelligent query invalidation, and global synchronization.
@simple-api/react provides a seamless bridge between your API definitions and React components. It automatically generates type-safe hooks for every endpoint, with built-in support for mutations, wildcard query invalidation, and global synchronization.
---
## Key Features
- **Auto-generated Hooks**: Every endpoint becomes a hook (e.g., `api.users().get()`).
- **Smart Invalidation**: Pass `invalidates: ['users']` to a mutation to automatically refresh related data across the entire application.
- **Wildcard Invalidation**: Nuke entire service caches with `invalidates: ['users/*']`.
- **Deep Type Safety**: Full inference from your core API definition down to the component props.
- **TanStack v5 Support**: Leverages the latest query patterns, including `isPending`, `isError`, and the improved `useMutation` API.
- **TanStack v5 Support**: Native support for the latest query features (`isPending`, `isError`, etc.).
- **Deduplication Integration**: Seamlessly works with the core engine's request deduplication.
---
## Installation

@@ -21,2 +30,4 @@

---
## Quick Start

@@ -27,3 +38,2 @@

```typescript
// api.ts
import { createApi } from "@simple-api/core";

@@ -45,16 +55,10 @@ import { createReactAdapter } from "@simple-api/react";

### 2. Fetching Data (Queries)
### 2. Fetching Data
The React adapter creates a structured hook system that mirrors your API definition.
```tsx
export const UserProfile = ({ id }) => {
const { users } = useApi();
const { data, isLoading } = users().get({ params: { id } });
// The queryKey is automatically managed: ['users', 'get', { id }]
const { data, isLoading, error } = users().get({ params: { id } });
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return <h1>{data.name}</h1>;

@@ -64,49 +68,23 @@ };

### 3. Updating Data (Mutations)
---
The adapter simplifies mutations by handling the `execute` function and query invalidation automatically.
## Advanced Invalidation
```tsx
export const UpdateProfile = () => {
const { users } = useApi();
### Wildcard Patterns
const { execute, isPending } = users().update({
params: { id: "123" },
invalidates: ["users"], // Automatically refreshes the user list!
});
The adapter supports wildcard invalidation strings to clear complex cache segments easily.
return (
<button disabled={isPending} onClick={() => execute({ name: "New Name" })}>
{isPending ? "Saving..." : "Save Changes"}
</button>
);
};
```tsx
const { execute } = users().update({
params: { id: "123" },
invalidates: ["users/*"], // Invalidates every query in the 'users' service
});
```
## Advanced Concepts
---
### Invalidation Strategies
## Hook Options
The `invalidates` property is powerful. You can invalidate by service name or by specific query keys.
Standard TanStack Query options can be passed via `hookOptions`.
- `invalidates: ["users"]`: Invalidates every query within the `users` service.
- `invalidates: ["users.list"]`: Refines invalidation to a specific endpoint.
### Handling ApiError
Since the adapter is built on `@simple-api/core`, hooks will throw structured `ApiError` instances.
```tsx
const { error } = users().get({ params: { id } });
if (error instanceof ApiError) {
console.log(error.status); // e.g., 401
console.log(error.data); // Server-side error payload
}
```
### Hook Options
You can pass standard TanStack Query options directly to the hooks via the `hookOptions` property:
```typescript

@@ -116,4 +94,4 @@ users().get({

hookOptions: {
staleTime: 1000 * 60 * 10,
gcTime: 1000 * 60 * 60,
staleTime: 600000,
gcTime: 3600000,
enabled: !!id,

@@ -124,11 +102,6 @@ },

## Why use this adapter?
---
1. **Eliminate String Keys**: Never type a `queryKey` manually again.
2. **Centralized Logic**: Your API structure is the single source of truth.
3. **Consistency**: Forces a clean, service-oriented pattern across your entire frontend team.
4. **Resilience**: Inherits all global and service-level middlewares from your core engine.
## License
MIT © Elnatan Samuel