3 files changed, 73 insertions, 1 deletions
diff --git a/web/frontend/hooks/useAppQuery.js b/web/frontend/hooks/useAppQuery.js
new file mode 100644
index 0000000..7218274
--- /dev/null
+++ b/web/frontend/hooks/useAppQuery.js
@@ -0,0 +1,26 @@
+/**
+ * A hook for querying your custom app data.
+ * @desc A thin wrapper around useAuthenticatedFetch and react-query's useQuery.
+ *
+ * @param {Object} options - The options for your query. Accepts 3 keys:
+ *
+ * 1. url: The URL to query. E.g: /api/widgets/1`
+ * 2. fetchInit: The init options for fetch.  See: https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters
+ * 3. reactQueryOptions: The options for `useQuery`. See: https://react-query.tanstack.com/reference/useQuery
+ *
+ * @returns Return value of useQuery.  See: https://react-query.tanstack.com/reference/useQuery.
+ */
+const useAppQuery = ({ url, fetchInit = {}, reactQueryOptions }) => {
+  const authenticatedFetch = useAuthenticatedFetch();
+  const fetch = useMemo(() => {
+    return async () => {
+      const response = await authenticatedFetch(url, fetchInit);
+      return response.json();
+    };
+  }, [url, JSON.stringify(fetchInit)]);
+
+  return useQuery(url, fetch, {
+    ...reactQueryOptions,
+    refetchOnWindowFocus: false,
+  });
+};
diff --git a/web/frontend/hooks/useAuthenticatedFetch.js b/web/frontend/hooks/useAuthenticatedFetch.js
new file mode 100644
index 0000000..e5f36a8
--- /dev/null
+++ b/web/frontend/hooks/useAuthenticatedFetch.js
@@ -0,0 +1,38 @@
+/**
+ * A hook that returns an auth-aware fetch function.
+ * @desc The returned fetch function that matches the browser's fetch API
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+ * It will provide the following functionality:
+ *
+ * 1. Add a `X-Shopify-Access-Token` header to the request.
+ * 2. Check response for `X-Shopify-API-Request-Failure-Reauthorize` header.
+ * 3. Redirect the user to the reauthorization URL if the header is present.
+ *
+ * @returns {Function} fetch function
+ */
+function useAuthenticatedFetch() {
+  const app = useAppBridge();
+  const fetchFunction = authenticatedFetch(app);
+
+  return async (uri, options) => {
+    const response = await fetchFunction(uri, options);
+    checkHeadersForReauthorization(response.headers, app);
+    return response;
+  };
+}
+
+function checkHeadersForReauthorization(headers, app) {
+  if (headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1") {
+    const authUrlHeader =
+      headers.get("X-Shopify-API-Request-Failure-Reauthorize-Url") ||
+      `/api/auth`;
+
+    const redirect = Redirect.create(app);
+    redirect.dispatch(
+      Redirect.Action.REMOTE,
+      authUrlHeader.startsWith("/")
+        ? `https://${window.location.host}${authUrlHeader}`
+        : authUrlHeader
+    );
+  }
+}
diff --git a/web/frontend/index.html b/web/frontend/index.html
index b6b3f23..70c4936 100644
--- a/web/frontend/index.html
+++ b/web/frontend/index.html
@@ -2,8 +2,16 @@
 <html lang=en>
 	<head>
 		<meta charset=utf-8/>
+		<meta name="viewport" content="width=device-width, initial-scale=1"/>
+		<link rel="stylesheet" href="https://unpkg.com/@shopify/polaris@10.2.0/build/esm/styles.css"/>
 	</head>
 	<body>
-		Hello from C!
+		<script src="https://unpkg.com/react@18"></script>
+		<script src="https://unpkg.com/react-query@3"></script>
+		<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
+		<script src="https://unpkg.com/@shopify/app-bridge-utils@3"></script>
+		<script src="https://unpkg.com/@shopify/app-bridge-react@3"></script>
+		<script async type="text/javascript" src="js/useAuthenticatedFetch.js"></script>
+		<script async type="text/javascript" src="js/useAppQuery.js"></script>
 	</body>
 </html>