graphql-react - npm Package Compare versions

Comparing version 8.0.2 to 8.1.0

changelog.md

 # graphql-react changelog
 
+## 8.1.0
+
+### Minor
+
+- Added the `GraphQL` instance method `reload` which fires a `reload` event signaling that GraphQL cache subscribers such as the `useGraphQL` React hook should reload their GraphQL operation, fixing [#26](https://github.com/jaydenseric/graphql-react/issues/26).
+- Added the `useGraphQL` React hook `reloadOnLoad` option.
+
+### Patch
+
+- Updated dependencies.
+- More reliable `useGraphQL` React hook `loadOnMount` option implementation that fixes ESLint `react-hooks/exhaustive-deps` rule errors.
+- Use `function` instead of `const` declarations in places to simplify transpiled output.
+- `GraphQL.reset()` test name typo fix.
+- Added tests for the `useGraphQL` React hook `reloadOnLoad` and `resetOnLoad` options.
+- Increased the browser bundle size limit to 2.5 KB as the new features grew the bundle size from ~1.95 KB to ~2.13 KB.
+- Improved `GraphQL` instance event documentation.
+
 ## 8.0.2
@@ -4,0 +21,0 @@

package.json

 {
   "name": "graphql-react",
-  "version": "8.0.2",
+  "version": "8.1.0",
   "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.1",
+    "@babel/runtime": "^7.3.4",
     "extract-files": "^5.0.1",
@@ -52,7 +52,7 @@ "fnv1a": "^1.0.1",
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.3",
-    "@babel/plugin-proposal-class-properties": "^7.3.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
+    "@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/preset-react": "^7.0.0",
@@ -63,3 +63,3 @@ "babel-eslint": "^10.0.1",
     "eslint": "^5.14.1",
-    "eslint-config-env": "^3.0.0",
+    "eslint-config-env": "^4.0.0",
     "eslint-config-prettier": "^4.0.0",
@@ -71,4 +71,4 @@ "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.2.0",
-    "formdata-node": "^1.4.1",
+    "eslint-plugin-react-hooks": "^1.3.0",
+    "formdata-node": "^1.5.1",
     "graphql": "^14.1.1",
@@ -138,3 +138,3 @@ "graphql-api-koa": "^2.0.0",
       "path": "size-limit-entries/browser.mjs",
-      "limit": "2 KB",
+      "limit": "2.5 KB",
       "ignore": [
@@ -141,0 +141,0 @@ "object-assign"

readme.md

@@ -22,3 +22,3 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)
 
-A < 2 KB bundle impact is guaranteed by [`size-limit`](https://npm.im/size-limit) tests. The impact is smaller than the bundle size badge suggests as the internal [`object-assign`](https://npm.im/object-assign) dependency is shared with [`react`](https://npm.im/react).
+A < 2.5 KB bundle impact is guaranteed by [`size-limit`](https://npm.im/size-limit) tests. The impact is smaller than the bundle size badge suggests as the internal [`object-assign`](https://npm.im/object-assign) dependency is shared with [`react`](https://npm.im/react).
 
@@ -209,18 +209,20 @@ | Dependency                                      | Install size                                                                                                                                 | Bundle size                                                                                                                              |
   - [GraphQL instance method operate](#graphql-instance-method-operate)
+  - [GraphQL instance method reload](#graphql-instance-method-reload)
+    - [Examples](#examples-1)
   - [GraphQL instance method reset](#graphql-instance-method-reset)
-    - [Examples](#examples-1)
+    - [Examples](#examples-2)
   - [GraphQL instance property cache](#graphql-instance-property-cache)
-    - [Examples](#examples-2)
+    - [Examples](#examples-3)
   - [GraphQL instance property operations](#graphql-instance-property-operations)
 - [function reportCacheErrors](#function-reportcacheerrors)
-  - [Examples](#examples-3)
+  - [Examples](#examples-4)
 - [function ssr](#function-ssr)
   - [See](#see-2)
-  - [Examples](#examples-4)
+  - [Examples](#examples-5)
 - [function useGraphQL](#function-usegraphql)
   - [See](#see-3)
-  - [Examples](#examples-5)
+  - [Examples](#examples-6)
 - [constant GraphQLContext](#constant-graphqlcontext)
   - [See](#see-4)
-  - [Examples](#examples-6)
+  - [Examples](#examples-7)
 - [type GraphQLCache](#type-graphqlcache)
@@ -234,3 +236,3 @@ - [See](#see-5)
   - [See](#see-7)
-  - [Examples](#examples-7)
+  - [Examples](#examples-8)
 - [type GraphQLOperation](#type-graphqloperation)
@@ -292,3 +294,3 @@ - [See](#see-8)
 
-Loads or reuses an already loading GraphQL operation.
+Loads or reuses an already loading GraphQL operation in [GraphQL operations](#graphql-instance-property-operations). Emits a [`GraphQL`](#class-graphql) instance `fetch` event if an already loading operation isn’t reused, and a `cache` event once it’s loaded into the [GraphQL cache](#graphql-instance-property-cache).
 
@@ -304,5 +306,21 @@ | Parameter                      | Type                                                              | Description                                                                                  |
 
+#### GraphQL instance method reload
+
+Signals that [GraphQL cache](#graphql-instance-property-cache) subscribers such as the [`useGraphQL`](#function-usegraphql) React hook should reload their GraphQL operation. Emits a [`GraphQL`](#class-graphql) instance `reload` event.
+
+| Parameter        | Type                                      | Description                                                                                                          |
+| :--------------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |
+| `exceptCacheKey` | [GraphQLCacheKey](#type-graphqlcachekey)? | A [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey) for cache to exempt from reloading. |
+
+##### Examples
+
+_Reloading the [GraphQL cache](#graphql-instance-property-cache)._
+
+> ```js
+> graphql.reload()
+> ```
+
 #### GraphQL instance method reset
 
-Resets the [GraphQL cache](#graphql-instance-property-cache). Useful when a user logs out.
+Resets the [GraphQL cache](#graphql-instance-property-cache), useful when a user logs out. Emits a [`GraphQL`](#class-graphql) instance `reset` event.
 
@@ -446,10 +464,12 @@ | Parameter        | Type                                      | Description                                                                                                                                                                                     |
 
-| Parameter                      | Type                                                              | Description                                                                                                                     |
-| :----------------------------- | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ |
-| `options`                      | Object                                                            | Options.                                                                                                                        |
-| `options.fetchOptionsOverride` | [GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)? | Overrides default [`fetch` options](#type-graphqlfetchoptions) for the GraphQL operation.                                       |
-| `options.loadOnMount`          | boolean? = `true`                                                 | Should the operation load when the component mounts.                                                                            |
-| `options.loadOnReset`          | boolean? = `true`                                                 | Should the operation load when its [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) is reset. |
-| `options.resetOnLoad`          | boolean? = `false`                                                | Should all other [GraphQL cache](#graphql-instance-property-cache) reset when the operation loads.                              |
-| `options.operation`            | [GraphQLOperation](#type-graphqloperation)                        | GraphQL operation.                                                                                                              |
+| Parameter                      | Type                                                              | Description                                                                                                                                                                             |
+| :----------------------------- | :---------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `options`                      | Object                                                            | Options.                                                                                                                                                                                |
+| `options.fetchOptionsOverride` | [GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)? | Overrides default [`fetch` options](#type-graphqlfetchoptions) for the GraphQL operation.                                                                                               |
+| `options.loadOnMount`          | boolean? = `true`                                                 | Should the operation load when the component mounts.                                                                                                                                    |
+| `options.loadOnReload`         | boolean? = `true`                                                 | Should the operation load when the [`GraphQL`](#class-graphql) `reload` event fires, if the operation was not the one that caused the reload.                                           |
+| `options.loadOnReset`          | boolean? = `true`                                                 | Should the operation load when its [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) is reset, if the operation was not the one that caused the reset. |
+| `options.reloadOnLoad`         | boolean? = `false`                                                | Should a [GraphQL reload](#graphql-instance-method-reload) happen after the operation loads, excluding the loaded operation cache.                                                      |
+| `options.resetOnLoad`          | boolean? = `false`                                                | Should a [GraphQL reset](#graphql-instance-method-reset) happen after the operation loads, excluding the loaded operation cache.                                                        |
+| `options.operation`            | [GraphQLOperation](#type-graphqloperation)                        | GraphQL operation.                                                                                                                                                                      |
 
@@ -456,0 +476,0 @@ **Returns:** [GraphQLOperationStatus](#type-graphqloperationstatus) — GraphQL operation status.

universal/GraphQL.js

@@ -25,2 +25,8 @@ 'use strict'
 
+  this.reload = function(exceptCacheKey) {
+    _this.emit('reload', {
+      exceptCacheKey: exceptCacheKey
+    })
+  }
+
   this.reset = function(exceptCacheKey) {
@@ -104,3 +110,8 @@ var cacheKeys = Object.keys(_this.cache)
       fetchOptionsOverride = _ref6.fetchOptionsOverride,
+      reloadOnLoad = _ref6.reloadOnLoad,
       resetOnLoad = _ref6.resetOnLoad
+    if (reloadOnLoad && resetOnLoad)
+      throw new Error(
+        'operate() options “reloadOnLoad” and “resetOnLoad” can’t both be true.'
+      )
     var fetchOptions = (0, _graphqlFetchOptions.graphqlFetchOptions)(operation)
@@ -113,6 +124,6 @@ if (fetchOptionsOverride) fetchOptionsOverride(fetchOptions)
 
-    if (resetOnLoad)
-      cacheValuePromise.then(function() {
-        return _this.reset(cacheKey)
-      })
+    cacheValuePromise.then(function() {
+      if (reloadOnLoad) _this.reload(cacheKey)
+      else if (resetOnLoad) _this.reset(cacheKey)
+    })
     return {
@@ -119,0 +130,0 @@ cacheKey: cacheKey,

universal/reportCacheErrors.js

 'use strict'
 
 exports.__esModule = true
-exports.reportCacheErrors = void 0
+exports.reportCacheErrors = reportCacheErrors
 
-var reportCacheErrors = function reportCacheErrors(_ref) {
+function reportCacheErrors(_ref) {
   var cacheKey = _ref.cacheKey,
@@ -50,3 +50,1 @@ _ref$cacheValue = _ref.cacheValue,
 }
-
-exports.reportCacheErrors = reportCacheErrors

universal/useGraphQL.js

@@ -22,4 +22,8 @@ 'use strict'
     loadOnMount = _ref$loadOnMount === void 0 ? true : _ref$loadOnMount,
+    _ref$loadOnReload = _ref.loadOnReload,
+    loadOnReload = _ref$loadOnReload === void 0 ? true : _ref$loadOnReload,
     _ref$loadOnReset = _ref.loadOnReset,
     loadOnReset = _ref$loadOnReset === void 0 ? true : _ref$loadOnReset,
+    _ref$reloadOnLoad = _ref.reloadOnLoad,
+    reloadOnLoad = _ref$reloadOnLoad === void 0 ? false : _ref$reloadOnLoad,
     _ref$resetOnLoad = _ref.resetOnLoad,
@@ -35,2 +39,6 @@ resetOnLoad = _ref$resetOnLoad === void 0 ? false : _ref$resetOnLoad,
     throw new Error('GraphQL context must be a GraphQL instance.')
+  if (reloadOnLoad && resetOnLoad)
+    throw new Error(
+      'useGraphQL() options “reloadOnLoad” and “resetOnLoad” can’t both be true.'
+    )
   var fetchOptions = (0, _graphqlFetchOptions.graphqlFetchOptions)(operation)
@@ -49,3 +57,3 @@ if (fetchOptionsOverride) fetchOptionsOverride(fetchOptions)
   var _React$useState3 = _react.default.useState(
-      cacheKey in graphql.operations || loadOnMount
+      cacheKey in graphql.operations
     ),
@@ -58,3 +66,3 @@ loading = _React$useState3[0],
     setCacheValue((cacheValue = graphql.cache[cacheKey]))
-    setLoading((loading = cacheKey in graphql.operations || loadOnMount))
+    setLoading((loading = cacheKey in graphql.operations))
   }
@@ -66,2 +74,3 @@
       fetchOptionsOverride: fetchOptionsOverride,
+      reloadOnLoad: reloadOnLoad,
       resetOnLoad: resetOnLoad
@@ -71,3 +80,3 @@ })
 
-  var load = function load() {
+  function load() {
     var _operate = operate(),
@@ -84,3 +93,3 @@ cacheKey = _operate.cacheKey,
 
-  var onFetch = function onFetch(_ref2) {
+  function onFetch(_ref2) {
     var fetchingCacheKey = _ref2.cacheKey
@@ -90,3 +99,3 @@ if (cacheKey === fetchingCacheKey) setLoading(true)
 
-  var onCache = function onCache(_ref3) {
+  function onCache(_ref3) {
     var cachedCacheKey = _ref3.cacheKey,
@@ -101,4 +110,9 @@ cacheValue = _ref3.cacheValue
 
-  var onReset = function onReset(_ref4) {
+  function onReload(_ref4) {
     var exceptCacheKey = _ref4.exceptCacheKey
+    if (cacheKey !== exceptCacheKey && loadOnReload) load()
+  }
+
+  function onReset(_ref5) {
+    var exceptCacheKey = _ref5.exceptCacheKey
     if (cacheKey !== exceptCacheKey)
@@ -113,13 +127,28 @@ if (loadOnReset) load()
       graphql.on('cache', onCache)
+      graphql.on('reload', onReload)
       graphql.on('reset', onReset)
-      if (loadOnMount) load()
       return function() {
         graphql.off('fetch', onFetch)
         graphql.off('cache', onCache)
+        graphql.off('reload', onReload)
         graphql.off('reset', onReset)
       }
     },
-    [cacheKey]
+    [graphql, onFetch, onCache, onReload, onReset]
   )
 
+  var _React$useState4 = _react.default.useState(),
+    loadedOnMountCacheKey = _React$useState4[0],
+    setLoadedOnMountCacheKey = _React$useState4[1]
+
+  _react.default.useEffect(
+    function() {
+      if (loadOnMount && cacheKey !== loadedOnMountCacheKey) {
+        setLoadedOnMountCacheKey(cacheKey)
+        load()
+      }
+    },
+    [loadOnMount, cacheKey, loadedOnMountCacheKey, load]
+  )
+
   if (graphql.ssr && loadOnMount && !cacheValue) operate()
@@ -126,0 +155,0 @@ return {

No alert changes

Improved metrics

Total package byte prevSize

85116

7.35%

Lines of code

771

9.83%

Number of lines in readme file

707

2.91%

Dependency changes

• Updated

  @babel/runtime@^7.3.4