Announcing Database connections for Azure Static Web Apps with Data API builder

Microsoft

Mar 15, 2023

Databases are a critical component of modern web applications. In fact, database access is one of the most common uses for serverless functions. However, implementing backend services to handle data access can be time consuming, complex and error prone. Today, we introduce database connections for Azure Static Web Apps, an easy way to access your Azure database content from your front-end static app with REST and GraphQL, without having to write any backend code. Get started for free during public preview.

A better developer experience

With database connections, you can focus on building your application without having to re-implement the tedious complexities of data access. With support for Azure SQL, Azure Database for MySQL (Flex Server), Azure Database for PostgreSQL (Single Server, Flex Server), or Azure CosmosDB for NoSQL, you have the flexibility to choose your database type, your preferred request standard, and any frontend framework to meet your development needs. Database connections also comes with built-in authorization, relationships, query optimizations, and scalability, to enable the best developer experience for building database-backed applications on Static Web Apps.

How it works

Once you connect your database to your Static Web Apps resource, you’ll be able to make REST and GraphQL requests to the /data-api endpoint to retrieve or modify your database entities from your static site. To secure data access, you can leverage the built-in role-based access control with Static Web Apps authentication integration to limit access to your database to certain users or roles. You can also make use of GraphQL to retrieve entities along with their database relationships.

With database connections, you can make REST or GraphQL requests to the built-in /data-api endpoint to retrieve your Azure database contents.

Under the hood, Static Web Apps database connections feature uses Data API builder, a Microsoft open-source engine that converts REST and GraphQL into optimized database queries. Runtime behavior configuration is provided via a configuration file containing entity permissions and relationships, and Data API builder extracts the schema from the database to build your runtime REST and GraphQL endpoints. For more information, see the Data API builder docs.

How to use database connections with REST and GraphQL

Once you’ve connected your database to your Static Web Apps resource, you can make REST or GraphQL requests within your frontend client code to the /data-api endpoint. CRUD (Create, Read, Update, Delete) requests can be made to the /data-api/rest/<Entity> using the standard POST/GET/PUT/DELETE method headers. The return or request bodies match your database column headers. You can also make GraphQL queries or mutations to the /data-api/graphql endpoint, using fetch or any GraphQL library you wish.

Develop with database connections locally with the Static Web Apps

To develop with database connections, we’ve added Database connections support to the Static Web Apps CLI (SWA CLI). Simply get started with `swa start –data-api-location <folder-name>`, and the SWA CLI will enable the `/data-api` endpoint with access to your database. Now, you can make REST or GraphQL requests to that endpoint. This also allows you to develop with authorization thanks to SWA CLI’s authentication emulation: simply log in and make authorized database connections requests.

If you are using GraphQL, you can also explore your GraphQL schema using an open-source tool such as GraphiQL to consult the schema provided at http://localhost:4280/data-api/graphql/, where you can see the queries and mutations generated.