How to integrate WunderGraph with your frontend application

Unifying components into one reduces complexity. You can adopt this approach in GraphQL by combining REST APIs, database APIs, and GraphQL APIs, to perform better when querying large supergraphs and microservices.

However, handling big data and scaling it is a heavy task. To simplify the process, companies employ tools that help you manage and unify APIs, such as Apollo Federation and WunderGraph. These platforms help you manage and unify APIs.

In this article, we will learn how to integrate the popular WunderGraph library into a frontend application. In addition, we will compare Apollo Federation and WunderGraph to find the best platform for unifying APIs.

The downsides of using multiple APIs without unifying them

Working with multiple APIs introduces many complexities that make it difficult to optimize code and manage API endpoints and secrets. Each API has its own protocols, data formats, and authentication mechanisms, making configuration a time-consuming process.

Redundancy and overheard data calls can occur when working with multiple APIs, leading to increased data transmission and higher costs. In addition, calling an application with multiple APIs becomes a cumbersome process because it requires handling several APIs simultaneously.

What is WunderGraph?

WunderGraph is the ultimate Apollo GraphQL competitor. WunderGraph is a framework that unifies GraphQL schema and APIs to create one endpoint. WunderGraph unifies your APIs and gives you metrics and observability on how your unified APIs are performing. Unifying APIs simplifies the process of executing tasks that require the interaction of different software services.

WunderGraph is open sourced under the Apache License, and contributions to future versions are welcome via their GitHub repository. WunderGraph also offers an npm-accessible library that provides JavaScript SDKs for various frameworks. To reduce complexity, WunderGraph treats distributed and dynamic services like a monolith, making them easier to access. This is achieved by combining multiple APIs into one, akin to how monoliths unify many services into a single large application.

WunderGraph is free for hobbyists and it has three paid tiers: Launch, Scale, and Enterprise.

WunderGraph also acts as a package manager for APIs, enabling you to install API dependencies. The API package manager allows developers to seamlessly integrate and manage API dependencies, similar to how one would handle library dependencies in software projects. It supports the following frameworks:

• Next.js
• Remix
• Relay
• Nuxt.js
• Sveltekit
• Astro
• Expo

Unifying APIs removes the need for additional coding and simplifies the integration and management of multiple APIs. WunderGraph leverages two patterns to unify APIs: the Backend for Frontend (BFF) framework and the API gateway.

The BFF framework focuses on creating backend components and services for your frontend application that address the unique needs of your application. This framework improves performance and simplifies client code. The BFF framework aims to solve problems where a single API fails to meet all your application’s needs, either by under-fetching or over-fetching data. The “one API fits all” approach doesn’t always work effectively.

The API gateway acts as a single entry point and proxy for external clients to access application services. API gateways are good at load balancing and service composition and help abstract the complexity of microservices. This compatibility allows developers to seamlessly connect their applications to different data storage solutions, enabling efficient data retrieval, manipulation, and management directly from within the WunderGraph interface.

WunderGraph enables you to turn queries into live queries, which enable smooth GraphQL subscriptions. You can do this by exporting WundergraphOperations using the following statement:

