Improved Front-End Code Sharing: Data Client
A goal is to try and get our web and desktop app to share more code. This will result in less bugs and faster feature development.
1
Problem
Right now, every "smart" component which fetches data cannot be shared between web and desktop, due to the way data is loaded through the hooks, React Query, and either grpc or our rest web API.
1
Solution
Create a new seed client abstraction in typescript which supports a number of functions which are defined in TS on top of the grpc API.
type DataAPIMutation = {
path: string[]
input: Record<string, unknown>
result: unknown
}
type DataAPIQuery = {
path: string[]
arguments: Record<string, unknown>
result: unknown
}1
First these APIs must be defined,
registerQuery(['feed'], async (input: { docId: string | null }) => {
return grpcClient.feed.getFeed({ id: input.docId })
})Then the new API can be consumed from the shared component:
useData(['feed'], { docId: 'hm://asdf' })We would use similar patterns for writing data to the backend
Powered by Seed Hypermedia