graphql-react - npm Package Compare versions

Comparing version 9.1.0 to 10.0.0

changelog.md

 # graphql-react changelog
 
+## 10.0.0
+
+### Major
+
+- Updated Node.js support from v8.10+ to v10+.
+- Updated dependencies, some of which require Node.js v10+.
+- Replaced the [`tap`](https://npm.im/tap) dev dependency with [`test-director`](https://npm.im/test-director) and [`hard-rejection`](https://npm.im/hard-rejection), and refactored tests accordingly. This improves the dev experience and reduced the dev install size by ~75.5 MB.
+- Use `ReactDOM.unstable_batchedUpdates` in the `useGraphQL` React hook to reduce the number of renders when loading completes, fixing [#38](https://github.com/jaydenseric/graphql-react/issues/38) via [#42](https://github.com/jaydenseric/graphql-react/pull/42). Although [`react-dom`](https://npm.im/react-dom) was already a peer dependency, this is the first time it's being used in the client API; potentially a breaking change for atypical projects.
+
+### Patch
+
+- Updated tests for compatibility with updated dependencies.
+- Removed the [`object-assign`](https://npm.im/object-assign) dependency and several Babel dev dependencies after simplifying the Babel config.
+- Added a new [`babel-plugin-transform-require-extensions`](https://npm.im/babel-plugin-transform-require-extensions) dev dependency and ensured ESM import specifiers in both source and published `.mjs` files contain file names with extensions, which [are mandatory in the final Node.js ESM implementation](https://nodejs.org/api/esm.html#esm_mandatory_file_extensions). Published CJS `.js` files now also have file extensions in `require` paths.
+- Stop using [`husky`](https://npm.im/husky) and [`lint-staged`](https://npm.im/lint-staged).
+- Lint fixes for [`prettier`](https://npm.im/prettier) v2.
+- Tidied Babel configs.
+- Ensure GitHub Actions run on pull request.
+- Use strict mode for scripts.
+- Readme “Apollo comparison” section corrections and tweaks.
+
 ## 9.1.0
@@ -4,0 +25,0 @@

package.json

 {
   "name": "graphql-react",
-  "version": "9.1.0",
+  "version": "10.0.0",
   "description": "A GraphQL client for React using modern context and hooks APIs that is lightweight (< 2.5 KB size limited) but powerful; the first Relay and Apollo alternative with server side rendering.",
@@ -36,5 +36,5 @@ "license": "MIT",
   "engines": {
-    "node": ">=8.10"
+    "node": ">=10"
   },
-  "browserslist": "Node >= 8.10, > 0.5%, not OperaMini all, not dead",
+  "browserslist": "Node >= 10, > 0.5%, not OperaMini all, not dead",
   "peerDependencies": {
@@ -45,44 +45,42 @@ "react": "^16.8.0",
   "dependencies": {
-    "@babel/runtime": "^7.5.5",
-    "extract-files": "^5.0.1",
+    "@babel/runtime": "^7.9.0",
+    "extract-files": "^8.0.0",
     "fnv1a": "^1.0.1",
     "mitt": "^1.1.3",
-    "object-assign": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.5.5",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@size-limit/preset-small-lib": "^2.2.1",
-    "babel-eslint": "^10.0.2",
-    "babel-plugin-transform-replace-object-assign": "^2.0.0",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@size-limit/preset-small-lib": "^4.4.0",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-require-extensions": "^2.0.0",
     "cross-fetch": "^3.0.4",
-    "eslint": "^6.7.2",
-    "eslint-config-env": "^11.0.1",
-    "eslint-config-prettier": "^6.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-import-order-alphabetical": "^1.0.0",
-    "eslint-plugin-jsdoc": "^18.4.1",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-react-hooks": "^2.3.0",
-    "formdata-node": "^1.8.0",
-    "graphql": "^14.4.2",
-    "graphql-api-koa": "^2.0.0",
-    "husky": "^3.0.1",
-    "jsdoc-md": "^4.0.1",
+    "eslint": "^6.8.0",
+    "eslint-config-env": "^13.0.4",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsdoc": "^22.1.0",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.1",
+    "fetch-blob": "^1.0.5",
+    "formdata-node": "^2.1.1",
+    "graphql": "^14.6.0",
+    "graphql-api-koa": "^4.1.1",
+    "hard-rejection": "^2.1.0",
+    "jsdoc-md": "^5.0.1",
     "koa": "^2.7.0",
-    "koa-bodyparser": "^4.2.1",
-    "lint-staged": "^9.5.0",
-    "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
-    "tap": "^14.10.2"
+    "koa-bodyparser": "^4.3.0",
+    "prettier": "^2.0.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-test-renderer": "^16.13.1",
+    "size-limit": "^4.4.0",
+    "test-director": "^4.0.0"
   },
@@ -96,6 +94,7 @@ "scripts": {
     "prepare:prettier": "prettier '{universal,server,test}/**/*.{mjs,js}' readme.md --write",
-    "test": "npm run test:eslint && npm run test:prettier && npm run test:tap && npm run test:size",
+    "test": "npm run test:eslint && npm run test:prettier && npm run test:esm && npm run test:cjs && npm run test:size",
     "test:eslint": "eslint . --ext mjs,js",
     "test:prettier": "prettier '**/*.{json,yml,md}' -l",
-    "test:tap": "tap test/*.{mjs,js}",
+    "test:esm": "if node --input-type=module -e '' > /dev/null 2>&1; then node -r hard-rejection/register test/index.mjs; fi",
+    "test:cjs": "node -r hard-rejection/register test",
     "test:size": "size-limit",
@@ -102,0 +101,0 @@ "prepublishOnly": "npm test"

readme.md

@@ -69,3 +69,3 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)
     operation: {
-      query: `{ pokemon(name: "${name}") { image } }`
+      query: `{ pokemon(name: "${name}") { image } }`,
     },
@@ -83,3 +83,3 @@
     // delete the cache and are mostly only used when logging out the user.
-    loadOnReset: true
+    loadOnReset: true,
   })
@@ -110,3 +110,3 @@
 
-- Node.js v8.10+
+- Node.js v10+
 - Browsers [`> 0.5%, not OperaMini all, not dead`](https://browserl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead)
@@ -427,7 +427,7 @@
 >     operation: {
->       query: `{ pokemon(name: "${name}") { image } }`
+>       query: `{ pokemon(name: "${name}") { image } }`,
 >     },
 >     loadOnMount: true,
 >     loadOnReload: true,
->     loadOnReset: true
+>     loadOnReset: true,
 >   })
@@ -566,3 +566,3 @@ >
 > ```js
-> options => {
+> ;(options) => {
 >   options.url = 'https://api.example.com/graphql'
@@ -745,3 +745,3 @@ >   options.credentials = 'include'
 
-By default, cache is refreshed for mounting components.
+Typically, cache is refreshed for mounting components.
 
@@ -752,3 +752,3 @@ GraphQL operations can optionally refresh all cache except their own fresh cache; handy for mutations.
 
-By default, cache isn’t refreshed for mounting components.
+Typically, cache isn’t refreshed for mounting components.
 
@@ -761,3 +761,3 @@ GraphQL mutations only update the cache with the contents of their payload. The prescribed approach is to try to manually update other normalized cache after mutations using complicated and often buggy APIs. Resetting all cache is possible, but it also wipes the result of the last operation.
 
-Out of the box file uploads compliant with the [GraphQL multipart request spec](https://github.com/jaydenseric/graphql-multipart-request-spec) (authored by [@jaydenseric](https://github.com/jaydenseric)) which is supported by popular GraphQL servers including [Apollo Server](https://apollographql.com/docs/apollo-server). File input values can be used as query or mutation arguments.
+Supports file uploads out of the box, compliant with the [GraphQL multipart request spec](https://github.com/jaydenseric/graphql-multipart-request-spec) (authored by [@jaydenseric](https://github.com/jaydenseric)) which is supported by popular GraphQL servers including [Apollo Server](https://apollographql.com/docs/apollo-server). File input values can be used as query or mutation arguments.
 
@@ -792,6 +792,8 @@ #### Apollo
 
-Has [an official example](https://github.com/zeit/next.js/tree/canary/examples/with-graphql-react) using [`next-graphql-react`](https://npm.im/next-graphql-react), which provides easy an easy to install [`App`](https://nextjs.org/docs/#custom-app) decorator and [plugin](https://nextjs.org/docs/#custom-configuration) to enable server side rendered GraphQL queries.
+Has [an official example](https://github.com/zeit/next.js/tree/canary/examples/with-graphql-react) using [`next-graphql-react`](https://npm.im/next-graphql-react), which provides easy to install custom [`App`](https://nextjs.org/docs/#custom-app) and [config](https://nextjs.org/docs/#custom-configuration) decorators to enable server side rendered GraphQL queries.
 
+Also has [more detailed examples](https://github.com/jaydenseric/graphql-react-examples), deployed at [graphql-react.now.sh](https://graphql-react.now.sh).
+
 #### Apollo
 
 Has [an official example](https://github.com/zeit/next.js/tree/canary/examples/with-apollo), but it consists of over 100 lines of complicated copy-paste boilerplate code across multiple files.

server/index.js

@@ -6,4 +6,4 @@ 'use strict'
 
-var _ssr = require('./ssr')
+var _ssr = require('./ssr.js')
 
 exports.ssr = _ssr.ssr

server/ssr.js

@@ -8,5 +8,5 @@ 'use strict'
 
-var _server = _interopRequireDefault(require('react-dom/server'))
+var _serverNode = _interopRequireDefault(require('react-dom/server.node.js'))
 
-var _GraphQL = require('../universal/GraphQL')
+var _GraphQL = require('../universal/GraphQL.js')
 
@@ -16,3 +16,3 @@ async function ssr(
   node,
-  render = _server.default.renderToStaticMarkup
+  render = _serverNode.default.renderToStaticMarkup
 ) {
@@ -19,0 +19,0 @@ if (!(graphql instanceof _GraphQL.GraphQL))

universal/GraphQL.js

@@ -14,5 +14,5 @@ 'use strict'
 
-var _graphqlFetchOptions = require('./graphqlFetchOptions')
+var _graphqlFetchOptions = require('./graphqlFetchOptions.js')
 
-var _hashObject = require('./hashObject')
+var _hashObject = require('./hashObject.js')
 
@@ -26,15 +26,15 @@ var GraphQL = function GraphQL(_temp) {
 
-  this.reload = function(exceptCacheKey) {
+  this.reload = function (exceptCacheKey) {
     _this.emit('reload', {
-      exceptCacheKey: exceptCacheKey
+      exceptCacheKey: exceptCacheKey,
     })
   }
 
-  this.reset = function(exceptCacheKey) {
+  this.reset = function (exceptCacheKey) {
     var cacheKeys = Object.keys(_this.cache)
     if (exceptCacheKey)
-      cacheKeys = cacheKeys.filter(function(hash) {
+      cacheKeys = cacheKeys.filter(function (hash) {
         return hash !== exceptCacheKey
       })
-    cacheKeys.forEach(function(cacheKey) {
+    cacheKeys.forEach(function (cacheKey) {
       return delete _this.cache[cacheKey]
@@ -44,7 +44,7 @@ })
     _this.emit('reset', {
-      exceptCacheKey: exceptCacheKey
+      exceptCacheKey: exceptCacheKey,
     })
   }
 
-  this.fetch = function(_ref2, cacheKey) {
+  this.fetch = function (_ref2, cacheKey) {
     var url = _ref2.url,
@@ -56,3 +56,3 @@ options = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ['url'])
         ? fetch
-        : function() {
+        : function () {
             return Promise.reject(
@@ -65,3 +65,3 @@ new Error('Global fetch API or polyfill unavailable.')
       .then(
-        function(response) {
+        function (response) {
           fetchResponse = response
@@ -71,6 +71,6 @@ if (!response.ok)
               status: response.status,
-              statusText: response.statusText
+              statusText: response.statusText,
             }
           return response.json().then(
-            function(_ref3) {
+            function (_ref3) {
               var errors = _ref3.errors,
@@ -82,3 +82,3 @@ data = _ref3.data
             },
-            function(_ref4) {
+            function (_ref4) {
               var message = _ref4.message
@@ -89,3 +89,3 @@ cacheValue.parseError = message
         },
-        function(_ref5) {
+        function (_ref5) {
           var message = _ref5.message
@@ -95,3 +95,3 @@ cacheValue.fetchError = message
       )
-      .then(function() {
+      .then(function () {
         _this.cache[cacheKey] = cacheValue
@@ -103,3 +103,3 @@ delete _this.operations[cacheKey]
           cacheValue: cacheValue,
-          response: fetchResponse
+          response: fetchResponse,
         })
@@ -113,3 +113,3 @@
       cacheKey: cacheKey,
-      cacheValuePromise: cacheValuePromise
+      cacheValuePromise: cacheValuePromise,
     })
@@ -120,3 +120,3 @@
 
-  this.operate = function(_ref6) {
+  this.operate = function (_ref6) {
     var operation = _ref6.operation,
@@ -137,3 +137,3 @@ fetchOptionsOverride = _ref6.fetchOptionsOverride,
 
-    cacheValuePromise.then(function() {
+    cacheValuePromise.then(function () {
       if (reloadOnLoad) _this.reload(cacheKey)
@@ -145,3 +145,3 @@ else if (resetOnLoad) _this.reset(cacheKey)
       cacheValue: _this.cache[cacheKey],
-      cacheValuePromise: cacheValuePromise
+      cacheValuePromise: cacheValuePromise,
     }
@@ -148,0 +148,0 @@ }

universal/graphqlFetchOptions.js

@@ -13,4 +13,4 @@ 'use strict'
     headers: {
-      Accept: 'application/json'
-    }
+      Accept: 'application/json',
+    },
   }
@@ -29,3 +29,3 @@
     var i = 0
-    files.forEach(function(paths) {
+    files.forEach(function (paths) {
       map[++i] = paths
@@ -35,3 +35,3 @@ })
     i = 0
-    files.forEach(function(paths, file) {
+    files.forEach(function (paths, file) {
       form.append('' + ++i, file, file.name)
@@ -38,0 +38,0 @@ })

universal/GraphQLProvider.js

@@ -12,7 +12,7 @@ 'use strict'
 
-var _FirstRenderDateContext = require('./FirstRenderDateContext')
+var _FirstRenderDateContext = require('./FirstRenderDateContext.js')
 
-var _GraphQL = require('./GraphQL')
+var _GraphQL = require('./GraphQL.js')
 
-var _GraphQLContext = require('./GraphQLContext')
+var _GraphQLContext = require('./GraphQLContext.js')
 
@@ -28,3 +28,3 @@ var GraphQLProvider = function GraphQLProvider(_ref) {
     {
-      value: firstRenderDateRef.current
+      value: firstRenderDateRef.current,
     },
@@ -34,3 +34,3 @@ _react.default.createElement(
       {
-        value: graphql
+        value: graphql,
       },
@@ -45,3 +45,3 @@ children
   graphql: _propTypes.default.instanceOf(_GraphQL.GraphQL).isRequired,
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
 }

universal/index.js

@@ -6,20 +6,20 @@ 'use strict'
 
-var _GraphQL = require('./GraphQL')
+var _GraphQL = require('./GraphQL.js')
 
 exports.GraphQL = _GraphQL.GraphQL
 
-var _GraphQLContext = require('./GraphQLContext')
+var _GraphQLContext = require('./GraphQLContext.js')
 
 exports.GraphQLContext = _GraphQLContext.GraphQLContext
 
-var _GraphQLProvider = require('./GraphQLProvider')
+var _GraphQLProvider = require('./GraphQLProvider.js')
 
 exports.GraphQLProvider = _GraphQLProvider.GraphQLProvider
 
-var _useGraphQL = require('./useGraphQL')
+var _useGraphQL = require('./useGraphQL.js')
 
 exports.useGraphQL = _useGraphQL.useGraphQL
 
-var _reportCacheErrors = require('./reportCacheErrors')
+var _reportCacheErrors = require('./reportCacheErrors.js')
 
 exports.reportCacheErrors = _reportCacheErrors.reportCacheErrors

universal/reportCacheErrors.js

@@ -40,3 +40,3 @@ 'use strict'
       console.groupCollapsed('GraphQL:')
-      graphQLErrors.forEach(function(_ref2) {
+      graphQLErrors.forEach(function (_ref2) {
         var message = _ref2.message
@@ -43,0 +43,0 @@ return console.log(message)

universal/useGraphQL.js

@@ -10,12 +10,14 @@ 'use strict'
 
-var _FirstRenderDateContext = require('./FirstRenderDateContext')
+var _reactDom = _interopRequireDefault(require('react-dom'))
 
-var _GraphQL = require('./GraphQL')
+var _FirstRenderDateContext = require('./FirstRenderDateContext.js')
 
-var _GraphQLContext = require('./GraphQLContext')
+var _GraphQL = require('./GraphQL.js')
 
-var _graphqlFetchOptions = require('./graphqlFetchOptions')
+var _GraphQLContext = require('./GraphQLContext.js')
 
-var _hashObject = require('./hashObject')
+var _graphqlFetchOptions = require('./graphqlFetchOptions.js')
 
+var _hashObject = require('./hashObject.js')
+
 var useGraphQL = function useGraphQL(_ref) {
@@ -65,3 +67,3 @@ var fetchOptionsOverride = _ref.fetchOptionsOverride,
   var load = _react.default.useCallback(
-    function() {
+    function () {
       var _graphql$operate = graphql.operate({
@@ -71,3 +73,3 @@ operation: operation,
           reloadOnLoad: reloadOnLoad,
-          resetOnLoad: resetOnLoad
+          resetOnLoad: resetOnLoad,
         }),
@@ -89,3 +91,3 @@ cacheKey = _graphql$operate.cacheKey,
   _react.default.useEffect(
-    function() {
+    function () {
       isMountedRef.current = true
@@ -102,7 +104,7 @@
           cacheValue = _ref3.cacheValue
-
-        if (cacheKey === cachedCacheKey && isMountedRef.current) {
-          setLoading(false)
-          setCacheValue(cacheValue)
-        }
+        if (cacheKey === cachedCacheKey && isMountedRef.current)
+          _reactDom.default.unstable_batchedUpdates(function () {
+            setLoading(false)
+            setCacheValue(cacheValue)
+          })
       }
@@ -132,3 +134,3 @@
       graphql.on('reset', onReset)
-      return function() {
+      return function () {
         isMountedRef.current = false
@@ -153,3 +155,3 @@ graphql.off('fetch', onFetch)
   _react.default.useEffect(
-    function() {
+    function () {
       if (
@@ -170,3 +172,3 @@ loadOnMount &&
       loadOnMount,
-      loadedOnMountCacheKey
+      loadedOnMountCacheKey,
     ]
@@ -180,3 +182,3 @@ )
       reloadOnLoad: reloadOnLoad,
-      resetOnLoad: resetOnLoad
+      resetOnLoad: resetOnLoad,
     })
@@ -187,3 +189,3 @@ return {
     cacheKey: cacheKey,
-    cacheValue: cacheValue
+    cacheValue: cacheValue,
   }
@@ -190,0 +192,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91742

increased by2.82%

Dependency count

7

decreased by-12.5%

Dev dependency count

33

decreased by-2.94%

Lines of code

904

increased by0.44%

Number of lines in readme file

791

increased by0.25%

Dependency changes

• + Addedextract-files@8.1.0(transitive)

• - Removedobject-assign@^4.1.1

• - Removedextract-files@5.0.1(transitive)

• Updated@babel/runtime@^7.9.0

• Updatedextract-files@^8.0.0