authenticatedFetch that doesn't use 'use'

3 files changed, 25 insertions, 64 deletions

diff --git a/hooks/authenticatedFetch.js b/hooks/authenticatedFetch.js
new file mode 100644
index 0000000..4b57ff7
--- /dev/null
+++ b/hooks/authenticatedFetch.js
@@ -0,0 +1,25 @@
+function authenticatedFetch(uri, options) {
+	var AppBridge = window['app-bridge'];
+	var app = AppBridge.createApp({
+		apiKey: '',
+		host: ''
+	});
+	var fetchFunction = window['app-bridge-utils'].authenticatedFetch(app);
+	return async (uri, options) => {
+		var response = await fetchFunction(uri, options);
+		var headers = response.headers;
+		if (headers.get("X-Shopify-API-Request-Failure-Reauthorize")
+			=== "1") {
+			var authUrlHeader = headers.get(
+				"X-Shopify-API-Request-Failure-Reauthorize-Url")
+				|| `/api/auth`;
+			var Redirect = AppBridge.actions.Redirect;
+			Redirect.create(app).dispatch(Redirect.Action.REMOTE,
+				authUrlHeader.startsWith("/")
+				? `https://${window.location.host}${authUrlHeader}`
+				: authUrlHeader
+			);
+		}
+		return response;
+	};
+}
diff --git a/hooks/useAppQuery.js b/hooks/useAppQuery.js
deleted file mode 100644
index 7218274..0000000
--- a/hooks/useAppQuery.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * 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/hooks/useAuthenticatedFetch.js b/hooks/useAuthenticatedFetch.js
deleted file mode 100644
index e5f36a8..0000000
--- a/hooks/useAuthenticatedFetch.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * 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
-    );
-  }
-}