Fix an infinite loop on fetching without a resolve function

contiamo · Oct 31, 2018 · 4cba6ad · 4cba6ad
1 parent da9e7da
commit 4cba6ad
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 23 deletions.
diff --git a/src/Get.test.tsx b/src/Get.test.tsx
@@ -567,23 +567,14 @@ describe("Get", () => {
         .persist();
       const children = jest.fn();
       children.mockReturnValue(<div />);
-      const resolve = a => a;
-      /**
-       * A new instance of RestfulProvider is created on every rerender.
-       * This will create a new resolve function every time forcing Get to
-       * refetch.
-       * In a real app, only Get would be rerendered so resolve would be the
-       * same on every new render. To mimic that behavior, resolve is created
-       * ahead so Get will get the same instance on every rerender.
-       */
       const { rerender } = render(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake">
           <Get path="?test=1">{children}</Get>
         </RestfulProvider>,
       );
       times(10, i =>
         rerender(
-          <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+          <RestfulProvider base="https://my-awesome-api.fake">
             <Get path={`?test=${i + 1}`}>{children}</Get>
           </RestfulProvider>,
         ),
@@ -600,14 +591,13 @@ describe("Get", () => {
         .persist();
       const children = jest.fn();
       children.mockReturnValue(<div />);
-      const resolve = a => a;
       const { rerender } = render(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake" resolve={data => data}>
           <Get path="">{children}</Get>
         </RestfulProvider>,
       );
       rerender(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake" resolve={data => data}>
           <Get path="">{children}</Get>
         </RestfulProvider>,
       );
@@ -620,17 +610,16 @@ describe("Get", () => {
         .reply(200, () => ++apiCalls);
       const children = jest.fn();
       children.mockReturnValue(<div />);
-      const resolve = a => a;
       const { rerender } = render(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake">
           <Get path="">{children}</Get>
         </RestfulProvider>,
       );
       nock("https://my-new-api.fake")
         .get("/")
         .reply(200, () => ++apiCalls);
       rerender(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake">
           <Get base="https://my-new-api.fake" path="">
             {children}
           </Get>
@@ -647,14 +636,13 @@ describe("Get", () => {
         .persist();
       const children = jest.fn();
       children.mockReturnValue(<div />);
-      const resolve = a => a;
       const { rerender } = render(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake">
           <Get path="/?test=0">{children}</Get>
         </RestfulProvider>,
       );
       rerender(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={resolve}>
+        <RestfulProvider base="https://my-awesome-api.fake">
           <Get path="/?test=1">{children}</Get>
         </RestfulProvider>,
       );
@@ -674,9 +662,9 @@ describe("Get", () => {
           <Get path="">{children}</Get>
         </RestfulProvider>,
       );
-      const newResolve = a => a;
+      const newResolve = () => "hello";
       rerender(
-        <RestfulProvider base="https://my-awesome-api.fake" resolve={providerResolve}>
+        <RestfulProvider base="https://my-awesome-api.fake" resolve={newResolve}>
           <Get path="" resolve={newResolve}>
             {children}
           </Get>

diff --git a/src/Get.tsx b/src/Get.tsx
@@ -170,7 +170,8 @@ class ContextlessGet<TData, TError> extends React.Component<
       base !== this.props.base ||
       parentPath !== this.props.parentPath ||
       path !== this.props.path ||
-      resolve !== this.props.resolve
+      // both `resolve` props need to _exist_ first, and then be equivalent.
+      (resolve && this.props.resolve && resolve.toString() !== this.props.resolve.toString())
     ) {
       if (!this.props.lazy) {
         this.fetch();