graphql-hooks - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

package.json

 {
   "name": "graphql-hooks",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Graphql Hooks",
@@ -5,0 +5,0 @@ "main": "src/index.js",

src/useQuery.js

@@ -28,5 +28,3 @@ const React = require('react');
   React.useEffect(() => {
-    if (!state.data && !state.error) {
-      queryReq();
-    }
+    queryReq();
   }, [query, JSON.stringify(opts.variables)]);
@@ -33,0 +31,0 @@

test/unit/useClientRequest.test.js

@@ -1,5 +0,204 @@
-import { useClientRequest } from '../../src';
+import React from 'react';
+import { act, testHook } from 'react-testing-library';
+import { useClientRequest, ClientContext } from '../../src';
 
+let mockClient;
+
+const Wrapper = props => (
+  <ClientContext.Provider value={mockClient}>
+    {props.children}
+  </ClientContext.Provider>
+);
+
+const TEST_QUERY = `query Test($limit: Int) {
+  tests(limit: $limit) {
+    id
+  }
+}`;
+
 describe('useClientRequest', () => {
-  it('runs a test', () => {});
+  beforeEach(() => {
+    mockClient = {
+      getCacheKey: jest.fn().mockReturnValue('cacheKey'),
+      cache: {
+        get: jest.fn(),
+        set: jest.fn()
+      },
+      request: jest.fn().mockResolvedValue({ some: 'data' })
+    };
+  });
+
+  it('returns a fetch function & state', () => {
+    let fetchData, state;
+    testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+      wrapper: Wrapper
+    });
+    expect(fetchData).toEqual(expect.any(Function));
+    expect(state).toEqual({ cacheHit: false, loading: true });
+  });
+
+  describe('initial state', () => {
+    it('includes the cached response if present', () => {
+      mockClient.cache.get.mockReturnValueOnce({ some: 'cached data' });
+      let state;
+      testHook(() => ([, state] = useClientRequest(TEST_QUERY)), {
+        wrapper: Wrapper
+      });
+      expect(state).toEqual({
+        cacheHit: true,
+        loading: false,
+        some: 'cached data'
+      });
+    });
+
+    it('skips the cache if skipCache is passed in', () => {
+      mockClient.cache.get.mockReturnValueOnce({ some: 'cached data' });
+      let state;
+      testHook(
+        () => ([, state] = useClientRequest(TEST_QUERY, { skipCache: true })),
+        { wrapper: Wrapper }
+      );
+      expect(state).toEqual({ cacheHit: false, loading: true });
+    });
+
+    it('skips the cache if a cache is not configured', () => {
+      mockClient.cache = null;
+      let state;
+      testHook(() => ([, state] = useClientRequest(TEST_QUERY)), {
+        wrapper: Wrapper
+      });
+      expect(state).toEqual({ cacheHit: false, loading: true });
+    });
+  });
+
+  describe('fetchData', () => {
+    // fetchData tests will be currently be causing warnings in the console, explanation:
+    //
+    // fetchData updates the state & therefore needs to be wrapped inside an `act`
+    // https://reactjs.org/docs/test-utils.html#act.
+    //
+    //      Warning: An update to TestHook inside a test was not wrapped in act(...).
+    //      When testing, code that causes React state updates should be wrapped into act(...):
+    //      act(() => {
+    //        /* fire events that update state */
+    //      });
+    //      / * assert on the output */
+    //      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://fb.me/react-wrap-tests-with-act
+    //          in TestHook
+    //          in Wrapper
+    //
+    // fetchData is an async function, which `act` does not currently support
+    // see https://github.com/facebook/react/issues/14769
+    //
+    // support is currently being implemented
+    // see https://github.com/facebook/react/pull/14853
+
+    it('calls request with options & updates the state with the result', async () => {
+      let fetchData, state;
+      testHook(
+        () =>
+          ([fetchData, state] = useClientRequest(TEST_QUERY, {
+            variables: { limit: 2 },
+            operationName: 'test'
+          })),
+        {
+          wrapper: Wrapper
+        }
+      );
+
+      await fetchData();
+
+      expect(mockClient.request).toHaveBeenCalledWith(
+        { operationName: 'test', variables: { limit: 2 }, query: TEST_QUERY },
+        { operationName: 'test', variables: { limit: 2 } }
+      );
+      expect(state).toEqual({ cacheHit: false, loading: false, some: 'data' });
+    });
+
+    it('calls request with revised options', async () => {
+      let fetchData;
+      testHook(
+        () =>
+          ([fetchData] = useClientRequest(TEST_QUERY, {
+            variables: { limit: 2 },
+            operationName: 'test'
+          })),
+        {
+          wrapper: Wrapper
+        }
+      );
+
+      await fetchData({ variables: { limit: 3 } });
+
+      expect(mockClient.request).toHaveBeenCalledWith(
+        { operationName: 'test', variables: { limit: 3 }, query: TEST_QUERY },
+        { operationName: 'test', variables: { limit: 3 } }
+      );
+    });
+
+    it('skips the request & returns the cached data if it exists', async () => {
+      let fetchData, state;
+      testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+        wrapper: Wrapper
+      });
+
+      mockClient.cache.get.mockReturnValueOnce({ some: 'cached data' });
+      await fetchData();
+
+      expect(mockClient.request).not.toHaveBeenCalled();
+      expect(state).toEqual({
+        cacheHit: true,
+        loading: false,
+        some: 'cached data'
+      });
+    });
+
+    it('skips the cache if skipCache is passed in', async () => {
+      let fetchData, state;
+      testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+        wrapper: Wrapper
+      });
+
+      mockClient.cache.get.mockReturnValueOnce({ some: 'cached data' });
+      await fetchData({ skipCache: true });
+
+      expect(mockClient.request).toHaveBeenCalled();
+      expect(state).toEqual({
+        cacheHit: false,
+        loading: false,
+        some: 'data'
+      });
+    });
+
+    it('skips the cache if skipCache is there is no cache', async () => {
+      let fetchData, state;
+      testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+        wrapper: Wrapper
+      });
+
+      mockClient.cache = null;
+      await fetchData();
+
+      expect(mockClient.request).toHaveBeenCalled();
+      expect(state).toEqual({
+        cacheHit: false,
+        loading: false,
+        some: 'data'
+      });
+    });
+
+    it('sets the result from the request in the cache', async () => {
+      let fetchData;
+      testHook(
+        () => ([fetchData] = useClientRequest(TEST_QUERY, { useCache: true })),
+        { wrapper: Wrapper }
+      );
+
+      await fetchData();
+
+      expect(mockClient.cache.set).toHaveBeenCalledWith('cacheKey', {
+        some: 'data'
+      });
+    });
+  });
 });

