Use Grafbase Edge Resolvers with Neon

This guide was contributed by Josep Vidal from Grafbase

Grafbase allows you to combine your data sources into a centralized GraphQL endpoint and deploy a serverless GraphQL backend.

This guide describes how to create a GraphQL API using Grafbase and use Grafbase Edge Resolvers with the Neon serverless driver to interact with your Neon database at the edge.

The example project in this guide simulates a marketplace of products, where the product price is dynamically calculated based on data retrieved from your Neon database.

Prerequisites

• The Grafbase CLI
• A Neon project. See Create a Neon project.

Create a backend with Grafbase

1. Create a directory and initialize your Grafbase project by running the following commands:

2. In your project directory, open the grafbase/schema.graphql file and replace the existing content with the following schema:

Create the schema in Neon

1. Navigate to the Neon Console and select your project.

2. Open the Neon SQL Editor and run the following CREATE TABLE statement:

   The product_visits table stores product page view data that the application uses to dynamically calculate a product price.

Create the resolver files

The schema includes an addProductVisit query and prodcut/price field. Create resolvers for those by creating the following files in your project directory:

• grafbase/resolvers/add-product-visit.js
• grafbase/resolvers/product/price.js

You can use the following commands to create the files:

You will add code to these files in a later step.

Install the Neon serverless driver

Inside the grafbase directory in your project, run the following commands to install the Neon serverless driver:

Retrieve your Neon connection string

A database connection string is required to forward queries to your Neon database. To retrieve the connection string for your database:

1. Navigate to the Neon Dashboard.

2. Copy the connection string for your database from the Connection Details widget. The connection string should appear similar to the following:

3. Add a DATABASE_URL environment variable to your grafbase/.env file and set the value to your connection string. For example:

Add code to the resolvers

1. In the resolvers/product/add-product-visit resolver, add the following code, which inserts a new record in the product_visits table with a productId each time the resolver is queried.

2. In the grafbase/resolvers/product/price.js resolver, add the following code, which calculates the product price based on the number of product visits (the number of visits represents customer interest in the product).

Test the resolvers

To test the resolvers with Neon, perform the following steps:

1. Start the Grafbase CLI:

2. Go to http://localhost:4000 and execute the following GraphQL mutation, which creates a new product:

3. Use the product id to execute the following mutation, which adds a row to the database table in Neon:

4. Query the same product, and check the price:

5. Run the query several more times and watch how the price increases as "interest" in the product increases.