Hello! I am building a shopify app that can pull a connected store's analytics and reports data. I have set up the request and fetch functions with my remix app.
Currently, I am getting this response in my app frontend when I preview in my browser from the query:
{
"data": {
"shopifyqlQuery": {
"tableData": {
"unformattedData": [],
"rowData": [],
"columns": [
{
"name": "month",
"dataType": "month",
"displayName": "Month"
},
{
"name": "monthly_net_sales",
"dataType": "price",
"displayName": "Monthly net sales"
}
]
}
}
},
"extensions": {
"cost": {
"requestedQueryCost": 3,
"actualQueryCost": 3,
"throttleStatus": {
"maximumAvailable": 1000,
"currentlyAvailable": 997,
"restoreRate": 50
}
}
}
}
I believe I am getting this response because my test dev store does not have any dummy analytics, but there are sample reports with information.
Here is a snippet of my code in my app_index.jsx:
export const loader = async ({ request }) => {
const { admin } = await authenticate.admin(request);
const reportsData = await fetchShopifyReports(admin);
return json({ reports: reportsData });
};
export const action = async ({ request }) => {
const { admin } = await authenticate.admin(request);
const color = ["Red", "Orange", "Yellow", "Green"][
Math.floor(Math.random() * 4)
];
const response = await admin.graphql(
`#graphql
mutation populateProduct($input: ProductInput!) {
productCreate(input: $input) {
product {
id
title
handle
status
variants(first: 10) {
edges {
node {
id
price
barcode
createdAt
}
}
}
}
}
}`,
{
variables: {
input: {
title: `${color} Snowboard`,
variants: [{ price: Math.random() * 100 }],
},
},
}
);
const responseJson = await response.json();
return json({
product: responseJson.data.productCreate.product,
});
};
export default function Index() {
const nav = useNavigation();
const actionData = useActionData();
const { reports } = useLoaderData(); // Retrieve reports from loader
const submit = useSubmit();
const isLoading =
["loading", "submitting"].includes(nav.state) && nav.formMethod === "POST";
const productId = actionData?.product?.id.replace(
"gid://shopify/Product/",
""
);
My question is how can I properly query to pull all data from analytics holistically, and properly display that information on the frontend.
Note: i am a novice engineer! Learning as I build, any guidance and constructive advice for next steps is greatly appreciated. Also happy to provide more code for context if needed.
Thanks! 😁
