@openapi-qraft/react 1.10.0 → 1.10.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +14 -57
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -5,6 +5,8 @@ applications,
|
|
|
5
5
|
leveraging the power of **TanStack Query v5**. It utilizes a Proxy-based architecture to dynamically generate
|
|
6
6
|
hooks with typed parameters, ensuring that your API requests are both type-safe and efficient.
|
|
7
7
|
|
|
8
|
+
Read the full documentation at [openapi-qraft.github.io/openapi-qraft](https://openapi-qraft.github.io/openapi-qraft/).
|
|
9
|
+
|
|
8
10
|
## Features
|
|
9
11
|
|
|
10
12
|
- **Type-safe API Requests:** Utilize TypeScript for type-safe API requests, reducing runtime errors and improving
|
|
@@ -37,36 +39,19 @@ To get started with `@openapi-qraft/react`, you'll need to set up your client by
|
|
|
37
39
|
of
|
|
38
40
|
callbacks to handle various React Query functionalities.
|
|
39
41
|
|
|
40
|
-
### 1. Generate
|
|
42
|
+
### 1. Generate OpenAPI Types & Services
|
|
41
43
|
|
|
42
44
|
Before utilizing `@openapi-qraft/react` to make typed requests, you need to define your API services by generating types
|
|
43
|
-
and
|
|
44
|
-
schemas from your OpenAPI specification. This ensures that your requests are type-safe and that your development
|
|
45
|
-
experience benefits from TypeScript's power. Follow the steps below to generate your API services:
|
|
46
|
-
|
|
47
|
-
#### Generating TypeScript Definitions
|
|
48
|
-
|
|
49
|
-
First, generate TypeScript definitions from your OpenAPI schema
|
|
50
|
-
using [`openapi-typescript`](https://www.npmjs.com/package/openapi-typescript). This will provide you with
|
|
51
|
-
the necessary types for your API requests and responses.
|
|
52
|
-
|
|
53
|
-
```bash
|
|
54
|
-
npx openapi-typescript https://api.dev.monite.com/openapi.json?version=2023-09-01 --output src/api/openapi.d.ts
|
|
55
|
-
```
|
|
45
|
+
and schemas from your OpenAPI Document.
|
|
56
46
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
Next, use `@openapi-qraft/cli` to generate the services and typed TanStack Query React Hooks. Ensure to specify the path
|
|
60
|
-
to the TypeScript definitions generated in the previous step.
|
|
47
|
+
To generate both TypeScript definitions and services using `openapi-qraft`, run the following command in the root directory of your project:
|
|
61
48
|
|
|
62
49
|
```bash
|
|
63
|
-
npx @openapi-qraft/cli https://api.dev.monite.com/openapi.json?version=2023-09-01 --output-dir src/api
|
|
50
|
+
npx @openapi-qraft/cli --plugin tanstack-query-react --plugin openapi-typescript https://api.dev.monite.com/openapi.json?version=2023-09-01 --output-dir src/api
|
|
64
51
|
```
|
|
65
52
|
|
|
66
|
-
By completing
|
|
67
|
-
|
|
68
|
-
development workflow with type
|
|
69
|
-
safety and auto-completion features.
|
|
53
|
+
By completing this step, you will generate `src/api/schema.d.ts`, which serves as a TypeScript representation of the specified OpenAPI,
|
|
54
|
+
along with a set of services in `src/api/services/`.
|
|
70
55
|
|
|
71
56
|
### 2. Create API Client
|
|
72
57
|
|
|
@@ -418,34 +403,6 @@ qraft.entities.getEntities.useQueries({
|
|
|
418
403
|
});
|
|
419
404
|
```
|
|
420
405
|
|
|
421
|
-
### [useIsFetching(...) 🔗](https://openapi-qraft.github.io/openapi-qraft/docs/hooks/useIsFetching)
|
|
422
|
-
|
|
423
|
-
```tsx
|
|
424
|
-
function FetchStatus() {
|
|
425
|
-
// Checks all queries `GET /entities`
|
|
426
|
-
const fetchingTotal = qraft.entities.getEntities.useIsFetching();
|
|
427
|
-
|
|
428
|
-
// Checks all queries `GET /entities/3e3e-3e3e-3e3e` and `x-monite-version: 2023-09-01` header
|
|
429
|
-
const specificQueryKeyTotal = qraft.entities.getEntities.useIsFetching({
|
|
430
|
-
parameters: {
|
|
431
|
-
header: {
|
|
432
|
-
'x-monite-version': '2023-09-01',
|
|
433
|
-
},
|
|
434
|
-
path: {
|
|
435
|
-
entity_id: '3e3e-3e3e-3e3e',
|
|
436
|
-
},
|
|
437
|
-
},
|
|
438
|
-
});
|
|
439
|
-
|
|
440
|
-
return (
|
|
441
|
-
<>
|
|
442
|
-
{!!fetchingTotal && <div>Number of queries: {fetchingTotal}...</div>}
|
|
443
|
-
{!!specificQueryKeyTotal && <div>Loading specific query...</div>}
|
|
444
|
-
</>
|
|
445
|
-
);
|
|
446
|
-
}
|
|
447
|
-
```
|
|
448
|
-
|
|
449
406
|
## [`QueryClient`](https://tanstack.com/query/latest/docs/reference/QueryClient) Methods
|
|
450
407
|
|
|
451
408
|
#### [setQueryData(...) 🔗](https://openapi-qraft.github.io/openapi-qraft/docs/query-client/setQueryData)
|
|
@@ -458,7 +415,7 @@ qraft.pet.getPetById.setQueryData(
|
|
|
458
415
|
);
|
|
459
416
|
```
|
|
460
417
|
|
|
461
|
-
|
|
418
|
+
### [invalidateQueries(...) 🔗](https://openapi-qraft.github.io/openapi-qraft/docs/query-client/invalidateQueries)
|
|
462
419
|
|
|
463
420
|
[Queries Invalidation 🔗](https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation) is possible
|
|
464
421
|
using `<operation>.invalidateQueries(...)` method.
|
|
@@ -490,7 +447,7 @@ qraft.entities.getEntities.invalidateQueries(
|
|
|
490
447
|
);
|
|
491
448
|
```
|
|
492
449
|
|
|
493
|
-
|
|
450
|
+
#### Invalidation without _parameters_:
|
|
494
451
|
|
|
495
452
|
To invalidate all queries for a specific endpoint, you can call `invalidateQueries` without any parameters:
|
|
496
453
|
|
|
@@ -507,7 +464,7 @@ To invalidate all queries for a specific endpoint, you can call `invalidateQueri
|
|
|
507
464
|
qraft.entities.getEntities.invalidateQueries(queryClient);
|
|
508
465
|
```
|
|
509
466
|
|
|
510
|
-
|
|
467
|
+
#### Invalidation with _queryKey_:
|
|
511
468
|
|
|
512
469
|
It could be useful to invalidate queries using `queryKey` directly:
|
|
513
470
|
|
|
@@ -534,7 +491,7 @@ qraft.entities.getEntities.invalidateQueries(
|
|
|
534
491
|
);
|
|
535
492
|
```
|
|
536
493
|
|
|
537
|
-
|
|
494
|
+
#### [Invalidation with predicate: 🔗](https://tanstack.com/query/latest/docs/framework/react/guides/filters#query-filters)
|
|
538
495
|
|
|
539
496
|
The `predicate(...)` function will be used as a final filter on all matching queries.
|
|
540
497
|
|
|
@@ -562,7 +519,7 @@ qraft.entities.getEntities.invalidateQueries(
|
|
|
562
519
|
);
|
|
563
520
|
```
|
|
564
521
|
|
|
565
|
-
|
|
522
|
+
### [fetchQuery(...) 🔗](https://openapi-qraft.github.io/openapi-qraft/docs/query-client/fetchQuery)
|
|
566
523
|
|
|
567
524
|
```ts
|
|
568
525
|
/**
|
|
@@ -590,7 +547,7 @@ const posts = qraft.posts.getPosts.fetchQuery(
|
|
|
590
547
|
);
|
|
591
548
|
```
|
|
592
549
|
|
|
593
|
-
|
|
550
|
+
### [fetchInfiniteQuery(...) 🔗](https://openapi-qraft.github.io/openapi-qraft/docs/query-client/fetchInfiniteQuery)
|
|
594
551
|
|
|
595
552
|
```ts
|
|
596
553
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@openapi-qraft/react",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.1-beta.1",
|
|
4
4
|
"description": "API client for React, providing type-safe requests and dynamic Tanstack Query React Hooks via a modular, Proxy-based architecture.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "rimraf dist/ && tsc --project tsconfig.build.json",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"type": "module",
|
|
16
16
|
"sideEffects": false,
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@openapi-qraft/cli": "~1.10.
|
|
18
|
+
"@openapi-qraft/cli": "~1.10.1-beta.1",
|
|
19
19
|
"@openapi-qraft/eslint-config": "~1.0.0",
|
|
20
|
-
"@openapi-qraft/openapi-typescript-plugin": "^1.0.
|
|
20
|
+
"@openapi-qraft/openapi-typescript-plugin": "^1.0.3-beta.1",
|
|
21
21
|
"@openapi-qraft/test-fixtures": "~1.0.0",
|
|
22
22
|
"@tanstack/react-query": "^5.17.3",
|
|
23
23
|
"@testing-library/jest-dom": "^5.17.0",
|