diff --git a/CHANGELOG.md b/CHANGELOG.md index 414e5cb..a3555f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ All notable changes to this project are documented in this file. ## Unreleased +- Changed: Renamed `apiEndpoint` to `url`. - Changed: Documentation. ## 0.3.0 diff --git a/README.md b/README.md index 09936a6..dc080f4 100755 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ You can optionally specify a polling interval and manually trigger a refresh. It ```javascript const { data, loading, error, refresh } = useApi({ - apiEndpoint: "https://some-api.com/api", + url: "https://some-api.com/api", pollInterval: 10000, payload: { keywords: "hello" }, method: "post", @@ -41,7 +41,7 @@ import PeopleList from './PeopleList'; const PeopleList = () = { const { data, loading, error, refresh } = useApi({ - apiEndpoint: "https://some-api.com", + url: "https://some-api.com", pollInterval: 10000 )}; @@ -69,7 +69,7 @@ const PeopleSearch = () = { const [keywords, setKeywords] = useState("kazumi"); const { data } = useApi({ - apiEndpoint: "https://some-api.com", + url: "https://some-api.com", payload: { keywords }, method: "post" }); @@ -89,7 +89,7 @@ const PeopleSearch = () = { ### Input -- `apiEndpoint` : Required - A URL to request data from. +- `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. - `method` : Optional - Set the request type, either `get` or `post`. (defaults to `get`) diff --git a/index.js b/index.js index 6fd9b0f..4842482 100755 --- a/index.js +++ b/index.js @@ -5,7 +5,7 @@ const isEqual = require("lodash.isequal"); const { CancelToken } = axios; const useApi = ({ - apiEndpoint, + url, pollInterval = 0, payload, method = "get", @@ -44,7 +44,7 @@ const useApi = ({ setLoading(true); // Make call to the API - axios(apiEndpoint, { + axios(url, { method, cancelToken: source.token, ...(currentPayload && @@ -89,7 +89,7 @@ const useApi = ({ }, [ poll, setPoll, - apiEndpoint, + url, pollInterval, currentPayload, method, diff --git a/test.js b/test.js index d861152..f7eb741 100755 --- a/test.js +++ b/test.js @@ -5,7 +5,7 @@ const { renderHook, act } = require("@testing-library/react-hooks"); describe("performs requests", () => { let mock; - const apiEndpoint = "http://mock"; + const url = "http://mock"; beforeEach(() => { mock = new MockAdapter(axios); @@ -19,11 +19,9 @@ describe("performs requests", () => { }); it("loads data from a url using GET", async () => { - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); - const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint }) - ); + const { result, waitForNextUpdate } = renderHook(() => useApi({ url })); expect(result.current.data).toEqual({}); expect(result.current.loading).toBeTruthy(); @@ -37,13 +35,13 @@ describe("performs requests", () => { it("sends querystring data and loads data from a url using GET", async () => { const payload = { query: "hello" }; mock - .onGet(apiEndpoint) + .onGet(url) .reply(config => config.params.query === "hello" ? [200, "response"] : [400, "error"] ); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload }) + useApi({ url, payload }) ); expect(result.current.data).toEqual({}); @@ -57,10 +55,10 @@ describe("performs requests", () => { it("allows different formats of GET method param (GET)", async () => { const payload = { query: "hello" }; - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "GET" }) + useApi({ url, payload, method: "GET" }) ); await waitForNextUpdate(); @@ -71,10 +69,10 @@ describe("performs requests", () => { it("allows different formats of GET method param (Get)", async () => { const payload = { query: "hello" }; - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "Get" }) + useApi({ url, payload, method: "Get" }) ); await waitForNextUpdate(); @@ -85,10 +83,10 @@ describe("performs requests", () => { it("allows different formats of GET method param (gEt)", async () => { const payload = { query: "hello" }; - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "gEt" }) + useApi({ url, payload, method: "gEt" }) ); await waitForNextUpdate(); @@ -99,10 +97,10 @@ describe("performs requests", () => { it("loads data from a url using POST", async () => { const payload = { query: "hello" }; - mock.onPost(apiEndpoint, payload).reply(200, "response"); + mock.onPost(url, payload).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "post" }) + useApi({ url, payload, method: "post" }) ); expect(result.current.data).toEqual({}); @@ -116,10 +114,10 @@ describe("performs requests", () => { it("allows different formats of POST method param (Post)", async () => { const payload = { query: "hello" }; - mock.onPost(apiEndpoint, payload).reply(200, "response"); + mock.onPost(url, payload).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "Post" }) + useApi({ url, payload, method: "Post" }) ); await waitForNextUpdate(); @@ -130,10 +128,10 @@ describe("performs requests", () => { it("allows different formats of POST method param (POST)", async () => { const payload = { query: "hello" }; - mock.onPost(apiEndpoint, payload).reply(200, "response"); + mock.onPost(url, payload).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "POST" }) + useApi({ url, payload, method: "POST" }) ); await waitForNextUpdate(); @@ -144,10 +142,10 @@ describe("performs requests", () => { it("allows different formats of POST method param (pOst)", async () => { const payload = { query: "hello" }; - mock.onPost(apiEndpoint, payload).reply(200, "response"); + mock.onPost(url, payload).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, payload, method: "pOst" }) + useApi({ url, payload, method: "pOst" }) ); await waitForNextUpdate(); @@ -160,7 +158,7 @@ describe("performs requests", () => { const payload = { query: "hello" }; const { result } = renderHook(() => - useApi({ apiEndpoint, payload, method: "POSTITNOTE" }) + useApi({ url, payload, method: "POSTITNOTE" }) ); expect(result.current.error).toBeTruthy(); @@ -172,7 +170,7 @@ describe("performs requests", () => { // mock.onGet(url).reply(200, "response"); const { result } = renderHook(() => - useApi({ apiEndpoint, payload, method: { something: "wrong" } }) + useApi({ url, payload, method: { something: "wrong" } }) ); expect(result.current.error).toBeTruthy(); @@ -180,10 +178,10 @@ describe("performs requests", () => { }); it("loads and polls data from a url", async () => { - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, pollInterval: 1000 }) + useApi({ url, pollInterval: 1000 }) ); expect(result.current.data).toEqual({}); @@ -194,7 +192,7 @@ describe("performs requests", () => { expect(result.current.data).toEqual("response"); expect(result.current.loading).toBeFalsy(); - mock.onGet(apiEndpoint).reply(200, "response2"); + mock.onGet(url).reply(200, "response2"); act(() => { jest.advanceTimersByTime(1000); @@ -205,7 +203,7 @@ describe("performs requests", () => { expect(result.current.data).toEqual("response2"); expect(result.current.loading).toBeFalsy(); - mock.onGet(apiEndpoint).reply(200, "response3"); + mock.onGet(url).reply(200, "response3"); act(() => { jest.advanceTimersByTime(1000); @@ -218,11 +216,9 @@ describe("performs requests", () => { }); it("can be manually refreshed", async () => { - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); - const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint }) - ); + const { result, waitForNextUpdate } = renderHook(() => useApi({ url })); expect(result.current.data).toEqual({}); expect(result.current.loading).toBeTruthy(); @@ -232,7 +228,7 @@ describe("performs requests", () => { expect(result.current.data).toEqual("response"); expect(result.current.loading).toBeFalsy(); - mock.onGet(apiEndpoint).reply(200, "response2"); + mock.onGet(url).reply(200, "response2"); act(() => { result.current.refresh(); @@ -247,13 +243,13 @@ describe("performs requests", () => { it("refreshes when payload changes", async () => { const payload = { query: "hello" }; const payload2 = { query: "world" }; - mock.onPost(apiEndpoint, payload).reply(200, "response"); + mock.onPost(url, payload).reply(200, "response"); const { result, waitForNextUpdate, rerender } = renderHook( props => useApi(props), { initialProps: { - apiEndpoint, + url, payload: payload, method: "post" } @@ -265,10 +261,10 @@ describe("performs requests", () => { expect(result.current.data).toEqual("response"); expect(result.current.loading).toBeFalsy(); - mock.onPost(apiEndpoint, payload2).reply(200, "response2"); + mock.onPost(url, payload2).reply(200, "response2"); rerender({ - apiEndpoint, + url, payload: payload2, method: "post" }); @@ -280,11 +276,9 @@ describe("performs requests", () => { }); it("returns an error on request error", async () => { - mock.onGet(apiEndpoint).reply(404, "response"); + mock.onGet(url).reply(404, "response"); - const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint }) - ); + const { result, waitForNextUpdate } = renderHook(() => useApi({ url })); expect(result.current.data).toEqual({}); expect(result.current.loading).toBeTruthy(); @@ -296,11 +290,11 @@ describe("performs requests", () => { }); it("notified when data has changed", async () => { - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); const mockChanged = jest.fn(); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, changed: mockChanged }) + useApi({ url, changed: mockChanged }) ); await waitForNextUpdate(); @@ -308,7 +302,7 @@ describe("performs requests", () => { expect(result.current.data).toEqual("response"); expect(result.current.loading).toBeFalsy(); - mock.onGet(apiEndpoint).reply(200, "response2"); + mock.onGet(url).reply(200, "response2"); act(() => { result.current.refresh(); @@ -322,11 +316,11 @@ describe("performs requests", () => { }); it("does not notify when data has not changed", async () => { - mock.onGet(apiEndpoint).reply(200, "response"); + mock.onGet(url).reply(200, "response"); const mockChanged = jest.fn(); const { result, waitForNextUpdate } = renderHook(() => - useApi({ apiEndpoint, changed: mockChanged }) + useApi({ url, changed: mockChanged }) ); await waitForNextUpdate(); @@ -346,20 +340,20 @@ describe("performs requests", () => { }); it("request can be aborted mid-request", async () => { - mock.onGet(apiEndpoint).reply(() => new Promise(() => {})); - mock.onGet(apiEndpoint + "2").reply(200, "response2"); + mock.onGet(url).reply(() => new Promise(() => {})); + mock.onGet(url + "2").reply(200, "response2"); const { result, waitForNextUpdate, rerender } = renderHook( props => useApi(props), { initialProps: { - apiEndpoint + url } } ); rerender({ - apiEndpoint: apiEndpoint + "2" + url: url + "2" }); await waitForNextUpdate();