0.11.4 โข Published 22 hours ago
@data-client/react v0.11.4
Define your async methods. Use them synchronously in React. Instantly mutate the data and automatically update all usages.
For REST, GraphQL, Websockets+SSE and more
๐Read The Docs ย |ย ๐Getting Started ย |ย ๐ฎTodo Demo ย |ย ๐ฎGithub Demo ย |ย ๐ฎNextJS SSR Demo
Installation
npm install --save @data-client/react @data-client/rest @data-client/test @data-client/hooks
For more details, see the Installation docs page.
Usage
Simple TypeScript definition
class User extends Entity {
id = '';
username = '';
pk() {
return this.id;
}
}
class Article extends Entity {
id = '';
title = '';
body = '';
author = User.fromJS();
createdAt = Temporal.Instant.fromEpochSeconds(0);
pk() {
return this.id;
}
static schema = {
author: User,
createdAt: Temporal.Instant.from,
};
}
Create collection of API Endpoints
const UserResource = createResource({
path: '/users/:id',
schema: User,
optimistic: true,
});
const ArticleResource = createResource({
path: '/articles/:id',
schema: Article,
searchParams: {} as { author?: string },
optimistic: true,
paginationField: 'cursor',
});
One line data binding
const article = useSuspense(ArticleResource.get, { id });
return (
<article>
<h2>
{article.title} by {article.author.username}
</h2>
<p>{article.body}</p>
</article>
);
Reactive Mutations
const ctrl = useController();
return (
<CreateProfileForm
onSubmit={data => ctrl.fetch(UserResource.getList.push, { id }, data)}
/>
<ProfileForm
onSubmit={data => ctrl.fetch(UserResource.update, { id }, data)}
/>
<button onClick={() => ctrl.fetch(UserResource.delete, { id })}>Delete</button>
);
Subscriptions
const price = useLive(PriceResource.get, { symbol });
return price.value;
Type-safe Imperative Actions
const ctrl = useController();
ctrl.expireAll(ArticleResource.getList);
ctrl.invalidate(ArticleResource.get, { id });
ctrl.invalidateAll(ArticleResource.getList);
ctrl.setResponse(ArticleResource.get, { id }, articleData);
ctrl.fetch(ArticleResource.get, { id });
Programmatic queries
const queryTotalVotes = new schema.Query(
new schema.All(Post),
(posts, { userId } = {}) => {
if (userId !== undefined)
posts = posts.filter(post => post.userId === userId);
return posts.reduce((total, post) => total + post.votes, 0);
},
);
const totalVotes = useQuery(queryTotalVotes);
const totalVotesForUser = useQuery(queryTotalVotes, { userId });
Powerful Middlewares
class LoggingManager implements Manager {
getMiddleware = (): Middleware => controller => next => async action => {
console.log('before', action, controller.getState());
await next(action);
console.log('after', action, controller.getState());
};
cleanup() {}
}
Integrated data mocking
const fixtures = [
{
endpoint: ArticleResource.getList,
args: [{ maxResults: 10 }] as const,
response: [
{
id: '5',
title: 'first post',
body: 'have a merry christmas',
author: { id: '10', username: 'bob' },
createdAt: new Date(0).toISOString(),
},
{
id: '532',
title: 'second post',
body: 'never again',
author: { id: '10', username: 'bob' },
createdAt: new Date(0).toISOString(),
},
],
},
{
endpoint: ArticleResource.update,
response: ({ id }, body) => ({
...body,
id,
}),
},
];
const Story = () => (
<MockResolver fixtures={options[result]}>
<ArticleList maxResults={10} />
</MockResolver>
);
...all typed ...fast ...and consistent
For the small price of 9kb gziped. ย ย ๐Get started now
Features
- Strong Typescript inference
- ๐ React Suspense support
- ๐งต React 18 Concurrent mode compatible
- ๐ฆ Partial Hydration Server Side Rendering
- ๐ฃ Declarative API
- ๐ Composition over configuration
- ๐ฐ Normalized caching
- ๐ฅ Tiny bundle footprint
- ๐ Automatic overfetching elimination
- โจ Optimistic updates
- ๐ง Flexible to fit any API design (one size fits all)
- ๐ง Debugging and inspection via browser extension
- ๐ณ Tree-shakable (only use what you need)
- ๐ Subscriptions
- โป๏ธ Optional redux integration
- ๐ Storybook mocking
- ๐ฑ React Native support
- โ๏ธ NextJS support
- ๐ฏ Declarative cache lifetime policy
- ๐ง Composable middlewares
- ๐ฝ Global data consistency guarantees
- ๐ Automatic race condition elimination
- ๐ฏ Global referential equality guarantees
Examples
API
- Rendering: useSuspense(), useLive(), useCache(), useDLE(), useQuery()
- Event handling: useController() returns Controller
- Components: <CacheProvider/>, <AsyncBoundary/>, <ErrorBoundary/>
- Middleware: LogoutManager, NetworkManager, SubscriptionManager, PollingSubscription, DevToolsManager
0.11.4
22 hours ago
0.11.2
10 days ago
0.11.0
19 days ago
0.10.0
3 months ago
0.9.9
5 months ago
0.9.7
7 months ago
0.9.6
7 months ago
0.9.4
7 months ago
0.9.3
7 months ago
0.9.2
8 months ago
0.9.0
8 months ago
0.8.1
8 months ago
0.8.0
8 months ago
0.4.3
8 months ago
0.4.2
8 months ago
0.4.1
9 months ago
0.4.0
9 months ago
0.3.0
9 months ago
0.2.3
9 months ago
0.2.2
9 months ago
0.2.1
10 months ago
0.2.0
10 months ago
0.1.0
10 months ago