A full-stack GraphQL application for exploring Databricks datasets, featuring a React frontend and Python backend with support for multiple database connectors.
┌─────────────────────────────────────────────────────────────┐
│ React Frontend │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Dashboard │ │ Sales Table │ │ Schema │ │
│ │ Charts │ │ Filters │ │ Explorer │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
│ └────────────────┼────────────────┘ │
│ ▼ │
│ ┌───────────────────────┐ │
│ │ Apollo Client │ │
│ └───────────┬───────────┘ │
└──────────────────────────┼──────────────────────────────────┘
│ GraphQL
┌──────────────────────────┼──────────────────────────────────┐
│ ▼ │
│ ┌───────────────────────┐ │
│ │ Strawberry GraphQL │ │
│ │ + FastAPI │ │
│ └───────────┬───────────┘ │
│ │ │
│ ┌───────────▼───────────┐ │
│ │ Database Abstraction │ │
│ │ Layer │ │
│ └───────────┬───────────┘ │
│ │ │
│ ┌─────────────────────┼─────────────────────┐ │
│ ▼ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │Databricks│ │PostgreSQL│ │ MySQL │ │
│ │Connector │ │(planned) │ │(planned) │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ Python Backend │
└─────────────────────────────────────────────────────────────┘
- Python 3.11+
- Node.js 18+
- Access to a Databricks workspace with SQL warehouse
-
Navigate to backend directory:
cd backend -
Create virtual environment:
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate
-
Install dependencies:
pip install -r requirements.txt
-
Configure environment:
cp env.example .env
Edit
.envwith your Databricks credentials:DATABRICKS_SERVER_HOSTNAME=your-workspace.cloud.databricks.com DATABRICKS_HTTP_PATH=/sql/1.0/warehouses/your-warehouse-id DATABRICKS_ACCESS_TOKEN=your-access-token -
Start the server:
uvicorn app.main:app --reload
The GraphQL playground will be available at: http://localhost:8000/graphql
-
Navigate to frontend directory:
cd frontend -
Install dependencies:
npm install
-
Start development server:
npm run dev
The app will be available at: http://localhost:5173
- Real-time statistics (total orders, revenue, customers, products)
- Revenue by category bar chart
- Order distribution pie chart
- Top performing category highlight
- Paginated data table
- Filter by customer name
- Filter by product category
- Sortable columns
- Card grid view of all locations
- Store details including address and phone
- Geographic statistics
- Browse available tables
- View column definitions and types
- Run custom SQL queries
Get Dashboard Stats:
query {
dashboardStats {
totalOrders
totalRevenue
uniqueCustomers
uniqueProducts
topCategory
}
}Get Sales Orders with Filters:
query {
salesOrders(limit: 25, productCategory: "Breads") {
orderNumber
customerName
productName
orderAmount
}
}Explore Table Schema:
query {
tableInfo(tableName: "sales_orders") {
name
columns {
name
type
nullable
}
}
}The application is designed to support multiple databases. To add a new connector:
-
Create a new file in
backend/app/connectors/(e.g.,postgresql.py) -
Implement the
BaseConnectorinterface:from .base import BaseConnector class PostgreSQLConnector(BaseConnector): def connect(self) -> None: # Implementation pass def disconnect(self) -> None: # Implementation pass def execute_query(self, query: str, params=None) -> list[dict]: # Implementation pass def get_tables(self, catalog=None, schema=None) -> list[str]: # Implementation pass def get_table_schema(self, table_name: str, catalog=None, schema=None) -> list[dict]: # Implementation pass
-
Register the connector in
backend/app/connectors/__init__.py -
Update resolvers to use the appropriate connector based on configuration
- FastAPI - Modern Python web framework
- Strawberry GraphQL - Python GraphQL library with type safety
- databricks-sql-connector - Official Databricks SQL connector
- Pydantic - Data validation and settings management
- React 18 - UI library
- Apollo Client - GraphQL client
- Tailwind CSS - Utility-first CSS framework
- Recharts - Charting library
- Vite - Build tool and dev server
- TypeScript - Type-safe JavaScript
graphql_gsa/
├── backend/
│ ├── app/
│ │ ├── connectors/ # Database connectors
│ │ │ ├── base.py # Abstract base class
│ │ │ └── databricks.py # Databricks implementation
│ │ ├── resolvers/ # GraphQL resolvers
│ │ │ ├── queries.py # Query resolvers
│ │ │ └── mutations.py # Mutation resolvers
│ │ ├── schemas/ # GraphQL types
│ │ │ └── types.py # Type definitions
│ │ ├── config.py # Settings management
│ │ └── main.py # FastAPI application
│ ├── requirements.txt
│ └── env.example
├── frontend/
│ ├── src/
│ │ ├── components/ # React components
│ │ ├── graphql/ # Apollo client & queries
│ │ ├── App.tsx
│ │ └── main.tsx
│ ├── package.json
│ └── tailwind.config.js
└── README.md
MIT