Build UI component and sync with data
Kunyora makes it easy to sync your UI's with your restful store by removing the complexity in writing imperative code and replacing these code with declarative code without complicating data flow. <Query
operation="getPostCount"
options={{fetchPolicy: "network-only",config: { params: { category: "education" } }}}>
{(postCount, fetchMore, refetchQuery) => <Counter items={postCount.data} />}
</Query>
Write Code that are not just reusable, but also composable and disposable.
Kunyora extends axios by making it easy to integrate data with your UI's. With react-kunyora, you don't need to think about managing request states, neither do you need to think about managing loading, error or even data notifications imperatively. You can now build apps that are not just resuable, but also composable and disposable. <Mutation
operation="createUser">
{(mutationState, mutate) => (
<button onClick={() => mutate({data: {name: "Gbenga"}})}>
Add User
</button>
)}
</Mutation>
Build for both native Android and Ios Platforms in React-Native
With Kunyora and its integrations with client libraries such as React Native, you can compose your native views exposed by this libraries with data from your restful Api. Its easy and works in the same pattern as the web. Same API for every purpose renderLoadingIndicator = () => (
<ActivityIndicator
animating={true}
size={30}
color="#263238"
/>
)
render(){
return (
<Query
operation="getRecords"
renderLoading={this.renderLoadingIndicator()}
>
{(feeds, fetchMore, refetchQuery) => (
<View>
<Text>{feeds.data}</Text>
</View>
)}
</Query>
)
}
Manage Request Prefetch before Route Push
You can manage the prefetch of requests before a page transition occurs. In essence, Kunyora helps you store the response of a requested route even before a page transition occurs. <Router
name="content_router_link"
resources={[{operation: "getAdminPosts",fetchPolicy: "network-only"},{operation: "getUserLikes", fetchPolicy: "cache-first"}]}
loader={() => import("../Content")}
onRequestRoute={() => this.props.history.push("/content/1?draft=false")}>
{(routeState, fetchProgress, push) => {
let _props = {routeState, fetchProgress, push};
return (
<HomeScreen {..._props}/>
);
}}
</Router>