WunderGraph 🤝 MongoDB Atlas

Published: 2022-02-28

Stefan Avram, Co-Founder @ WunderGraph

We're super excited to introduce our latest integration with MongoDB Atlas – MongoDB’s multi-cloud application data platform. Thanks to MongoDB’s advanced cloud database service, we are now able to help you get a full stack application up and running in minutes.

This release introduces a new data source type into Wundergraph – the MongoDB DataSource. The new integration allows you to turn any MongoDB protocol compatible database (including MongoDB Atlas) into a secure, production-grade GraphQL API, without having to do much manual work. With this new data source, it is easier than ever to build a GraphQL server with a database like MongoDB.

Get started in a matter of minutes by deploying a free, hosted cluster on MongoDB Atlas and grabbing the associated connection string. After you have your connection string, simply point WunderGraph to your database, and let us take care of all the heavy lifting. In contrast to other offerings, the resulting API is production-ready from the start with authentication & authorization out of the box. None of your data gets exposed if you don’t explicitly allow it.

Highlights

Injecting Claims#

WunderGraph, by default, does NOT expose the generated (virtual) GraphQL API. To expose some functionality of the Graph, you have to write a Query or Mutation. The Query will be compiled into a secure RPC Endpoint.

With that in mind, it should be clear that clients are not able to modify Queries at runtime. All they can do is invoke the compiled RPC Endpoint.

Keeping Queries on the backend gives WunderGraph superpowers. If you look at the following Query, you'll see a custom @fromClaim directive.

mutation AddMessage (
   $email: String! @fromClaim(name: EMAIL)
   $name: String! @fromClaim(name: NAME)
   $message: String!
) {
   createOnemessages(data: {message: $message users: {connectOrCreate: {create: {name: $name email: $email} where: {email: $email}}}}){
       id
       message
   }

This directive does two things. First, it enforces that a user must be authenticated to be able to use this method. Second, we take the email and name Claims of the user and inject them into the Mutation.

Claims are name value pairs of information about the authenticated user.

This method allows us to add a layer of authentication & authorization by just writing a directive.

Live Queries

WunderGraph allows you to turn any GraphQL Query into a Live-Query. Live-Queries are regular Queries that automatically update the user interface. Data gets updated by polling the upstream DataSource continually using a predefined interval which you can configure.

Combined with MongoDB Atlas, you're able to easily build Real Time Applications like a Chat.

Take the following Query as an example:

query TopProducts {
   topProducts {
       upc
       name
       price
   }
}

Using the following configuration, we're enabling Live-Queries for the TopProducts Query.

const operations: ConfigureOperations = {
   ...
   TopProducts: config => ({
       ...
       liveQuery: {
           enable: true,
           pollingIntervalSeconds: 2,
       },
       ...
   }),
   ...
}

On the WunderNode we would keep polling the origin every two seconds. If there's new data, we'd update all clients who subscribed to this live query. Calling this Live-Query from the clients looks very similar to a regular Query:

const IndexPage = () => {
    const {response: liveProducts} = useLiveQuery.TopProducts();
    return (
        <div>
            {JSON.stringify(liveProducts)}
        </div>
    )
}

Swap useQuery for useLiveQuery and you're done. The UI will update automatically when the data changes.

Easiest Configuration Ever

To configure MongoDB as a DataSource, you have to use introspection. Import the introspect function from the @wundergraph/sdk. It should be available if you have initialized your project with wunderctl init. As the database URL, specify the path to the database file using the syntax below.

As the database URL, specify the path to the database file using the syntax below.

import {
    introspect,
} from "@wundergraph/sdk";

const db = introspect.mongodb({
    apiNamespace: "atlasIsAwesome",
    databaseURL: "mongodb+srv://admin:password@cluster0.8toev.mongodb.net/sample_airbnb?retryWrites=true&w=majority",
});

This gives you a Promise of an API object. This db object can now be passed to an Application. This way, you're able to combine the generated GraphQL API of the database with other APIs, e.g. a REST or another GraphQL API.

const myApplication = new Application({
    name: "app",
    apis: [
        atlasIsAwesome,
    ],
})

Reference

We can't wait to see what you build with Wundergraph and MongoDB! Connect with us on Discord to share your projects and feedback. You can find more information about the MongoDB DataSource for Wundergraph here.

About the Author

Stefan Avram, Co-Founder @ WunderGraph

Stefan Avram is a software engineer turned growth hacker.

Thanks to his exceptional development and communication skills, he excels at building funnels and managing communities.

Based out of Miami, he also connects us with the US business landscape.