Frontend with OpenAPI

My day job is all things backend development; well, mostly. I also love all things frontend. React, Vite and Remix have become my go-to tools for building websites and web apps. That's right, I love JavaScript, and I won't stop pushing it till we all embrace the one true language and use nothing else 🤣😉.

Anyway, jokes aside, we can agree on the importance of the API Design First approach. Can we reuse this effort that we are putting into our OpenAPI spec? Well, you're in luck. I have put some great tools together to help generate queries, hooks, validations, and more in your front end with your OpenAPI specs.

-- Alexander

Introducing a new VS Code Extension for API Insights!

Streamline your API development with quality and security assessments directly in VS Code. Enhance your work effortlessly and stay ahead in the industry. Try it now and elevate your APIs to A-grade.

Download the VS Code Extension

The API Round-Up

Our monthly round-up of articles, news and updates from APIs You Won't Hate and around the web.

Orval

Dive into the fun of coding with Orval, where turning OpenAPI specs into TypeScript magic is just a click away! It's not just about TypeScript; you can craft query code effortlessly for React, Vue, and Svelte using Tanstack Query. This combo makes building and maintaining robust web applications easier, keeping them in line with your OpenAPI spec.

Quicktype

Standing out from the other tools/libraries I recommended this week, Quicktype can work with JSON or GraphQL queries. This lets you generate types and API clients in Kotlin, Swift, TypeScript, Go, Java, and more. It is a fantastic tool for all languages.

OpenAPI Qraft

Unleash the power of Tanstack Query with OpenAPI-Qraft react client —a game-changing toolkit for React apps that simplifies API interactions. Make your development journey smooth and efficient by generating type-safe API queries from your OpenAPI spec. Dive deeper into their toolkit with the CLI package to enhance your project's automation and efficiency.

Kubb

Take things further with Kubb generating not just Tanstack Query but SWR (another popular networking library), Zod for validation, MSW for mocking and more. Kubb can build half of your front end using your OpenAPI spec —another reason to be API design first.

APIs You Won't Hate

The latest from the team at API's You Won't Hate.

How to Build a Perfect API Description

Sometimes, choosing tools and applying best practices is tricky because there are so many. Thankfully, Phil cuts through the noise and gives you the rundown on how to build the best quality OpenAPI documentation.

🎙️ Chatting with Quobix about Vacuum, WireTap, and libopenapi

On this episode of the podcast, Phil has a chat with Quobix about his tools for API linting, testing, and compliance. We hear the story behind Open Source tools Vacuum and Wiretap, and Quobix's journey building highly performant devtools with golang.

From Our Community

Articles written and shared in our free Slack community.

Documenting Ruby on Rails APIs with OpenAPI

Bump has spent much time with Phil and wrote a blog for a concise guide on documenting Ruby on Rails APIs with OpenAPI. This post offers essential insights for Rails developers aiming to enhance their API documentation, ensuring clarity and improving usability. A valuable resource for those dedicated to refining their development practices

Writing API exploits in Python

Explore the art of securing APIs with Dana Epp's enlightening blog post, focusing on crafting API exploits using Python. It's a treasure trove for developers and security buffs eager to navigate the nuances of API vulnerabilities. Dana, thank you for sharing.

Thanks so much to our members for supporting APIs You Won't Hate: Nolan S., Rüdiger S., Alex R, Vedran C, Danny S, Juxt, Kin L., and Olekshii T. Your support means the world to us!

Until next time,
Alexander, Phil & Mike