A minimal Shopify app, embedded in the Shopify admin, that builds a sales dashboard with ShopifyQL and the GraphQL Admin API. It's the companion code for the tutorial Build a sales dashboard with the GraphQL Admin API.
The app sends two ShopifyQL queries through the shopifyqlQuery field, reads the structured tableData responses, and checks parseErrors before rendering. The dashboard shows a headline total with its week-over-week change, a Polaris Viz trend chart, a daily breakdown table, and a top-products leaderboard. Money is formatted in the store's currency, and the app handles loading, empty, and error states. The queries live in app/routes/app._index.jsx.
This sample starts from the Shopify React Router app template, written in JavaScript. It adds one route at app/routes/app._index.jsx, changes the access scope in shopify.app.toml from write_products to read_reports, and adds @shopify/polaris-viz for the trend chart.
- A Shopify Partner account and a development store.
- Shopify CLI installed.
- Node.js 20.19 or later, or 22.12 or later.
- The
read_reportsaccess scope and Level 2 access to protected customer data, whichshopifyqlQueryrequires.
-
Install dependencies:
npm install
-
Start the app. The CLI walks you through connecting a Partner account and a development store:
npm run dev
-
Install the app on your development store when the CLI prompts you, then open it from the store's admin. The home page shows this week's total sales with the change from last week, a daily trend chart, a breakdown table, and the top-selling products.
This repository is a documentation sample. It doesn't accept issues or contributions. To report a problem with the tutorial, use the feedback control on the tutorial page.
This sample is released under the MIT License.