wundergraph

Generated Clients

Generating clients is not a new concept. We'll explain briefly how client generated by WunderGraph are different. Our clients are not just wrappers around APIs. They are smart around Authorization, now how to login your Users, are able to fetch streams without additional dependencies and require no configuration in most cases.

Let's take a look at our client for React + Typescript as an example.

Dependency injection

ReactDOM.render(
<React.StrictMode>
<WunderGraphProvider>
<App/>
</WunderGraphProvider>
</React.StrictMode>,
document.getElementById('root')
);

For dependency injection and global state we generate the Component WunderGraphProvider. You have to wrap your entire React Application with it.

As you can see it takes zero arguments in the default state. This is because it's generated from the configuration in the console. There's no setup of additional dependencies or transports for subscriptions.

Logging in a user

const LoginLogout = () => {
const {isAuthenticated, startLogin, logout} = useWunderGraph();
const loginLogout = () => {
if (isAuthenticated) {
logout();
} else {
startLogin();
}
}
return (
<Button onClick={() => loginLogout()} variant="outline-primary">{isAuthenticated ? "Logout" : "Login"}</Button>
)
}

The generated client contains a complete Openid Connect client. Starting the flow to login a user is as simple as a single function call. All callbacks are handled for your.

Fetching data

const RocketStatusPage = () => {
const {data} = useSubscriptionRocketStatus();
if (!data){
return <p>Waiting for Events...</p>
}
return (
<p>
Speed: {data.data?.rocketStatus?.speed}
Altitude: {data.data?.rocketStatus?.altitude}
</p>
)
}

The generated client is able to invoke Queries, Mutations and Subscriptions without additional configuration. For each persisted Operation we generate all the required Models for Typescript including hooks to invoke the Operation. All this makes fetching data a simple function call.

Developer Experience

To make developing with WunderGraph a fluent experience we've built WunderGen, our code generator. WunderGen lets you watch for configuration changes to automatically re-generate your client.

{
"generate-client": "wundergen generate --apps='MyApplication' --client='myClient' --lang='typescript-react-hooks'",
"generate-client-watch": "wundergen generate --apps='MyApplication' --client='myClient' --lang='typescript-react-hooks' --watch"
}

Summary

Our generated clients make it super easy to Login your users and fetch data either synchronous or using subscriptions. You're freed up from setting up all these and can focus on what matters, building an amazing app for your users.