Merge pull request #20 from ko-lem/master

Fix useApi to not return a new axios instance every render

src/hooks/useApi.js

@@ -1,27 +1,32 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import axios from "axios";
 import { getSessionToken } from "@shopify/app-bridge-utils";
 import { Context as ShopifyAppContext } from "@shopify/app-bridge-react";
 
+const api = axios.create();
+
 /**
  * Creates a axios client that uses Shopify JWT Session Token authentication
  *
  * @returns axios
  */
 export default function useApi() {
-  const api = axios.create();
   const app = useContext(ShopifyAppContext);
 
-  api.interceptors.request.use((config) => {
-    return getSessionToken(app)
-      .then((token) => {
-        config.headers["Authorization"] = `Bearer ${token}`;
-        return config;
-      })
-      .catch((err) => {
-        console.log(err);
+  useEffect(() => {
+    if (app) {
+      api.interceptors.request.use((config) => {
+        return getSessionToken(app)
+          .then((token) => {
+            config.headers["Authorization"] = `Bearer ${token}`;
+            return config;
+          })
+          .catch((err) => {
+            console.log(err);
+          });
       });
-  });
+    }
+  }, [app]);
 
   return api;
 }