https://github.com/aaronpowell/dab-react-trivia-demo

A demo application using React and SWA Database Connections
https://github.com/aaronpowell/dab-react-trivia-demo

Last synced: about 1 month ago
JSON representation

A demo application using React and SWA Database Connections

• Host: GitHub
• URL: https://github.com/aaronpowell/dab-react-trivia-demo
• Owner: aaronpowell
• License: mit
• Created: 2023-03-15T00:47:53.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-15T00:47:58.000Z (almost 2 years ago)
• Last Synced: 2024-11-17T19:56:21.907Z (about 2 months ago)
• Language: TypeScript
• Size: 137 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: License.md

Awesome Lists containing this project

README

        
## Azure Static Web App Database Connections sample

This is a sample application on how to use the [Azure Static Web App Database Connections](https://aka.ms/swa/db/docs) feature to expose Cosmos DB with GraphQL.

The application is written in React (with TypeScript), uses [GraphQL Code Generator](https://graphql-code-generator.com/) to generate TypeScript types from the GraphQL schema, and [Apollo Client](https://www.apollographql.com/docs/react/) to query the GraphQL API.

You can learn more about it in the [companion blog post](https://www.aaron-powell.com/posts/2023-03-16-graphql-on-azure-part-13-using-dab-with-swa-and-react).

## Running the application

This repo contains a [VSCode devcontainer](https://code.visualstudio.com/docs/remote/containers) configuration, so you can open the repo in VSCode and have it provision a local Cosmos DB emulator instance for you. You can use the [Azure Database VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb) to connect to the emulator and create a database and collection. There's also a sample dataset that can be uploaded at `data/trivia.json`.

Once the database is provisioned you can run `npm install` followed by `npm start` then navigate to http://localhost:4280.