Add test to verify refetches with different variables are working (#3434

) Intended to help troubleshoot #3335. Fixes 3335
apollographql · Sep 4, 2019 · 96a5a8d · 96a5a8d
1 parent b036c9d
commit 96a5a8d
Showing 1 changed file with 102 additions and 0 deletions.
diff --git a/packages/hooks/src/__tests__/useQuery.test.tsx b/packages/hooks/src/__tests__/useQuery.test.tsx
@@ -702,4 +702,106 @@ describe('useQuery Hook', () => {
       }
     );
   });
+
+  describe('Refetching', () => {
+    it('should properly handle refetching with different variables', async () => {
+      const carQuery: DocumentNode = gql`
+        query cars($id: Int) {
+          cars(id: $id) {
+            id
+            make
+            model
+            vin
+            __typename
+          }
+        }
+      `;
+
+      const carData1 = {
+        cars: [
+          {
+            id: 1,
+            make: 'Audi',
+            model: 'RS8',
+            vin: 'DOLLADOLLABILL',
+            __typename: 'Car'
+          }
+        ]
+      };
+
+      const carData2 = {
+        cars: [
+          {
+            id: 2,
+            make: 'Audi',
+            model: 'eTron',
+            vin: 'TREESRGOOD',
+            __typename: 'Car'
+          }
+        ]
+      };
+
+      const mocks = [
+        {
+          request: { query: carQuery, variables: { id: 1 } },
+          result: { data: carData1 }
+        },
+        {
+          request: { query: carQuery, variables: { id: 2 } },
+          result: { data: carData2 }
+        },
+        {
+          request: { query: carQuery, variables: { id: 1 } },
+          result: { data: carData1 }
+        }
+      ];
+
+      let renderCount = 0;
+      function App() {
+        const { loading, data, refetch } = useQuery(carQuery, {
+          variables: { id: 1 }
+        });
+
+        switch (renderCount) {
+          case 0:
+            expect(loading).toBeTruthy();
+            break;
+          case 1:
+            expect(loading).toBeFalsy();
+            expect(data).toEqual(carData1);
+            refetch({ id: 2 });
+            break;
+          case 2:
+            expect(loading).toBeTruthy();
+            break;
+          case 3:
+            expect(loading).toBeFalsy();
+            expect(data).toEqual(carData2);
+            refetch({ id: 1 });
+            break;
+          case 4:
+            expect(loading).toBeTruthy();
+            break;
+          case 5:
+            expect(loading).toBeFalsy();
+            expect(data).toEqual(carData1);
+            break;
+          default:
+        }
+
+        renderCount += 1;
+        return null;
+      }
+
+      render(
+        <MockedProvider mocks={mocks}>
+          <App />
+        </MockedProvider>
+      );
+
+      await wait(() => {
+        expect(renderCount).toBe(6);
+      });
+    });
+  });
 });