Preparation for CDN hosted version of frontend

1 files changed, 26 insertions, 0 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,
+  });
+};