Use WunderGraph with Neon
Leverage the power of Neon and WunderGraph to build fully serverless apps in minutes
This guide was contributed by the team at WunderGraph
WunderGraph is an open-source Backend for Frontend (BFF) framework designed to optimize developer workflows through API composition. Developers can use this framework to compose multiple APIs into a single unified interface and generate typesafe API clients that include authentication and file uploads. This guide shows how you can pair WunderGraph with your Neon database to accelerate application development.
With WunderGraph, you can easily introspect your data sources and combine them within your virtual graph. WunderGraph treats APIs as dependencies. You can easily turn your Neon database into a GraphQL API or expose it via JSON-RPC or REST. With an easy-to-deploy Postgres database like Neon, you can now have a 100% serverless stack and build your own stateful serverless apps on the edge.
This guide demonstrates setting up a full-stack app with Neon and WunderGraph, securely exposing Neon to your Next.js frontend in under 15 minutes. While WunderGraph and Neon are compatible with a variety of frontend clients, this demo focuses on using Next.js.
This guide is also available in video format: Neon with WunderGraph video guide.
Sign into WunderGraph Cloud and follow these steps:
- Click New Project.
- Choose the
NEXT.jstemplate and give your repository a name.
- Select the region closest to you.
- Click Deploy.
The deployment will take a few moments.
Add sample data to Neon
While the project is deploying, add some sample data to your Neon database.
- Navigate to the Neon Console and select SQL Editor from the sidebar.
- Run the following SQL statements to add the sample data.
Connect Neon and Wundergraph
- Now that your database has some data, navigate back to WunderGraph Cloud.
- Select the project you just created and navigate to the Settings page.
- Select the Integrations tab and click Connect Neon.
- You are directed to Neon to authorize WunderGraph. Review the permissions and click Authorize to continue. You are directed back to WunderGraph Cloud. If you are a part of multiple organizations, you are asked to select the organization to connect with Neon.
- Select the Neon project and WunderGraph project that you want to connect, and click Connect Projects.
Your Neon and Wundergraph projects are now connected.
WunderGraph creates a role named
wundergraph-$project_id in the Neon project that you selected during the integration process. Please do not delete or change the password for this role.
WunderGraph configures a environment variable called
NEON_DATABASE_URL. Please use this variable wherever you need to provide a database URL.
Set up the WunderGraph project locally
The following steps describe how to set up your Wundergraph project locally and configure access to Neon.
- In WunderGraph Cloud, select your project and click View Git repository to view your WunderGraph project repository.
- Clone the repository and open it in your IDE. For example:
After the project is cloned, run the following commands in your project directory:
These commands install the required dependencies and start your project locally.
.wundergraphdirectory, open the
wundergraph.config.tsfile and add Neon as a datasource, as shown below, or simply replace the existing code with this code:
Write an operation that turns your Neon database into an API that exposes data that you can pass through the frontend. To do so, navigate to the
operationsfolder inside your
.wundergraphdirectory and create a new file called
With WunderGraph you can write operations in either GraphQL or TypeScript.
Users.graphqlfile, add the following code:
This operation queries your Neon database using GraphQL and exposes the data via JSON-RPC. In the next section, you will add the operation to the frontend.
Configure the frontend
This section describes how to configure the frontend application.
- In your local project, navigate to the
pagesdirectory and open the
- In the
index.tsxfile, make the following three changes or replace the existing code with the code shown below:
- Retrieve the data from the
Usersendpoint using the
- On line 62, update the copy to read: "This is the result of your Users Query".
- On line 66, pass the
usersvariable through to the frontend.
Run the application
npm run dev.
- Navigate to http://localhost:3000 when the application is finished building. If your application runs successfully, you should see the result of your User's operation.
- To take the setup one step further, commit the changes to your GitHub repository and merge them into your
- After you merge the changes, navigate to
WunderGraph Cloudand view out the Deployments tab. You should see that a deployment was triggered. Give the deployment a few seconds to finish.
- When deployment is ready, navigate to the Operations tab. You should see the new endpoint that you created and added to your application. Click it to see your data in real time.
This guide provided a brief demonstration showcasing the capabilities of Neon and WunderGraph, which enable you to turn your Neon database into an API exposed via JSON-RPC and rapidly deploy fully serverless apps on the edge in a matter of minutes. The power of Neon with WunderGraph lies in simplifying the development process, allowing you to focus on creating valuable and efficient applications.
In under 15 minutes, you were able to:
- Create a WunderGraph Cloud account
- Create a Next.js project hosted in a region near you
- Set up a Neon database with sample data
- Connect your WunderGraph application with your Neon database
- Add Neon to your WunderGraph project using a code first approach
- Write a GraphQL operation to query your Neon database
- Update the frontend to display the results of your GraphQL operation securely using JSON-RPC
- Commit your changes and trigger a deployment without a CI/CD pipeline or Devops team
- View your new operations in real time with real-time metrics
If you had trouble with any of the steps outlined above, refer to the video guide below.
Neon with WunderGraph video guide
Last updated on