@defjs/react 0.0.1 → 0.0.2
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/README.md +22 -41
- package/index.d.ts +3 -1
- package/index.js +3 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
# @defjs/react
|
|
2
2
|
|
|
3
|
-
Thin React plugin for `@defjs/core
|
|
3
|
+
Thin React plugin for `@defjs/core`: it provides an application-owned client through React Context. It adds no query layer, cache, Suspense integration, or state management, and never creates, replaces, or disposes a client.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
This plugin is optional: import a fixed application-owned client, pass a `Client` explicitly, use Context for tree-level defaults and overrides, or choose your own organization. SDK definitions do not require this plugin. Share an instance only when its captured configuration and state are safe to share; request-specific identity or credentials belong to the appropriate request boundary.
|
|
8
|
-
|
|
9
|
-
Supports React 18+.
|
|
5
|
+
Keeping SDK definitions in their own package means the SDK needs no React dependency. Requires React 18 or later; the published entry is marked `'use client'`.
|
|
10
6
|
|
|
11
7
|
## Install
|
|
12
8
|
|
|
@@ -14,20 +10,12 @@ Supports React 18+.
|
|
|
14
10
|
bun add @defjs/core @defjs/react react
|
|
15
11
|
```
|
|
16
12
|
|
|
17
|
-
The package is ESM and requires `@defjs/core` as a peer in the `^0.
|
|
18
|
-
|
|
19
|
-
## What this package does
|
|
20
|
-
|
|
21
|
-
`ClientProvider` exposes the exact `Client` instance supplied by the application. `useClient()` reads the nearest provided instance.
|
|
22
|
-
|
|
23
|
-
Client creation and configuration stay in `@defjs/core`. The plugin does not create, cache, replace, dispose, abort, or close anything on behalf of the application, and it does not add a query layer, Suspense integration, GraphQL client, or application state management.
|
|
24
|
-
|
|
25
|
-
## Quick Start
|
|
13
|
+
The package is ESM and requires `@defjs/core` as a peer in the `^0.5.0` range.
|
|
26
14
|
|
|
27
|
-
|
|
15
|
+
## Quick start
|
|
28
16
|
|
|
29
17
|
```tsx
|
|
30
|
-
// api.ts
|
|
18
|
+
// api.ts — reusable definition
|
|
31
19
|
import { defineRequest, struct } from "@defjs/core";
|
|
32
20
|
|
|
33
21
|
export const getUser = defineRequest({
|
|
@@ -39,8 +27,6 @@ export const getUser = defineRequest({
|
|
|
39
27
|
});
|
|
40
28
|
```
|
|
41
29
|
|
|
42
|
-
Create and own the client at the application boundary, then provide it:
|
|
43
|
-
|
|
44
30
|
```tsx
|
|
45
31
|
// app.tsx
|
|
46
32
|
import { createClient, withEndpoint } from "@defjs/core";
|
|
@@ -58,7 +44,7 @@ export function App() {
|
|
|
58
44
|
}
|
|
59
45
|
```
|
|
60
46
|
|
|
61
|
-
Read the client
|
|
47
|
+
Read the client with `useClient()` and own request cleanup where the work starts:
|
|
62
48
|
|
|
63
49
|
```tsx
|
|
64
50
|
import { useEffect, useState } from "react";
|
|
@@ -72,17 +58,16 @@ export function UserProfile({ id }: { id: number }) {
|
|
|
72
58
|
useEffect(() => {
|
|
73
59
|
const abort = new AbortController();
|
|
74
60
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
.execute(command, { signal: abort.signal })
|
|
78
|
-
.then(([error, user]) => {
|
|
61
|
+
void getUser(client({ abort: abort.signal }), { id }).then(
|
|
62
|
+
([error, user]) => {
|
|
79
63
|
if (abort.signal.aborted) return;
|
|
80
64
|
if (error) {
|
|
81
65
|
setName(error.message);
|
|
82
66
|
return;
|
|
83
67
|
}
|
|
84
68
|
setName(user.name);
|
|
85
|
-
}
|
|
69
|
+
},
|
|
70
|
+
);
|
|
86
71
|
|
|
87
72
|
return () => abort.abort();
|
|
88
73
|
}, [client, id]);
|
|
@@ -91,31 +76,27 @@ export function UserProfile({ id }: { id: number }) {
|
|
|
91
76
|
}
|
|
92
77
|
```
|
|
93
78
|
|
|
94
|
-
Nested providers follow normal React Context rules: descendants receive the nearest provider's exact client. Supplying a different `client` prop changes the provided value; the plugin does not invent a remount or caching policy.
|
|
95
|
-
|
|
96
79
|
## API
|
|
97
80
|
|
|
98
|
-
### `<ClientProvider client
|
|
81
|
+
### `<ClientProvider client={client}>`
|
|
99
82
|
|
|
100
|
-
Provides the supplied
|
|
83
|
+
Provides the exact supplied `Client` to descendants. Nested providers follow normal React Context rules.
|
|
101
84
|
|
|
102
|
-
### `useClient(): Client`
|
|
85
|
+
### `useClient(overrideClient?): Client`
|
|
103
86
|
|
|
104
|
-
|
|
105
|
-
function useClient(overrideClient?: Client): Client;
|
|
106
|
-
```
|
|
87
|
+
Returns `overrideClient` when supplied, otherwise the nearest provided client. Throws only when neither source supplies one. Call it at the top level of a component or Hook — never as `explicitClient ?? useClient()`, which conditionally calls a Hook. The override does not write Context.
|
|
107
88
|
|
|
108
|
-
|
|
89
|
+
## Notes
|
|
109
90
|
|
|
110
|
-
|
|
91
|
+
- `Client` is a function. `useClient()` returns that same function. Do not pass it to `useState` or a state setter: React calls a function argument as a lazy initializer or an updater and will invoke the client.
|
|
92
|
+
- Create request-specific clients (SSR data with credentials, cookies, or tenant state) at the application boundary.
|
|
93
|
+
- The owner that creates a client also owns its requests, SSE streams, and WebSocket sessions. Provider unmount does not clean them up.
|
|
94
|
+
- Import `createClient`, `withEndpoint`, `withInterceptors`, and other client options from `@defjs/core`.
|
|
111
95
|
|
|
112
|
-
##
|
|
96
|
+
## Documentation
|
|
113
97
|
|
|
114
|
-
-
|
|
115
|
-
- Create request-specific clients at the application boundary for SSR data that contains credentials, cookies, or tenant state.
|
|
116
|
-
- The owner that creates a client also owns all requests, SSE streams, and WebSocket sessions started through it. Provider unmount does not clean them up automatically.
|
|
117
|
-
- Import `createClient`, `withEndpoint`, `withInterceptors`, and all other client options from `@defjs/core`.
|
|
98
|
+
- [React API](https://defjs.lyz.cloud/api/react) · [React guide](https://defjs.lyz.cloud/docs/integrations/react)
|
|
118
99
|
|
|
119
100
|
## License
|
|
120
101
|
|
|
121
|
-
MIT
|
|
102
|
+
MIT.
|
package/index.d.ts
CHANGED
|
@@ -33,8 +33,10 @@ export declare function ClientProvider({ client, children }: ClientProviderProps
|
|
|
33
33
|
*
|
|
34
34
|
* Always call `useClient(explicitClient)` at the top level of a component or custom Hook, even with an explicit client; not in an ordinary function or event callback. Do not write `explicitClient ?? useClient()`, which conditionally calls a Hook. The override does not write Context or create a provider, and the Hook still subscribes to Context.
|
|
35
35
|
*
|
|
36
|
+
* The returned value is that same function. `Client` is callable, so do not pass it to `useState` or a state setter: React calls a function argument as a lazy initializer or an updater.
|
|
37
|
+
*
|
|
36
38
|
* @param overrideClient - Client to use before context; `undefined` uses the provider.
|
|
37
|
-
* @returns The selected
|
|
39
|
+
* @returns The selected client function.
|
|
38
40
|
* @throws If neither an explicit client nor a `ClientProvider` is available.
|
|
39
41
|
*
|
|
40
42
|
* @example
|
package/index.js
CHANGED
|
@@ -25,8 +25,10 @@ function ClientProvider({ client, children }) {
|
|
|
25
25
|
*
|
|
26
26
|
* Always call `useClient(explicitClient)` at the top level of a component or custom Hook, even with an explicit client; not in an ordinary function or event callback. Do not write `explicitClient ?? useClient()`, which conditionally calls a Hook. The override does not write Context or create a provider, and the Hook still subscribes to Context.
|
|
27
27
|
*
|
|
28
|
+
* The returned value is that same function. `Client` is callable, so do not pass it to `useState` or a state setter: React calls a function argument as a lazy initializer or an updater.
|
|
29
|
+
*
|
|
28
30
|
* @param overrideClient - Client to use before context; `undefined` uses the provider.
|
|
29
|
-
* @returns The selected
|
|
31
|
+
* @returns The selected client function.
|
|
30
32
|
* @throws If neither an explicit client nor a `ClientProvider` is available.
|
|
31
33
|
*
|
|
32
34
|
* @example
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@defjs/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Provide an existing Defjs client to a React tree.",
|
|
5
5
|
"bugs": {
|
|
6
6
|
"url": "https://github.com/defjs/defjs/issues"
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"main": "./index.js",
|
|
15
15
|
"types": "./index.d.ts",
|
|
16
16
|
"peerDependencies": {
|
|
17
|
-
"@defjs/core": "^0.
|
|
17
|
+
"@defjs/core": "^0.5.0",
|
|
18
18
|
"react": ">=18.0.0"
|
|
19
19
|
},
|
|
20
20
|
"module": "./index.js",
|