There are two dominant ways of integrating APIs as a Frontend Developer.
- You manually integrate against all the services in the Frontend
- This creates a 1:n dependency
- Infinite amounts of boilerplate
- Unmaintainable, untraceable, impossible to get analytics
- Insecure because you cannot store secrets in the Frontend
- You integrate with a Backend for Frontend.
- For security reasons, this is often your only choice
- Now you rely on a Backend Developer to write and maintain the BFF for you, this requires coordination and will block you when changes are needed
- The BFF adds complexity to your stack
- Frameworks like NextJS allow you to define API routes, but there’s no concept of API Composition. The integration glue-code is all on you.
The second option is probably the most common due to security reasons, but it comes at a cost. With WunderGraph, we can simplify this problem. Thanks to the API Composition paradigm, you can create your own BFF with almost no code.
- Add your API dependencies, as simple as npm install
- Define your Operations
- Use the generated type-safe client to connect Frontend & BFF
Benefits of using WunderGraph as a Frontend Developer
- No more 1:n dependencies, a simple 1:1 dependency between Frontend and BFF
- Zero boilerplate
- Out of the box tracing & analytics across all APIs, thanks to the Composition into one single unified API layer
- Secure, because we’re using a BFF that can hide secrets from the Frontend and handles Authentication & Authorization
- No dependency on a backend developer, you can manage the BFF on your own
- Almost no added complexity as 95% of your BFF is configuration and generated code
- You don’t need to manually write glue code. The API Composition paradigm generates one unified API layer across all your API dependencies.
Examples for Frontend Developers
Configure your Datasource
WunderGraph supports multiple datasources, for this example we'll use PostgreSQL with Next.js. This could be your own database, or managed by Neon.tech or Supabase.
Write your operations
You can use GraphQL to query your database or write TypeScript operations if you need to do more complex things, like transforming data.
Note that the
pg_ prefix is the namespace that we configured for the Postgres datasource.
Fetch the operation in your Frontend
We can now use the generated client to fetch the operation in Next.js.