Learn how to consume RESTful APIs with React, Vue and Svelte. Tagged with react, vue, fastify, automation.

Dev.to is a community platform for developers, offering resources, discussions, and networking opportunities to empower individuals in their coding journey. Developers can learn new programming languages, frameworks, and tools, engage in discussions on best practices, and share their experiences with fellow developers to enhance their skills and grow their professional network.

Automating the consumption of RESTful APIs in the frontend using Swagger and OpenAPI can significantly reduce boilerplate code, improve efficiency, and enhance collaboration between frontend and backend teams.

How to Automatically Consume RESTful APIs in Your Frontend

I work with OpenAPI and my current project, and our frontend setup includes <a href="https://www.npmjs.com/package/openapi-typescript" target="_blank" rel="noopener nofollow">openapi-typescript</a> and <a href="https://www.npmjs.com/package/openapi-typescript-fetch" target="_blank" rel="noopener nofollow">openapi-typescript-fetch</a>. This setup requires more boilerplate, and you have to manually specify which endpoints you want to use:
<pre><code class="language-ts">const API = {
 getUsers: fetcherUserManagement
 .path(&quot;/users&quot;)
 .method(&quot;get&quot;)
 .create(),
}
</code></pre>
But this is what we wanted to have: our API is also available as an SDK, and there are many more endpoints available than our frontend needs, so this is how we control what is actually used.
What I learned from this article is that you can generate <code>zod</code> schemas from an OpenAPI definition (and this may be a good reason to finally switch from <code>yup</code> to <code>zod</code>)