graphql-react - npm Package Compare versions

Comparing version 8.1.3 to 8.2.0

changelog.md

 # graphql-react changelog
 
+## 8.2.0
+
+### Minor
+
+- Added a new `GraphQLProvider` component that prevents unnecessary loading on the client after SSR, fixing [#4](https://github.com/jaydenseric/graphql-react/issues/4). This component should be used instead of using `GraphQLContext.Provider` directly. The old way still works, but with the old behavior.
+
+### Patch
+
+- Updated dev dependencies.
+- Updated the `GraphQLContext.Consumer` example to use React hooks.
+
 ## 8.1.3
@@ -4,0 +15,0 @@

package.json

 {
   "name": "graphql-react",
-  "version": "8.1.3",
+  "version": "8.2.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.",
@@ -47,3 +47,4 @@ "license": "MIT",
     "mitt": "^1.1.3",
-    "object-assign": "^4.1.1"
+    "object-assign": "^4.1.1",
+    "prop-types": "^15.7.2"
   },
@@ -78,3 +79,3 @@ "devDependencies": {
     "lint-staged": "^8.1.5",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.0",
     "react": "^16.8.6",
@@ -81,0 +82,0 @@ "react-dom": "^16.8.6",

readme.md

@@ -24,4 +24,4 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)
 
-| Dependency                                      | Install size                                                                                                                                 | Bundle size                                                                                                                              |
-| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Dependency | Install size | Bundle size |
+| --- | --- | --- |
 | [`graphql-react`](https://npm.im/graphql-react) | [![graphql-react install size](https://badgen.net/packagephobia/install/graphql-react)](https://packagephobia.now.sh/result?p=graphql-react) | [![graphql-react minzipped size](https://badgen.net/bundlephobia/minzip/graphql-react)](https://bundlephobia.com/result?p=graphql-react) |
@@ -35,8 +35,8 @@
 
-| Dependency                                    | Install size                                                                                                                              | Bundle size                                                                                                                           |
-| --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Dependency | Install size | Bundle size |
+| --- | --- | --- |
 | [`apollo-boost`](https://npm.im/apollo-boost) | [![apollo-boost install size](https://badgen.net/packagephobia/install/apollo-boost)](https://packagephobia.now.sh/result?p=apollo-boost) | [![apollo-boost minzipped size](https://badgen.net/bundlephobia/minzip/apollo-boost)](https://bundlephobia.com/result?p=apollo-boost) |
 | [`react-apollo`](https://npm.im/react-apollo) | [![react-apollo install size](https://badgen.net/packagephobia/install/react-apollo)](https://packagephobia.now.sh/result?p=react-apollo) | [![react-apollo minzipped size](https://badgen.net/bundlephobia/minzip/react-apollo)](https://bundlephobia.com/result?p=react-apollo) |
-| [`graphql-tag`](https://npm.im/graphql-tag)   | [![graphql-tag install size](https://badgen.net/packagephobia/install/graphql-tag)](https://packagephobia.now.sh/result?p=graphql-tag)    | [![graphql-tag minzipped size](https://badgen.net/bundlephobia/minzip/graphql-tag)](https://bundlephobia.com/result?p=graphql-tag)    |
-| [`graphql`](https://npm.im/graphql)           | [![graphql install size](https://badgen.net/packagephobia/install/graphql)](https://packagephobia.now.sh/result?p=graphql)                | [![graphql minzipped size](https://badgen.net/bundlephobia/minzip/graphql)](https://bundlephobia.com/result?p=graphql)                |
+| [`graphql-tag`](https://npm.im/graphql-tag) | [![graphql-tag install size](https://badgen.net/packagephobia/install/graphql-tag)](https://packagephobia.now.sh/result?p=graphql-tag) | [![graphql-tag minzipped size](https://badgen.net/bundlephobia/minzip/graphql-tag)](https://bundlephobia.com/result?p=graphql-tag) |
+| [`graphql`](https://npm.im/graphql) | [![graphql install size](https://badgen.net/packagephobia/install/graphql)](https://packagephobia.now.sh/result?p=graphql) | [![graphql minzipped size](https://badgen.net/bundlephobia/minzip/graphql)](https://bundlephobia.com/result?p=graphql) |
 
@@ -179,3 +179,3 @@ [Tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers will eliminate unused [`graphql`](https://npm.im/graphql) exports.
 
-Create a single [`GraphQL`](#class-graphql) instance and use [`GraphQLContext`](#constant-graphqlcontext) to provide it for your app.
+Create a single [`GraphQL`](#class-graphql) instance and use [`GraphQLProvider`](#function-graphqlprovider) to provide it for your app.
 
@@ -222,28 +222,31 @@ For server side rendering see [`ssr()`](#function-ssr).
   - [GraphQL instance property operations](#graphql-instance-property-operations)
+- [function GraphQLProvider](#function-graphqlprovider)
+  - [See](#see-2)
+  - [Examples](#examples-4)
 - [function reportCacheErrors](#function-reportcacheerrors)
-  - [Examples](#examples-4)
+  - [Examples](#examples-5)
 - [function ssr](#function-ssr)
-  - [See](#see-2)
-  - [Examples](#examples-5)
-- [function useGraphQL](#function-usegraphql)
   - [See](#see-3)
   - [Examples](#examples-6)
-- [constant GraphQLContext](#constant-graphqlcontext)
+- [function useGraphQL](#function-usegraphql)
   - [See](#see-4)
   - [Examples](#examples-7)
+- [constant GraphQLContext](#constant-graphqlcontext)
+  - [See](#see-5)
+  - [Examples](#examples-8)
 - [type GraphQLCache](#type-graphqlcache)
-  - [See](#see-5)
+  - [See](#see-6)
 - [type GraphQLCacheKey](#type-graphqlcachekey)
 - [type GraphQLCacheValue](#type-graphqlcachevalue)
 - [type GraphQLFetchOptions](#type-graphqlfetchoptions)
-  - [See](#see-6)
+  - [See](#see-7)
 - [type GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)
-  - [See](#see-7)
-  - [Examples](#examples-8)
+  - [See](#see-8)
+  - [Examples](#examples-9)
 - [type GraphQLOperation](#type-graphqloperation)
-  - [See](#see-8)
+  - [See](#see-9)
 - [type GraphQLOperationLoading](#type-graphqloperationloading)
-  - [See](#see-9)
+  - [See](#see-10)
 - [type GraphQLOperationStatus](#type-graphqloperationstatus)
-  - [See](#see-10)
+  - [See](#see-11)
 - [type HttpError](#type-httperror)
@@ -256,5 +259,5 @@ - [type ReactNode](#type-reactnode)
 
-| Parameter       | Type                                       | Description                                         |
-| :-------------- | :----------------------------------------- | :-------------------------------------------------- |
-| `options`       | Object? = `{}`                             | Options.                                            |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
+| `options` | Object? = `{}` | Options. |
 | `options.cache` | [GraphQLCache](#type-graphqlcache)? = `{}` | Cache to import; usually from a server side render. |
@@ -302,9 +305,9 @@
 
-| Parameter                      | Type                                                              | Description                                                                                                                        |
-| :----------------------------- | :---------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------- |
-| `options`                      | Object                                                            | Options.                                                                                                                           |
-| `options.operation`            | [GraphQLOperation](#type-graphqloperation)                        | GraphQL operation.                                                                                                                 |
-| `options.fetchOptionsOverride` | [GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)? | Overrides default GraphQL operation [`fetch` options](#type-graphqlfetchoptions).                                                  |
-| `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.   |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
+| `options` | Object | Options. |
+| `options.operation` | [GraphQLOperation](#type-graphqloperation) | GraphQL operation. |
+| `options.fetchOptionsOverride` | [GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)? | Overrides default GraphQL operation [`fetch` options](#type-graphqlfetchoptions). |
+| `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. |
 
@@ -317,4 +320,4 @@ **Returns:** [GraphQLOperationLoading](#type-graphqloperationloading) — Loading GraphQL operation details.
 
-| Parameter        | Type                                      | Description                                                                                                          |
-| :--------------- | :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
 | `exceptCacheKey` | [GraphQLCacheKey](#type-graphqlcachekey)? | A [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey) for cache to exempt from reloading. |
@@ -334,4 +337,4 @@
 
-| Parameter        | Type                                      | Description                                                                                                                                                                                     |
-| :--------------- | :---------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
 | `exceptCacheKey` | [GraphQLCacheKey](#type-graphqlcachekey)? | A [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey) for cache to exempt from deletion. Useful for resetting cache after a mutation, preserving the mutation cache. |
@@ -383,2 +386,35 @@
 
+### function GraphQLProvider
+
+A React component that provides a [`GraphQL`](#class-graphql) instance for an app.
+
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
+| `props` | Object | Component props. |
+| `props.graphql` | [GraphQL](#class-graphql) | [`GraphQL`](#class-graphql) instance. |
+| `props.children` | [ReactNode](#type-reactnode)? | React children. |
+
+**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
+
+#### See
+
+- [`GraphQLContext`](#constant-graphqlcontext) is provided via this component.
+- [`useGraphQL`](#function-usegraphql) React hook requires this component to be an ancestor to work.
+
+#### Examples
+
+_Provide a [`GraphQL`](#class-graphql) instance for an app._
+
+> ```jsx
+> import { GraphQL, GraphQLProvider } from 'graphql-react'
+>
+> const graphql = new GraphQL()
+>
+> const App = ({ children }) => (
+>   <GraphQLProvider graphql={graphql}>{children}</GraphQLProvider>
+> )
+> ```
+
+---
+
 ### function reportCacheErrors
@@ -388,6 +424,6 @@
 
-| Parameter         | Type                                     | Description                                                                         |
-| :---------------- | :--------------------------------------- | :---------------------------------------------------------------------------------- |
-| `data`            | Object                                   | [`GraphQL`](#class-graphql) `cache` event data.                                     |
-| `data.cacheKey`   | [GraphQLCacheKey](#type-graphqlcachekey) | [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey).     |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
+| `data` | Object | [`GraphQL`](#class-graphql) `cache` event data. |
+| `data.cacheKey` | [GraphQLCacheKey](#type-graphqlcachekey) | [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey). |
 | `data.cacheValue` | [GraphQLCacheKey](#type-graphqlcachekey) | [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue). |
@@ -414,7 +450,7 @@
 
-| Parameter | Type                                              | Description                                                                                                                                                                                                                                                                                              |
-| :-------- | :------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `graphql` | [GraphQL](#class-graphql)                         | [`GraphQL`](#class-graphql) instance.                                                                                                                                                                                                                                                                    |
-| `node`    | [ReactNode](#type-reactnode)                      | React virtual DOM node.                                                                                                                                                                                                                                                                                  |
-| `render`  | function? = `ReactDOMServer.renderToStaticMarkup` | Synchronous React server side render function, defaulting to [`ReactDOMServer.renderToStaticMarkup`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) as it is more efficient than [`ReactDOMServer.renderToString`](https://reactjs.org/docs/react-dom-server.html#rendertostring). |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
+| `graphql` | [GraphQL](#class-graphql) | [`GraphQL`](#class-graphql) instance. |
+| `node` | [ReactNode](#type-reactnode) | React virtual DOM node. |
+| `render` | function? = `ReactDOMServer.renderToStaticMarkup` | Synchronous React server side render function, defaulting to [`ReactDOMServer.renderToStaticMarkup`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) as it is more efficient than [`ReactDOMServer.renderToString`](https://reactjs.org/docs/react-dom-server.html#rendertostring). |
 
@@ -433,3 +469,3 @@ **Returns:** Promise&lt;string> — Promise resolving the rendered HTML string.
 > ```jsx
-> import { GraphQL, GraphQLContext } from 'graphql-react'
+> import { GraphQL, GraphQLProvider } from 'graphql-react'
 > import { ssr } from 'graphql-react/server'
@@ -442,5 +478,5 @@ > import ReactDOMServer from 'react-dom/server'
 >   const page = (
->     <GraphQLContext.Provider value={graphql}>
+>     <GraphQLProvider graphql={graphql}>
 >       <App />
->     </GraphQLContext.Provider>
+>     </GraphQLProvider>
 >   )
@@ -456,3 +492,3 @@ >   const html = await ssr(graphql, page, ReactDOMServer.renderToString)
 > ```jsx
-> import { GraphQL, GraphQLContext } from 'graphql-react'
+> import { GraphQL, GraphQLProvider } from 'graphql-react'
 > import { ssr } from 'graphql-react/server'
@@ -464,5 +500,5 @@ > import { App } from './components'
 >   const page = (
->     <GraphQLContext.Provider value={graphql}>
+>     <GraphQLProvider graphql={graphql}>
 >       <App />
->     </GraphQLContext.Provider>
+>     </GraphQLProvider>
 >   )
@@ -479,12 +515,12 @@ >   return ssr(graphql, page)
 
-| 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.                                                                                                                                                                      |
+| 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. |
 
@@ -495,3 +531,3 @@ **Returns:** [GraphQLOperationStatus](#type-graphqloperationstatus) — GraphQL operation status.
 
-- [`GraphQLContext`](#constant-graphqlcontext) `Provider`; required for [`useGraphQL`](#function-usegraphql) to work.
+- [`GraphQLContext`](#constant-graphqlcontext) is required for this hook to work.
 
@@ -533,37 +569,24 @@ #### Examples
 
-| Property   | Type     | Description                                                                                                                                                                  |
-| :--------- | :------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Provider` | function | [React context provider component](https://reactjs.org/docs/context#contextprovider). Enables use of the [`useGraphQL`](#function-usegraphql) hook in descendant components. |
-| `Consumer` | function | [React context consumer component](https://reactjs.org/docs/context#contextconsumer).                                                                                        |
+| Property | Type | Description |
+| :-- | :-- | :-- |
+| `Provider` | function | [React context provider component](https://reactjs.org/docs/context#contextprovider). |
+| `Consumer` | function | [React context consumer component](https://reactjs.org/docs/context#contextconsumer). |
 
 #### See
 
-- [`useGraphQL`](#function-usegraphql) React hook requires a [`GraphQLContext`](#constant-graphqlcontext) `Provider` to work.
+- [`GraphQLProvider`](#function-graphqlprovider) is used to provide this context.
+- [`useGraphQL`](#function-usegraphql) React hook requires an ancestor [`GraphQLContext`](#constant-graphqlcontext) `Provider` to work.
 
 #### Examples
 
-_Provide a [`GraphQL`](#class-graphql) instance for an app._
-
-> ```jsx
-> import { GraphQL, GraphQLContext } from 'graphql-react'
->
-> const graphql = new GraphQL()
->
-> const App = ({ children }) => (
->   <GraphQLContext.Provider value={graphql}>
->     {children}
->   </GraphQLContext.Provider>
-> )
-> ```
-
 _A button component that resets the [GraphQL cache](#graphql-instance-property-cache)._
 
 > ```jsx
+> import React from 'react'
 > import { GraphQLContext } from 'graphql-react'
 >
-> const ResetCacheButton = () => (
->   <GraphQLContext.Consumer>
->     {graphql => <button onClick={graphql.reset}>Reset cache</button>}
->   </GraphQLContext.Consumer>
-> )
+> const ResetCacheButton = () => {
+>   const graphql = React.useContext(GraphQLContext)
+>   return <button onClick={graphql.reset}>Reset cache</button>
+> }
 > ```
@@ -600,9 +623,9 @@
 
-| Property        | Type                          | Description                  |
-| :-------------- | :---------------------------- | :--------------------------- |
-| `fetchError`    | string?                       | `fetch` error message.       |
-| `httpError`     | [HttpError](#type-httperror)? | `fetch` response HTTP error. |
-| `parseError`    | string?                       | Parse error message.         |
-| `graphQLErrors` | Array&lt;Object>?             | GraphQL response errors.     |
-| `data`          | Object?                       | GraphQL response data.       |
+| Property | Type | Description |
+| :-- | :-- | :-- |
+| `fetchError` | string? | `fetch` error message. |
+| `httpError` | [HttpError](#type-httperror)? | `fetch` response HTTP error. |
+| `parseError` | string? | Parse error message. |
+| `graphQLErrors` | Array&lt;Object>? | GraphQL response errors. |
+| `data` | Object? | GraphQL response data. |
 
@@ -636,4 +659,4 @@ ---
 
-| Parameter | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                |
-| :-------- | :----------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Parameter | Type | Description |
+| :-- | :-- | :-- |
 | `options` | [GraphQLFetchOptions](#type-graphqlfetchoptions) | [GraphQL `fetch` options](#type-graphqlfetchoptions) tailored to the [GraphQL operation](#type-graphqloperation), e.g. if there are files to upload `options.body` will be a [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) instance conforming to the [GraphQL multipart request spec](https://github.com/jaydenseric/graphql-multipart-request-spec). |
@@ -683,7 +706,7 @@
 
-| Property            | Type                                                     | Description                                                                                         |
-| :------------------ | :------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- |
-| `cacheKey`          | [GraphQLCacheKey](#type-graphqlcachekey)                 | [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey).                     |
-| `cacheValue`        | [GraphQLCacheValue](#type-graphqlcachevalue)?            | [GraphQL cache](#type-graphqlcache) [value](#type-graphqlcachevalue) from the last identical query. |
-| `cacheValuePromise` | Promise&lt;[GraphQLCacheValue](#type-graphqlcachevalue)> | Resolves the loaded [GraphQL cache](#type-graphqlcache) [value](#type-graphqlcachevalue).           |
+| Property | Type | Description |
+| :-- | :-- | :-- |
+| `cacheKey` | [GraphQLCacheKey](#type-graphqlcachekey) | [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey). |
+| `cacheValue` | [GraphQLCacheValue](#type-graphqlcachevalue)? | [GraphQL cache](#type-graphqlcache) [value](#type-graphqlcachevalue) from the last identical query. |
+| `cacheValuePromise` | Promise&lt;[GraphQLCacheValue](#type-graphqlcachevalue)> | Resolves the loaded [GraphQL cache](#type-graphqlcache) [value](#type-graphqlcachevalue). |
 
@@ -702,8 +725,8 @@ #### See
 
-| Property     | Type                                         | Description                                                                                            |
-| :----------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------- |
-| `load`       | function                                     | Loads the GraphQL operation on demand, updating the [GraphQL cache](#graphql-instance-property-cache). |
-| `loading`    | boolean                                      | Is the GraphQL operation loading.                                                                      |
-| `cacheKey`   | [GraphQLCacheKey](#type-graphqlcachekey)     | [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey).                        |
-| `cacheValue` | [GraphQLCacheValue](#type-graphqlcachevalue) | [GraphQL cache](#type-graphqlcache) [value](#type-graphqlcachevalue).                                  |
+| Property | Type | Description |
+| :-- | :-- | :-- |
+| `load` | function | Loads the GraphQL operation on demand, updating the [GraphQL cache](#graphql-instance-property-cache). |
+| `loading` | boolean | Is the GraphQL operation loading. |
+| `cacheKey` | [GraphQLCacheKey](#type-graphqlcachekey) | [GraphQL cache](#graphql-instance-property-cache) [key](#type-graphqlcachekey). |
+| `cacheValue` | [GraphQLCacheValue](#type-graphqlcachevalue) | [GraphQL cache](#type-graphqlcache) [value](#type-graphqlcachevalue). |
 
@@ -710,0 +733,0 @@ #### See

universal/index.js

 'use strict'
 
 exports.__esModule = true
-exports.reportCacheErrors = exports.useGraphQL = exports.GraphQLContext = exports.GraphQL = void 0
+exports.reportCacheErrors = exports.useGraphQL = exports.GraphQLProvider = exports.GraphQLContext = exports.GraphQL = void 0
 
@@ -14,2 +14,6 @@ var _GraphQL = require('./GraphQL')
 
+var _GraphQLProvider = require('./GraphQLProvider')
+
+exports.GraphQLProvider = _GraphQLProvider.GraphQLProvider
+
 var _useGraphQL = require('./useGraphQL')
@@ -16,0 +20,0 @@

universal/useGraphQL.js

@@ -10,2 +10,4 @@ 'use strict'
 
+var _FirstRenderDateContext = require('./FirstRenderDateContext')
+
 var _GraphQL = require('./GraphQL')
@@ -141,5 +143,13 @@
 
+  var firstRenderDate = _react.default.useContext(
+    _FirstRenderDateContext.FirstRenderDateContext
+  )
+
   _react.default.useEffect(
     function() {
-      if (loadOnMount && cacheKey !== loadedOnMountCacheKey) {
+      if (
+        loadOnMount &&
+        cacheKey !== loadedOnMountCacheKey &&
+        !(cacheValue && new Date() - firstRenderDate < 500)
+      ) {
         setLoadedOnMountCacheKey(cacheKey)
@@ -149,3 +159,10 @@ load()
     },
-    [cacheKey, load, loadOnMount, loadedOnMountCacheKey]
+    [
+      cacheKey,
+      cacheValue,
+      firstRenderDate,
+      load,
+      loadOnMount,
+      loadedOnMountCacheKey
+    ]
   )
@@ -152,0 +169,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

Number of package files

25

increased by19.05%

Lines of code

894

increased by12.74%

Number of lines in readme file

735

increased by3.23%

Worsened metrics

Total package byte prevSize

83684

decreased by-5.04%

Dependency count

8

increased by14.29%

Dependency changes

• + Addedprop-types@^15.7.2