export default configureWunderGraphOperations<OperationsConfiguration>({
  operations: {

Below is a comparison showing how swift it is to convert a regular into a live query that polls every three seconds:

query BestBooks {
  bestBooks {
    author
    title
    price
  }
}

export default configureWunderGraphOperations<OperationsConfiguration>({
  operations: {
    queries: {
      BestBooks: (config) => ({
        liveQuery: {
          enable: true,
          pollingIntervalSeconds: 3,
        },
      }),
    },
  },
});

You can also use JWT and OAuth2 to get fine-grained access. Wundergraph utilizes Clerk API JWT templates. Clerk API is great at managing JWT and API keys. Below is an example of a Clerk JWT template you can use:

{
  "id": "{{user.id}}",
  "email": "{{user.primary_email_address}}",
  "username": "{{user.username}}",
  "firstName": "{{user.first_name}}"
}

To boost security, you can enable tokens that allow users to make authorized requests and prevent replay attacks. And you can add authentication third-party vendors to WunderGraph such as:

• Auth0
• Google
• GitHub

How to unify APIs using WunderGraph in Next.js

The WunderGraph SDK provides all the functions you need to unify your APIs. WunderGraph can be installed through the Node package manager.

Install WunderGraph SDK using the following command:

npm i @wundergraph/sdk

After installing WunderGraph, use the npx create-wundergraph-app command to create a new project followed by the project’s name. If you have an existing Next.js project in your current project directory and would like to add WunderGraph to the project, run the following command:

npx create-wundergraph-app --init

Unifying APIs

WunderGraph simplifies API unification and management by providing many functions that integrate various APIs seamlessly, allowing you to create a unified endpoint from different frameworks.

Start by connecting and examining your PostgreSQL database using the introspect.postgresql function from the WunderGraph library. This will enable you to retrieve information from the database you provided using the provided URL. Your URL should state the credentials and localhost. apiNamaspace acts as a unique identifier for your API:

const mydatabase = introspect.postgresql({
    apiNamespace: "mydatabase",
    databaseURL: "[enter database URL here]",
});

When adding details about your API, whether you want to unify your GraphQL API or REST API, use the same code snippet you previously used. Next, provide your GraphQL API URL while still using the introspect.postgresql function. This will help WunderGraph understand your GraphQL schema:

const mygraph = introspect.graphql({
    apiNamespace: "mygraph",
    url: "[enter the GraphQL API here ]",
});

After specifying and introspecting the APIs you want to combine, use the following code to unify them by adding them to the WunderGraph application. You can add more than two APIs to the application depending on your Next.js project needs:

const myApplication = new Application({
    name: "api",
    apis: [
        mydatabase,
        mygraph,
    ],
});

Apollo GraphQL solutions vs. WunderGraph

Apollo GraphQL solutions have been around for the past six years. Apollo GraphQL is one of the most successful and trusted GraphQL solutions used by big companies such as the New York Times, PayPal, and Netflix.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Apollo GraphQL offers many features and solutions to improve GraphQL performance but two there are two solutions that compete with WunderGraph: Apollo Federation and GraphOS.

As you unify multiple GraphQL APIs using Apollo Federation, the GraphQL schemas combine to create a supergraph. Supergraphs can be managed and scaled using Apollo GraphOS, which hosts the supergraphs in the cloud and keeps a schema registry of all the subgraphs that make up your supergraph.

GraphOS provides a unified security layer for the supergraph subgraphs and a router for each supergraph. This router acts as an access point for client requests and directs the requests to the specific subgraph of the supergraph. Apollo GraphOS and Apollo Federation work in coordination when managing unified schemas and APIs. Apollo Federation is responsible for scaling unified APIs while Apollo Graph OS is responsible for scaling supergraphs.

Apollo Federation, similar to WunderGraph, unifies GraphQL APIs into one endpoint. Apollo Federation is ideal for microservices because it enables you to access and query multiple APIs using one request. When a client makes a request, it will be handled by the router, which will query the connected APIs to give you one unified result.

Below are key factors that compare Apollo Federation and WunderGraph:

• Data fetching and schema federation: To improve data fetching efficiency, Apollo offers automatic persisted queries, which boost response time and reduce overhead. On the other hand, WunderGraph enables you to fetch data from multiple sources and implement live queries on any system, thus enabling real-time services. But Apollo offers better schema federation because it has many features that enable you to manage supergraphs, such as GraphOS
• Deployment and scalability: WunderGraph improves deployment by offering edge caching and auto-scaling to deployment performance. In addition, you can deploy your project to WunderGraph Cloud and WunderGraph will focus on managing your project’s infrastructure while you focus on building the project. Apollo GraphQL is flexible when it comes to deployments. You can deploy your project with many vendors such as Heroku and Netlify
• Performance: Apollo GraphQL offers many features, such as query batching, persisted queries, and caching, that boost graph performance. WunderGraph offers query and HTTP layer caching to improve performance
• Security: WunderGraph and Apollo both provide third-party authentication vendors such as Auth0 and use tokens for managing requests

Conclusion

WunderGraph is an API-unifying tool and platform that provides the necessary functions for unifying APIs across different frameworks. In contrast, Apollo GraphOS and Federation are among the many services and solutions produced by Apollo GraphQL.

Apollo GraphQL tries to be the jack of all trades by providing every GraphQL service or solution needed while WunderGraph focuses on one task: combining different APIs. The great thing is that these platforms can be used together. Apollo GraphOS can be used to manage supergraphs, while WunderGraph can unify APIs. WunderGraph excels at unifying APIs because it allows not only the unification of GraphQL APIs but also the inclusion of REST APIs.

Monitor failed and slow GraphQL requests in production

While GraphQL has some features for debugging requests and responses, making sure GraphQL reliably serves resources to your production app is where things get tougher. If you’re interested in ensuring network requests to the backend or third party services are successful, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your site. Instead of guessing why problems happen, you can aggregate and report on problematic GraphQL requests to quickly understand the root cause. In addition, you can track Apollo client state and inspect GraphQL queries' key-value pairs.

LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.