graphql-react - npm Package Compare versions

Comparing version 8.1.1 to 8.1.2

changelog.md

 # graphql-react changelog
 
+## 8.1.2
+
+### Patch
+
+- Updated dependencies.
+- Updated `useGraphQL` to use `useCallback` and added hook dependency arrays, to fix a recently appearing `react-hooks/exhaustive-deps` lint error and hopefully reduce render work.
+- Reduced the size of the published `package.json` by moving dev tool config to files. This also prevents editor extensions such as Prettier and ESLint from detecting config and attempting to operate when opening package files installed in `node_modules`.
+- Discuss Apollo Client fragment matcher config in the “Apollo comparison” readme section.
+
 ## 8.1.1
@@ -4,0 +13,0 @@

package.json

 {
   "name": "graphql-react",
-  "version": "8.1.1",
+  "version": "8.1.2",
   "description": "A lightweight but powerful GraphQL client for React using modern context and hooks APIs; the first Relay and Apollo alternative with server side rendering.",
@@ -43,3 +43,3 @@ "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
+    "@babel/runtime": "^7.4.2",
     "extract-files": "^5.0.1",
@@ -52,12 +52,12 @@ "fnv1a": "^1.0.1",
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
+    "@babel/plugin-transform-runtime": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-transform-replace-object-assign": "^2.0.0",
-    "cross-fetch": "^3.0.1",
-    "eslint": "^5.14.1",
+    "cross-fetch": "^3.0.2",
+    "eslint": "^5.16.0",
     "eslint-config-env": "^4.0.0",
@@ -70,5 +70,5 @@ "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.3.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "formdata-node": "^1.5.1",
-    "graphql": "^14.1.1",
+    "graphql": "^14.2.0",
     "graphql-api-koa": "^2.0.0",
@@ -79,9 +79,9 @@ "husky": "^1.3.1",
     "koa-bodyparser": "^4.2.1",
-    "lint-staged": "^8.1.4",
+    "lint-staged": "^8.1.5",
     "prettier": "^1.16.4",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
-    "react-test-renderer": "^16.8.3",
-    "size-limit": "^0.21.1",
-    "tap": "^12.5.3"
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-test-renderer": "^16.8.6",
+    "size-limit": "^0.22.0",
+    "tap": "^12.6.1"
   },
@@ -98,48 +98,6 @@ "scripts": {
     "test:prettier": "prettier '**/*.{json,yml,md}' -l",
+    "test:tap": "tap test/*.{mjs,js}",
     "test:size": "size-limit",
-    "test:tap": "tap test/*.{mjs,js}",
     "prepublishOnly": "npm test"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{mjs,js}": "eslint",
-    "*.{json,yml,md}": "prettier -l"
-  },
-  "eslintIgnore": [
-    "!.*",
-    "node_modules",
-    "/universal",
-    "/server",
-    "/test",
-    "tap-snapshots"
-  ],
-  "eslintConfig": {
-    "extends": [
-      "env"
-    ]
-  },
-  "prettier": {
-    "proseWrap": "never",
-    "singleQuote": true,
-    "semi": false
-  },
-  "size-limit": [
-    {
-      "name": "Server",
-      "path": "size-limit-entries/server.mjs",
-      "limit": "2.5 KB"
-    },
-    {
-      "name": "Browser",
-      "path": "size-limit-entries/browser.mjs",
-      "limit": "2.5 KB",
-      "ignore": [
-        "object-assign"
-      ]
-    }
-  ]
+  }
 }

readme.md

@@ -43,2 +43,4 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)
 
