WunderGraph for Frontend Developers

Frontend development these days is hard, at least I think so. First you have to decide on a framework, should you choose React, or maybe Vue, or even Svelte? Once you've decided on the framework itself, you have to think about state management, routing, how to fetch data from an API, caching, authentication, security, the list goes on...

For each of the problems, there are various open source options to address them. For frontend developers, this means you have to constantly track the movements in the open source community, and build your own set of best practices to not start from zero with every project.

This is a challenge because the industry is moving so fast and new tools come and go quickly.

To work around these challenges, frameworks like NextJS, NestJS, RedwoodJS, Remix and more have evolved, each with their own opinion on how to build things.

Next and Remix are mostly focused on the "front" in frontend, NestJS focuses more on the backend and RedwoodJS tries to solve both, frontend and backend, providing a full stack solution.

So, how does WunderGraph fit into this picture and what specific problems does it solve for frontend developers?

WunderGraph is not really compatible with other opinionated full stack frameworks. That is, it wouldn't really make sense to combine Redwood with WG. That's totally fine though because they solve different problems. If you're looking for a full stack NodeJS / JavaScript solution, Redwood is probably the way to go.

WunderGraph on the other hand "can" give you a full stack developer experience, if you want to use it like that. You're able to generate complete production ready APIs without understanding anything about APIs and backends at all. Just plug in a database, and you're done with the API layer.

That said, you don't have to use generated APIs at all. WunderGraph works as well with existing GraphQL and REST APIs. In this scenario, the main benefit is that you'll get a truly end-to-end type safe client, optimized for security, performance and, most importantly, for the best possible developer experience in the frontend.

Check out one of our examples to see how the previous paragraph translates into reality. Here's a primer on how you can make use of the generated client.

Finally, WunderGraph is not opinionated on which frontend framework you work with. You can generate a pure TypeScript / JavaScript client, you can generate React hooks, you're even able to generate Form components. Keep in mind, you don't have to use the code we generate for you. You're free to build your own custom templates and generate clients in the way to best cover your use cases.

Finally, through the architecture of WunderGraph, the way we let you build APIs, combined with the generated code, WunderGraph solves the double declaration problem for you. That is, there's never the need to define types and operations multiple types. Write a query or mutation to interact with the API, use the generated code. This gives you confidence in correctness while allowing you to move extremely fast.

Note that, depending on your use case, you can easily combine WunderGraph with other tools, like e.g. react-query. In this case, just generate a pure TypeScript client and don't use the hooks or forms we generate. Or, if you want to go advanced, build your own template and generate code that uses react-query to wrap the WunderGraph client.

Key benefits of using WunderGraph for Frontend Developers#

• solves the double declaration problem
• you don't have to worry about "how" to do authentication
• you don't have to worry about caching, it just works
• mutations are CSRF protected out of the box
• WunderGraph reduces boilerplate for you by 90%
• works well with other frontend frameworks and tools
• you can become a full stack developer without knowing much about backends
• write 90% less boilerplate and focus more on the actual UI

If we had to reduce this list down to a single sentence, here's what we'd say.

Questions#

If you have questions, feel free to join us on Discord.

Next Steps#

• Try it our yourself!
• Learn more about all the features of WunderGraph