test/unit/useQuery.test.js

@@ -39,6 +39,2 @@ import React from 'react';
 
-  afterEach(() => {
-    jest.unmock('../../src/useClientRequest');
-  });
-
   it('calls useClientRequest with query', () => {
@@ -83,14 +79,2 @@ testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
 
-  it('does not send the same query on mount if data is already present', () => {
-    mockState.data = { some: 'data' };
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
-    expect(mockQueryReq).not.toHaveBeenCalled();
-  });
-
-  it('does not send the query on mount if there is an error', () => {
-    mockState.error = true;
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
-    expect(mockQueryReq).not.toHaveBeenCalled();
-  });
-
   it('adds query to ssrPromises when in ssrMode if no data & no error', () => {
@@ -144,2 +128,24 @@ mockClient.ssrMode = true;
 
+  it('sends the query again if the variables change, even if there was previously data', () => {
+    let options = { variables: { limit: 2 } };
+    const { rerender } = testHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    mockState.data = { some: 'data' };
+    options.variables.limit = 3;
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the variables change, even if there was previously an error', () => {
+    let options = { variables: { limit: 2 } };
+    const { rerender } = testHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    mockState.error = true;
+    options.variables.limit = 3;
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
   it('sends another query if the query changes', () => {
@@ -154,2 +160,24 @@ let query = TEST_QUERY;
   });
+
+  it('sends the query again if the query changes, even if there was previously data', () => {
+    let query = TEST_QUERY;
+    const { rerender } = testHook(() => useQuery(query), {
+      wrapper: Wrapper
+    });
+    mockState.data = { some: 'data' };
+    query = ANOTHER_TEST_QUERY;
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the query changes, even if there was previously an error', () => {
+    let query = TEST_QUERY;
+    const { rerender } = testHook(() => useQuery(query), {
+      wrapper: Wrapper
+    });
+    mockState.error = true;
+    query = ANOTHER_TEST_QUERY;
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
 });

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48777

increased by19.07%

Number of package files

20

increased by11.11%

Lines of code

908

increased by33.73%

Worsened metrics

Number of medium supply chain risk alerts

14

increased by7.69%

No dependency changes