+In addition, [fragment matcher](https://www.apollographql.com/docs/react/advanced/fragments#fragment-matcher) config impacts bundle size relative to the number and complexity of schema unions and interfaces; see [**_Cache strategy_**](#cache-strategy).
+
 ### Native ESM
@@ -106,2 +108,4 @@
 
+Apollo Client must be configured with schema knowledge extracted at build time for a [“fragment matcher”](https://apollographql.com/docs/react/advanced/fragments#fragment-matcher) to cache fragments on unions and interfaces properly. It’s challenging to reconfigure and redeploy clients whenever the GraphQL schema updates. Also, the config increases the client bundle size; see [**_Bundle impact_**](#bundle-impact).
+
 ### Stale cache
@@ -108,0 +112,0 @@

universal/useGraphQL.js

@@ -66,66 +66,68 @@ 'use strict'
 
-  var operate = function operate() {
-    return graphql.operate({
-      operation: operation,
-      fetchOptionsOverride: fetchOptionsOverride,
-      reloadOnLoad: reloadOnLoad,
-      resetOnLoad: resetOnLoad
-    })
-  }
+  var load = _react.default.useCallback(
+    function() {
+      var _graphql$operate = graphql.operate({
+          operation: operation,
+          fetchOptionsOverride: fetchOptionsOverride,
+          reloadOnLoad: reloadOnLoad,
+          resetOnLoad: resetOnLoad
+        }),
+        cacheKey = _graphql$operate.cacheKey,
+        cacheValue = _graphql$operate.cacheValue,
+        cacheValuePromise = _graphql$operate.cacheValuePromise
 
-  function load() {
-    var _operate = operate(),
-      cacheKey = _operate.cacheKey,
-      cacheValue = _operate.cacheValue,
-      cacheValuePromise = _operate.cacheValuePromise
+      setLoading(true)
+      setCacheKey(cacheKey)
+      setCacheValue(cacheValue)
+      return cacheValuePromise
+    },
+    [fetchOptionsOverride, graphql, operation, reloadOnLoad, resetOnLoad]
+  )
 
-    setLoading(true)
-    setCacheKey(cacheKey)
-    setCacheValue(cacheValue)
-    return cacheValuePromise
-  }
+  _react.default.useEffect(
+    function() {
+      var mounted = true
 
-  _react.default.useEffect(function() {
-    var mounted = true
+      function onFetch(_ref2) {
+        var fetchingCacheKey = _ref2.cacheKey
+        if (cacheKey === fetchingCacheKey && mounted) setLoading(true)
+      }
 
-    function onFetch(_ref2) {
-      var fetchingCacheKey = _ref2.cacheKey
-      if (cacheKey === fetchingCacheKey && mounted) setLoading(true)
-    }
+      function onCache(_ref3) {
+        var cachedCacheKey = _ref3.cacheKey,
+          cacheValue = _ref3.cacheValue
 
-    function onCache(_ref3) {
-      var cachedCacheKey = _ref3.cacheKey,
-        cacheValue = _ref3.cacheValue
+        if (cacheKey === cachedCacheKey && mounted) {
+          setLoading(false)
+          setCacheValue(cacheValue)
+        }
+      }
 
-      if (cacheKey === cachedCacheKey && mounted) {
-        setLoading(false)
-        setCacheValue(cacheValue)
+      function onReload(_ref4) {
+        var exceptCacheKey = _ref4.exceptCacheKey
+        if (cacheKey !== exceptCacheKey && loadOnReload && mounted) load()
       }
-    }
 
-    function onReload(_ref4) {
-      var exceptCacheKey = _ref4.exceptCacheKey
-      if (cacheKey !== exceptCacheKey && loadOnReload && mounted) load()
-    }
+      function onReset(_ref5) {
+        var exceptCacheKey = _ref5.exceptCacheKey
+        if (cacheKey !== exceptCacheKey && mounted)
+          if (loadOnReset) load()
+          else setCacheValue(graphql.cache[cacheKey])
+      }
 
-    function onReset(_ref5) {
-      var exceptCacheKey = _ref5.exceptCacheKey
-      if (cacheKey !== exceptCacheKey && mounted)
-        if (loadOnReset) load()
-        else setCacheValue(graphql.cache[cacheKey])
-    }
+      graphql.on('fetch', onFetch)
+      graphql.on('cache', onCache)
+      graphql.on('reload', onReload)
+      graphql.on('reset', onReset)
+      return function() {
+        mounted = false
+        graphql.off('fetch', onFetch)
+        graphql.off('cache', onCache)
+        graphql.off('reload', onReload)
+        graphql.off('reset', onReset)
+      }
+    },
+    [cacheKey, graphql, load, loadOnReload, loadOnReset]
+  )
 
-    graphql.on('fetch', onFetch)
-    graphql.on('cache', onCache)
-    graphql.on('reload', onReload)
-    graphql.on('reset', onReset)
-    return function() {
-      mounted = false
-      graphql.off('fetch', onFetch)
-      graphql.off('cache', onCache)
-      graphql.off('reload', onReload)
-      graphql.off('reset', onReset)
-    }
-  })
-
   var _React$useState4 = _react.default.useState(),
@@ -135,10 +137,19 @@ loadedOnMountCacheKey = _React$useState4[0],
 
-  _react.default.useEffect(function() {
-    if (loadOnMount && cacheKey !== loadedOnMountCacheKey) {
-      setLoadedOnMountCacheKey(cacheKey)
-      load()
-    }
-  })
+  _react.default.useEffect(
+    function() {
+      if (loadOnMount && cacheKey !== loadedOnMountCacheKey) {
+        setLoadedOnMountCacheKey(cacheKey)
+        load()
+      }
+    },
+    [cacheKey, load, loadOnMount, loadedOnMountCacheKey]
+  )
 
-  if (graphql.ssr && loadOnMount && !cacheValue) operate()
+  if (graphql.ssr && loadOnMount && !cacheValue)
+    graphql.operate({
+      operation: operation,
+      fetchOptionsOverride: fetchOptionsOverride,
+      reloadOnLoad: reloadOnLoad,
+      resetOnLoad: resetOnLoad
+    })
   return {
@@ -145,0 +156,0 @@ load: load,

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

86934

increased by1.78%

Lines of code

787

increased by3.15%

Number of lines in readme file

711

increased by0.57%

Dependency changes

• Updated@babel/runtime@^7.4.2