graphql-hooks - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

package.json

 {
   "name": "graphql-hooks",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Graphql Hooks",
@@ -30,3 +30,3 @@ "main": "src/index.js",
   "devDependencies": {
-    "@babel/preset-env": "7.3.1",
+    "@babel/preset-env": "7.3.4",
     "@babel/preset-react": "7.0.0",
@@ -42,3 +42,4 @@ "all-contributors-cli": "6.1.2",
     "react-dom": "16.8.3",
-    "react-testing-library": "5.9.0"
+    "react-hooks-testing-library": "0.3.4",
+    "react-testing-library": "6.0.0"
   },
@@ -45,0 +46,0 @@ "dependencies": {},

README.md

@@ -14,3 +14,3 @@ # graphql-hooks
 - 🥇 First-class hooks API
-- ⚖️ _Tiny_ bundle: only 3.7kB (1.4 gzipped)
+- ⚖️ _Tiny_ bundle: only 4kB (1.5 gzipped)
 - 📄 Full SSR support: see [graphql-hooks-ssr](https://github.com/nearform/graphql-hooks-ssr)
@@ -326,8 +326,6 @@ - 🔌 Plugin Caching: see [graphql-hooks-memcache](https://github.com/nearform/graphql-hooks-memcache)
   query allPosts($first: Int!, $skip: Int!) {
-    allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+    allPosts(first: $first, skip: $skip) {
       id
       title
-      votes
       url
-      createdAt
     }
@@ -462,5 +460,6 @@ _allPostsMeta {
 <!-- prettier-ignore -->
-<table><tr><td align="center"><a href="https://twitter.com/bmullan91"><img src="https://avatars1.githubusercontent.com/u/1939483?v=4" width="100px;" alt="Brian Mullan"/><br /><sub><b>Brian Mullan</b></sub></a><br /><a href="#question-bmullan91" title="Answering Questions">💬</a> <a href="https://github.com/nearfrorm/graphql-hooks/issues?q=author%3Abmullan91" title="Bug reports">🐛</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=bmullan91" title="Code">💻</a> <a href="#content-bmullan91" title="Content">🖋</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=bmullan91" title="Documentation">📖</a> <a href="#example-bmullan91" title="Examples">💡</a> <a href="#ideas-bmullan91" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-bmullan91" title="Maintenance">🚧</a> <a href="#review-bmullan91" title="Reviewed Pull Requests">👀</a></td><td align="center"><a href="https://jackdc.com"><img src="https://avatars0.githubusercontent.com/u/1485654?v=4" width="100px;" alt="Jack Clark"/><br /><sub><b>Jack Clark</b></sub></a><br /><a href="#question-jackdclark" title="Answering Questions">💬</a> <a href="https://github.com/nearfrorm/graphql-hooks/issues?q=author%3Ajackdclark" title="Bug reports">🐛</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=jackdclark" title="Code">💻</a> <a href="#content-jackdclark" title="Content">🖋</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=jackdclark" title="Documentation">📖</a> <a href="#example-jackdclark" title="Examples">💡</a> <a href="#ideas-jackdclark" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-jackdclark" title="Maintenance">🚧</a> <a href="#review-jackdclark" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=jackdclark" title="Tests">⚠️</a></td><td align="center"><a href="http://twitter.com/joezo"><img src="https://avatars1.githubusercontent.com/u/2870255?v=4" width="100px;" alt="Joe Warren"/><br /><sub><b>Joe Warren</b></sub></a><br /><a href="#question-Joezo" title="Answering Questions">💬</a> <a href="https://github.com/nearfrorm/graphql-hooks/issues?q=author%3AJoezo" title="Bug reports">🐛</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=Joezo" title="Code">💻</a> <a href="#content-Joezo" title="Content">🖋</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=Joezo" title="Documentation">📖</a> <a href="#example-Joezo" title="Examples">💡</a> <a href="#ideas-Joezo" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-Joezo" title="Maintenance">🚧</a> <a href="#review-Joezo" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=Joezo" title="Tests">⚠️</a></td><td align="center"><a href="http://simoneb.github.io"><img src="https://avatars1.githubusercontent.com/u/20181?v=4" width="100px;" alt="Simone Busoli"/><br /><sub><b>Simone Busoli</b></sub></a><br /><a href="#question-simoneb" title="Answering Questions">💬</a> <a href="https://github.com/nearfrorm/graphql-hooks/issues?q=author%3Asimoneb" title="Bug reports">🐛</a> <a href="https://github.com/nearfrorm/graphql-hooks/commits?author=simoneb" title="Documentation">📖</a></td></tr></table>
+| [<img src="https://avatars1.githubusercontent.com/u/1939483?v=4" width="100px;" alt="Brian Mullan"/><br /><sub><b>Brian Mullan</b></sub>](https://twitter.com/bmullan91)<br />[💬](#question-bmullan91 "Answering Questions") [🐛](https://github.com/nearform/graphql-hooks/issues?q=author%3Abmullan91 "Bug reports") [💻](https://github.com/nearform/graphql-hooks/commits?author=bmullan91 "Code") [🖋](#content-bmullan91 "Content") [📖](https://github.com/nearform/graphql-hooks/commits?author=bmullan91 "Documentation") [💡](#example-bmullan91 "Examples") [🤔](#ideas-bmullan91 "Ideas, Planning, & Feedback") [🚧](#maintenance-bmullan91 "Maintenance") [👀](#review-bmullan91 "Reviewed Pull Requests") [⚠️](https://github.com/nearform/graphql-hooks/commits?author=bmullan91 "Tests") | [<img src="https://avatars0.githubusercontent.com/u/1485654?v=4" width="100px;" alt="Jack Clark"/><br /><sub><b>Jack Clark</b></sub>](https://jackdc.com)<br />[💬](#question-jackdclark "Answering Questions") [🐛](https://github.com/nearform/graphql-hooks/issues?q=author%3Ajackdclark "Bug reports") [💻](https://github.com/nearform/graphql-hooks/commits?author=jackdclark "Code") [🖋](#content-jackdclark "Content") [📖](https://github.com/nearform/graphql-hooks/commits?author=jackdclark "Documentation") [💡](#example-jackdclark "Examples") [🤔](#ideas-jackdclark "Ideas, Planning, & Feedback") [🚧](#maintenance-jackdclark "Maintenance") [👀](#review-jackdclark "Reviewed Pull Requests") [⚠️](https://github.com/nearform/graphql-hooks/commits?author=jackdclark "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2870255?v=4" width="100px;" alt="Joe Warren"/><br /><sub><b>Joe Warren</b></sub>](http://twitter.com/joezo)<br />[💬](#question-Joezo "Answering Questions") [🐛](https://github.com/nearform/graphql-hooks/issues?q=author%3AJoezo "Bug reports") [💻](https://github.com/nearform/graphql-hooks/commits?author=Joezo "Code") [🖋](#content-Joezo "Content") [📖](https://github.com/nearform/graphql-hooks/commits?author=Joezo "Documentation") [💡](#example-Joezo "Examples") [🤔](#ideas-Joezo "Ideas, Planning, & Feedback") [🚧](#maintenance-Joezo "Maintenance") [👀](#review-Joezo "Reviewed Pull Requests") [⚠️](https://github.com/nearform/graphql-hooks/commits?author=Joezo "Tests") | [<img src="https://avatars1.githubusercontent.com/u/20181?v=4" width="100px;" alt="Simone Busoli"/><br /><sub><b>Simone Busoli</b></sub>](http://simoneb.github.io)<br />[💬](#question-simoneb "Answering Questions") [🐛](https://github.com/nearform/graphql-hooks/issues?q=author%3Asimoneb "Bug reports") [📖](https://github.com/nearform/graphql-hooks/commits?author=simoneb "Documentation") |
+| :---: | :---: | :---: | :---: |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

src/useClientRequest.js

@@ -5,2 +5,3 @@ const React = require('react');
 const actionTypes = {
+  RESET_STATE: 'RESET_STATE',
   LOADING: 'LOADING',
@@ -13,2 +14,4 @@ CACHE_HIT: 'CACHE_HIT',
   switch (action.type) {
+    case actionTypes.RESET_STATE:
+      return action.initialState;
     case actionTypes.LOADING:
@@ -23,2 +26,7 @@ if (state.loading) {
     case actionTypes.CACHE_HIT:
+      if (state.cacheHit) {
+        // we can be sure this is the same cacheKey hit
+        // because we dispatch RESET_STATE if it changes
+        return state;
+      }
       return {
@@ -59,8 +67,16 @@ ...action.result,
     initialOpts.skipCache || !client.cache ? null : client.cache.get(cacheKey);
-  const [state, dispatch] = React.useReducer(reducer, {
+  const initialState = {
     ...initialCacheHit,
     cacheHit: !!initialCacheHit,
     loading: initialOpts.isMutation ? false : !initialCacheHit
-  });
+  };
+  const [state, dispatch] = React.useReducer(reducer, initialState);
 
+  // NOTE: state from useReducer is only initialState on the first render
+  // in subsequent renders the operation could have changed
+  // if so the state would be invalid, this effect ensures we reset it back
+  React.useEffect(() => {
+    dispatch({ type: actionTypes.RESET_STATE, initialState });
+  }, [JSON.stringify(cacheKey)]);
+
   // arguments to fetchData override the useClientRequest arguments
@@ -67,0 +83,0 @@ async function fetchData(newOpts) {

src/useQuery.js

@@ -27,3 +27,3 @@ const React = require('react');
     queryReq();
-  }, [query, JSON.stringify(opts.variables)]);
+  }, [query, JSON.stringify(allOpts)]);
 
@@ -30,0 +30,0 @@ return {

test/unit/useClientRequest.test.js

 import React from 'react';
-import { act, testHook } from 'react-testing-library';
+import { renderHook } from 'react-hooks-testing-library';
 import { useClientRequest, ClientContext } from '../../src';
@@ -33,3 +33,3 @@
     let fetchData, state;
-    testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+    renderHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
       wrapper: Wrapper
@@ -45,3 +45,3 @@ });
       let state;
-      testHook(() => ([, state] = useClientRequest(TEST_QUERY)), {
+      renderHook(() => ([, state] = useClientRequest(TEST_QUERY)), {
         wrapper: Wrapper
@@ -59,3 +59,3 @@ });
       let state;
-      testHook(
+      renderHook(
         () => ([, state] = useClientRequest(TEST_QUERY, { skipCache: true })),
@@ -70,3 +70,3 @@ { wrapper: Wrapper }
       let state;
-      testHook(() => ([, state] = useClientRequest(TEST_QUERY)), {
+      renderHook(() => ([, state] = useClientRequest(TEST_QUERY)), {
         wrapper: Wrapper
@@ -79,3 +79,3 @@ });
       let fetchData, state;
-      testHook(
+      renderHook(
         () =>
@@ -118,3 +118,3 @@ ([fetchData, state] = useClientRequest(TEST_QUERY, {
       let fetchData, state;
-      testHook(
+      renderHook(
         () =>
@@ -141,3 +141,3 @@ ([fetchData, state] = useClientRequest(TEST_QUERY, {
       let fetchData;
-      testHook(
+      renderHook(
         () =>
@@ -163,3 +163,3 @@ ([fetchData] = useClientRequest(TEST_QUERY, {
       let fetchData, state;
-      testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+      renderHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
         wrapper: Wrapper
@@ -181,3 +181,3 @@ });
       let fetchData, state;
-      testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+      renderHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
         wrapper: Wrapper
@@ -199,3 +199,3 @@ });
       let fetchData, state;
-      testHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
+      renderHook(() => ([fetchData, state] = useClientRequest(TEST_QUERY)), {
         wrapper: Wrapper
@@ -217,3 +217,3 @@ });
       let fetchData;
-      testHook(
+      renderHook(
         () => ([fetchData] = useClientRequest(TEST_QUERY, { useCache: true })),
@@ -234,3 +234,3 @@ { wrapper: Wrapper }
         const updateDataMock = jest.fn().mockReturnValue('merged data');
-        testHook(
+        renderHook(
           () =>
@@ -261,3 +261,3 @@ ([fetchData, state] = useClientRequest(TEST_QUERY, {
         const updateDataMock = jest.fn();
-        testHook(
+        renderHook(
           () =>
@@ -279,3 +279,3 @@ ([fetchData] = useClientRequest(TEST_QUERY, {
         const updateDataMock = jest.fn();
-        testHook(
+        renderHook(
           () =>
@@ -299,3 +299,3 @@ ([fetchData] = useClientRequest(TEST_QUERY, {
         let fetchData;
-        testHook(
+        renderHook(
           () =>
@@ -302,0 +302,0 @@ ([fetchData] = useClientRequest(TEST_QUERY, {

test/unit/useQuery.test.js

 import React from 'react';
-import { testHook } from 'react-testing-library';
+import { renderHook } from 'react-hooks-testing-library';
 import { ClientContext, useQuery, useClientRequest } from '../../src';
@@ -40,3 +40,3 @@
   it('calls useClientRequest with query', () => {
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
+    renderHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
     expect(useClientRequest).toHaveBeenCalledWith(TEST_QUERY, {
@@ -48,5 +48,8 @@ useCache: true
   it('calls useClientRequest with options', () => {
-    testHook(() => useQuery(TEST_QUERY, { useCache: false, extra: 'option' }), {
-      wrapper: Wrapper
-    });
+    renderHook(
+      () => useQuery(TEST_QUERY, { useCache: false, extra: 'option' }),
+      {
+        wrapper: Wrapper
+      }
+    );
     expect(useClientRequest).toHaveBeenCalledWith(TEST_QUERY, {
@@ -60,3 +63,3 @@ useCache: false,
     let state;
-    testHook(() => (state = useQuery(TEST_QUERY)), { wrapper: Wrapper });
+    renderHook(() => (state = useQuery(TEST_QUERY)), { wrapper: Wrapper });
     expect(state).toEqual({
@@ -71,3 +74,5 @@ loading: true,
     let refetch;
-    testHook(() => ({ refetch } = useQuery(TEST_QUERY)), { wrapper: Wrapper });
+    renderHook(() => ({ refetch } = useQuery(TEST_QUERY)), {
+      wrapper: Wrapper
+    });
     refetch();
@@ -82,3 +87,3 @@ expect(mockQueryReq).toHaveBeenCalledWith({
     let refetch;
-    testHook(
+    renderHook(
       () =>
@@ -108,3 +113,3 @@ ({ refetch } = useQuery(TEST_QUERY, {
     let refetch;
-    testHook(
+    renderHook(
       () =>
@@ -126,3 +131,3 @@ ({ refetch } = useQuery(TEST_QUERY, {
   it('sends the query on mount if no data & no error', () => {
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
+    renderHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
     expect(mockQueryReq).toHaveBeenCalledTimes(1);
@@ -134,3 +139,3 @@ });
     mockQueryReq.mockResolvedValueOnce('data');
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
+    renderHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
     expect(mockClient.ssrPromises[0]).resolves.toBe('data');
@@ -143,3 +148,3 @@ });
     mockQueryReq.mockResolvedValueOnce('data');
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
+    renderHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
     expect(mockClient.ssrPromises).toHaveLength(0);
@@ -152,3 +157,3 @@ });
     mockQueryReq.mockResolvedValueOnce('data');
-    testHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
+    renderHook(() => useQuery(TEST_QUERY), { wrapper: Wrapper });
     expect(mockClient.ssrPromises).toHaveLength(0);
@@ -160,3 +165,5 @@ });
     mockQueryReq.mockResolvedValueOnce('data');
-    testHook(() => useQuery(TEST_QUERY, { ssr: false }), { wrapper: Wrapper });
+    renderHook(() => useQuery(TEST_QUERY, { ssr: false }), {
+      wrapper: Wrapper
+    });
     expect(mockClient.ssrPromises).toHaveLength(0);
@@ -166,3 +173,3 @@ });
   it('does not send the same query twice', () => {
-    const { rerender } = testHook(() => useQuery(TEST_QUERY), {
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY), {
       wrapper: Wrapper
@@ -176,3 +183,3 @@ });
     let options = { variables: { limit: 2 } };
-    const { rerender } = testHook(() => useQuery(TEST_QUERY, options), {
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
       wrapper: Wrapper
@@ -187,3 +194,3 @@ });
     let options = { variables: { limit: 2 } };
-    const { rerender } = testHook(() => useQuery(TEST_QUERY, options), {
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
       wrapper: Wrapper
@@ -199,3 +206,3 @@ });
     let options = { variables: { limit: 2 } };
-    const { rerender } = testHook(() => useQuery(TEST_QUERY, options), {
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
       wrapper: Wrapper
@@ -209,5 +216,67 @@ });
 
+  it('sends the query again if the operationName changes', () => {
+    let options = { operationName: 'Operation1' };
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    options.operationName = 'Operation2';
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the operationName changes, even if there was previously data', () => {
+    let options = { operationName: 'Operation1' };
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    mockState.data = { some: 'data' };
+    options.operationName = 'Operation2';
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the operationName changes, even if there was previously an error', () => {
+    let options = { operationName: 'Operation1' };
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    mockState.error = true;
+    options.operationName = 'Operation2';
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the options.useCache changes', () => {
+    let options = { useCache: true };
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    options.useCache = false;
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the options.skipCache changes', () => {
+    let options = { skipCache: true };
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    options.skipCache = false;
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
+  it('sends the query again if the options.fetchOptionsOverrides changes', () => {
+    let options = { fetchOptionsOverrides: { mode: 'cors' } };
+    const { rerender } = renderHook(() => useQuery(TEST_QUERY, options), {
+      wrapper: Wrapper
+    });
+    options.fetchOptionsOverrides = { mode: 'no-cors' };
+    rerender();
+    expect(mockQueryReq).toHaveBeenCalledTimes(2);
+  });
+
   it('sends another query if the query changes', () => {
     let query = TEST_QUERY;
-    const { rerender } = testHook(() => useQuery(query), {
+    const { rerender } = renderHook(() => useQuery(query), {
       wrapper: Wrapper
@@ -222,3 +291,3 @@ });
     let query = TEST_QUERY;
-    const { rerender } = testHook(() => useQuery(query), {
+    const { rerender } = renderHook(() => useQuery(query), {
       wrapper: Wrapper
@@ -234,3 +303,3 @@ });
     let query = TEST_QUERY;
-    const { rerender } = testHook(() => useQuery(query), {
+    const { rerender } = renderHook(() => useQuery(query), {
       wrapper: Wrapper
@@ -237,0 +306,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

71394

increased by11.83%

Number of package files

26

increased by23.81%

Lines of code

1238

increased by17.57%

Worsened metrics

Dev dependency count

13

increased by8.33%

Number of lines in readme file

463

decreased by-0.22%

No dependency changes