WunderGraph 🤝 Fauna Integration

WunderGraph 🤝 Fauna Integration

Stefan's photo
Stefan
·

4 min read

We are super excited to introduce our latest database integration with Fauna! Fauna is a distributed document-relational database delivered as a cloud API. It allows you to build new or migrate existing applications to Fauna and scale without worrying about operations.

WunderGraph makes it possible for your application to use its own dedicated BFF while allowing code sharing across all your applications, while preventing credentials and API keys from leaking into the browser.

With WunderGraph, you can structure your Public API as operations. Every operation is a GraphQL file with a single GraphQL query or mutation that the BFF exposes using JSON-RPC (HTTP). This approach hides unnecessary complexity from designing a cacheable and secure public API with GraphQL.

We've included a quick guide that demonstrates how to integrate Fauna as a data source into a WunderGraph application in under ~10 minutes 👀 . The procedure uses the WunderGraph open source "monorepo," which has a dedicated example for Fauna as a data source.

Step 1: Create a database that has sample data with Fauna

  1. Log in to the Fauna Dashboard
  2. Click the [CREATE DATABASE] button.
  3. Enter a name for your database. For example: wundergraph
  4. Select an appropriate Region Group
  5. Check the Use demo data checkbox.
  6. Click the [CREATE] button.

When you complete these steps, you have a database that has several collections of documents, several indexes, and a configured GraphQL API with a matching schema definition. The sample data allows you to experiment with various CRUD queries and mutations.

Step 2: Create a key with the admin role

  1. Click the [ Security ] button in the left navigation pane.
  2. Click the [ NEW KEY ] button.
  3. Click the [ SAVE ] button.
  4. Store the displayed secret in a safe place. The Dashboard only shows a secret once.

When you complete these steps, you have a Fauna secret that grants access to use the associated database.

Step 3: Clone the WunderGraph monorepo

  1. Open a terminal window
  2. Run the following command: 
    git clone https://github.com/wundergraph/wundergraph.git

Step 4: Configure the WunderGraph integration

  1. In the terminal window, run the following commands:
    cd wundergraph/examples/faunadb-nextjs
cp example.env .env
    1. Edit the file .env to replace with the secret for the admin key that you stored as part of Step 2: Create a key with the admin role 3.If you selected a Region Group other than Classic, edit the file .env to replace graphql.fauna.com/graphql with the GraphQL API endpoint suitable for your selected Region Group:

  2. EU: graphql.eu.fauna.com/graphql

  3. US: graphql.us.fauna.com/graphql

  4. Preview: graphql.fauna-preview.com/graphql

Step 5: Install dependencies and start the application

  1. In your terminal window, run the command:
    npm install && npm start

When you run the command, you should see the dependency installation progress followed by the start of the application. Your web browser should open localhost:3000 and display the result of the AllStores operation:

fauna_and_wunderGraph_localhost_example.png

Step 6: Add a store

  1. In the Dashboard, click the [ Shell ] button in the left navigation pane.
  2. In the lower pane, replace existing query text with:
> Create(
  Ref(Collection("stores"), "304"),
  {
    data: {
      name: "My Personal Bodega",
      address: {
        street: "1234 My Street",
        city: "My City",
        state: "WA",
        zipCode: "90210"
      }
    }
  }
)

  1. Click the [ RUN QUERY ] button.

  2. In the WunderGraph application, click the [ Refresh ] button. You should see that the list of stores now has the new _id field 304.

  3. Type Control + C to exit the WunderGraph application.

Now that the WunderGraph application is configured, look at the generated integration code in .wundergraph/wundergraph.config.ts. You should see that adding Fauna as a data source is only eight lines of code. You can also review the file in the .wundergraph/operations folder to see the AllStores query.

Summary

The demonstration application is simple: only one operation is defined. But it shows how easy it is to safely expose Fauna to your front-end application using WunderGraph. You can extend the demonstration application, or start your own using similar configuration steps. Learn more in the WunderGraph documentation.

We'd like to thank the amazing team at Fauna for colloborating with us on this intergration. A special thank you to Nishant Madichetti, Zee Khoo, Matt Slagle, and Wyatt Wenzel! We look forward to future collaboration and providing our users with an unmatched serverless developer experience with Fauna and WunderGraph Cloud👀

The future of WunderGraph and how you can support us

Our goal with WunderGraph is to make Developers highly productive in building Serverless APIs. So far, we've built an open-source Framework that's designed to be local-first, transparent, and easy to debug.

To make WunderGraph scalable, we've designed it with GitOps in mind. Everything is configured with TypeScript, allowing individuals and teams to share their configurations and customizations using git.

The next step for us is to automate continuous deployment to the cloud. With WunderGraph Cloud, you can connect your git repositories with a few clicks and deploy them to our Serverless Cloud.

To get early access, You can sign up for our waitlist

There are so many ways you can support us here at WunderGraph. Tweet at us. Star us on Github. Post in our Discord! or Build something with our latest intergration and show us so we can share it!

faunaserverlessGraphQLProgramming Blogswundergraph