How can I effectively query and display all analytics data in a Shopify app?

Technical Q&A
1

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! :grin: