Custom HTTP Headers Support

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project are documented in this file.
 ## UNRELEASED
 
 - Added: Further tests
+- Added: `headers` argument.
 
 ## 0.4.0
 

README.md

@@ -92,6 +92,7 @@ const PeopleSearch = () = {
 - `url` : Required - A URL to request data from.
 - `pollInterval` : Optional - How often to re-request updated data. Pass 0 to disable polling (the default behaviour).
 - `payload` : Optional - A data object to send with the request. If we are performing a GET request, it is appended into the querystring (e.g. `?keywords=hello`). If it is a POST request it is sent in the request body as JSON.
+- `headers` : Optional - A data object containing http headers to send with the request. This must be a simple object with key value pairs like `{ authorization: "Bearer abc" }`.
 - `method` : Optional - Set the request type, either `get` or `post`. (defaults to `get`)
 - `changed` : Optional - A function that is called if the data actually changed during the request. If this is specified, use-api does extra checking and compares old and new data. If data does not change, new data is not propagated and a redraw is saved. Please note, this may have performance repercussions if the data is large as it performs a deep comparison between new and old data to determine if they are equivalent.
 

index.js

@@ -9,6 +9,7 @@ const useApi = ({
   pollInterval = 0,
   payload,
   method = "get",
+  headers,
   changed
 }) => {
   const [data, setData] = useState({});
@@ -18,6 +19,7 @@ const useApi = ({
   const lastData = useRef(data);
   const changedRef = useRef(changed);
   const payloadRef = useRef(payload);
+  const headersRef = useRef(headers);
   changedRef.current = changed;
 
   if (!url) {
@@ -38,6 +40,12 @@ const useApi = ({
   }
   const currentPayload = payloadRef.current;
 
+  // Only apply the new headers if its really changed
+  if (!isEqual(headers, headersRef.current)) {
+    headersRef.current = headers;
+  }
+  const currentHeaders = headersRef.current;
+
   if (method.toLowerCase) method = method.toLowerCase();
 
   if (!["get", "post"].includes(method)) {
@@ -64,7 +72,8 @@ const useApi = ({
       ...(currentPayload &&
         (method === "get"
           ? { params: currentPayload }
-          : { data: currentPayload }))
+          : { data: currentPayload })),
+      ...(currentHeaders && { headers: currentHeaders })
     })
       .then(response => {
         // Make sure there are no errors reported
@@ -106,6 +115,7 @@ const useApi = ({
     url,
     pollInterval,
     currentPayload,
+    currentHeaders,
     method,
     lastData,
     changedRef

test.js

@@ -475,4 +475,92 @@ describe("performs requests", () => {
     expect(result.current.data).toEqual("response");
     expect(result.current.loading).toBeFalsy();
   });
+
+  it("supports custom http headers via POST", async () => {
+    const headers = { authorization: `Bearer abc` };
+
+    mock.onPost(url).reply(config => {
+      if (config.headers.authorization === headers.authorization) {
+        return [200, "response"];
+      } else {
+        return [401, "missing header"];
+      }
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useApi({ url, headers, method: "post" })
+    );
+
+    expect(result.current.data).toEqual({});
+    expect(result.current.loading).toBeTruthy();
+
+    await waitForNextUpdate();
+
+    expect(result.current.data).toEqual("response");
+    expect(result.current.loading).toBeFalsy();
+  });
+
+  it("supports custom http headers via GET", async () => {
+    const headers = { authorization: `Bearer abc` };
+
+    mock.onGet(url).reply(config => {
+      if (config.headers.authorization === headers.authorization) {
+        return [200, "response"];
+      } else {
+        return [401, "missing header"];
+      }
+    });
+
+    const { result, waitForNextUpdate } = renderHook(() =>
+      useApi({ url, headers })
+    );
+
+    expect(result.current.data).toEqual({});
+    expect(result.current.loading).toBeTruthy();
+
+    await waitForNextUpdate();
+
+    expect(result.current.data).toEqual("response");
+    expect(result.current.loading).toBeFalsy();
+  });
+
+  it("refreshes when headers changes", async () => {
+    const headers = { authorization: `Bearer abc` };
+    const headers2 = { authorization: `Bearer def` };
+
+    mock.onGet(url).reply(config => {
+      if (config.headers.authorization === headers.authorization) {
+        return [200, "response"];
+      } else if (config.headers.authorization === headers2.authorization) {
+        return [200, "response2"];
+      } else {
+        return [401, "missing header"];
+      }
+    });
+
+    const { result, waitForNextUpdate, rerender } = renderHook(
+      props => useApi(props),
+      {
+        initialProps: {
+          url,
+          headers
+        }
+      }
+    );
+
+    await waitForNextUpdate();
+
+    expect(result.current.data).toEqual("response");
+    expect(result.current.loading).toBeFalsy();
+
+    rerender({
+      url,
+      headers: headers2
+    });
+
+    await waitForNextUpdate();
+
+    expect(result.current.data).toEqual("response2");
+    expect(result.current.loading).toBeFalsy();
+  });
 });