1. Build and deploy a GraphQL static web app to Azure
In this article series, you'll create a GraphQL server and a web application to communicate with it. Your GraphQL server will use Azure Cosmos DB to store data, and Static Web Apps to host the application.
Create or use an existing Azure subscription
You'll need an Azure user account with an active subscription. Create one for free.
Prerequisites
- Node.js and npm installed to your local machine.
- Visual Studio Code installed to your local machine.
- Static Web Apps to deploy a React app to Static Web Apps.
- Azure Databases to create the database created with Azure Cosmos DB.
- Azure Cosmos DB local emulator to use a local database created with Azure Cosmos DB.
- Git to push to GitHub, which activates the GitHub action.
- GitHub account to fork and push to a repo.
Application architecture
The application architecture is shown in the following diagram:
The React client constructs a GraphQL query by using a GraphQL client package (you'll be using Apollo), and calls the API to retrieve the data. Using a GraphQL server (you'll be using the Apollo server implementation), the GraphQL query is converted into resolver calls. You can use these calls to pass the information to a SQL query in Azure Cosmos DB. The SQL query is sent to Azure Cosmos DB, and returns the data requested. The GraphQL resolver returns the results in a well-formatted GraphQL data object.
The React client and API are hosted in Static Web Apps. The data is stored in a SQL database in Azure Cosmos DB.
Next steps
- Learn the basic concepts of GraphQL for this article series.
- Use the sample application in your local development environment.