graphql-react - npm Package Compare versions

Comparing version 6.0.1 to 7.0.0

changelog.md

 # graphql-react changelog
 
+## 7.0.0
+
+### Major
+
+- Removed the `preload` function. It was not going to work with React hooks.
+- Added the [`react-dom`](https://npm.im/react-dom) peer dependency.
+- Reorganized file structure. This is only a breaking change for consumers that were not importing the documented way (via the `main` package entry).
+
+### Minor
+
+- Added a `ssr` function, which is for server use only and is React hooks ready. It is simpler and more future-proof than the removed `preload` function as it leverages [`ReactDOMServer`](https://reactjs.org/docs/react-dom-server) for rendering.
+- `GraphQL` now emits a `cache` promise in the `fetch` event payload. These events are undocumented, so this could be considered an internal change.
+
+### Patch
+
+- Updated dependencies.
+- Handle exceptions outside tests (see [tapjs/node-tap#463 (comment)](https://github.com/tapjs/node-tap/issues/463#issuecomment-456701261)).
+- Added a `ReactNode` JSDoc type, replacing `ReactElement` types.
+- Removed tests made redundant by the removal of the `preload` function.
+- Document [the official Next.js example](https://github.com/zeit/next.js/tree/canary/examples/with-graphql-react).
+- Improved documentation.
+
 ## 6.0.1
@@ -110,3 +132,3 @@
 - Updated package scripts and config for the new [`husky`](https://npm.im/husky) version.
-- Removed the package `module` field. Webpack by default resolves extensionless paths the same way Node.js in `--experimental-modules` mode does; `.mjs` files are preferred. Tools misconfigured or unable to resolve `.mjs` can get confused when `module` points to an `.mjs` ESM file and they attempt to resolve named imports from `.js` CJS files.
+- Removed the package `module` field. By default webpack resolves extensionless paths the same way Node.js in `--experimental-modules` mode does; `.mjs` files are preferred. Tools misconfigured or unable to resolve `.mjs` can get confused when `module` points to an `.mjs` ESM file and they attempt to resolve named imports from `.js` CJS files.
 - Renamed the `Operation` type `GraphQLOperation`.
@@ -113,0 +135,0 @@ - Use [jsDelivr](https://jsdelivr.com) for the readme logo instead of [RawGit](https://rawgit.com) as they are shutting down.

lib/index.js

 'use strict'
 
 exports.__esModule = true
-exports.preload = exports.Query = exports.Consumer = exports.Provider = exports.GraphQL = void 0
+exports.Query = exports.Consumer = exports.Provider = exports.GraphQL = void 0
 
-var _graphql = require('./graphql')
+var _GraphQL = require('./GraphQL')
 
-exports.GraphQL = _graphql.GraphQL
+exports.GraphQL = _GraphQL.GraphQL
 
-var _components = require('./components')
+var _GraphQLContext = require('./GraphQLContext')
 
-exports.Provider = _components.Provider
-exports.Consumer = _components.Consumer
-exports.Query = _components.Query
+exports.Provider = _GraphQLContext.Provider
+exports.Consumer = _GraphQLContext.Consumer
 
-var _preload = require('./preload')
+var _Query = require('./Query')
 
-exports.preload = _preload.preload
+exports.Query = _Query.Query

package.json

 {
   "name": "graphql-react",
-  "version": "6.0.1",
+  "version": "7.0.0",
   "description": "A lightweight GraphQL client for React.",
@@ -37,7 +37,8 @@ "license": "MIT",
   "peerDependencies": {
-    "react": "^16.6.0"
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.2.0",
-    "extract-files": "^5.0.0",
+    "@babel/runtime": "^7.3.1",
+    "extract-files": "^5.0.1",
     "fast-deep-equal": "^2.0.1",
@@ -52,6 +53,6 @@ "fnv1a": "^1.0.1",
     "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
     "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
@@ -62,22 +63,22 @@ "babel-eslint": "^10.0.1",
     "cross-fetch": "^3.0.0",
-    "eslint": "^5.12.0",
+    "eslint": "^5.12.1",
     "eslint-config-env": "^2.0.0",
-    "eslint-config-prettier": "^3.4.0",
-    "eslint-plugin-import": "^2.14.0",
+    "eslint-config-prettier": "^4.0.0",
+    "eslint-plugin-import": "^2.15.0",
     "eslint-plugin-import-order-alphabetical": "^0.0.1",
     "eslint-plugin-node": "^8.0.1",
     "eslint-plugin-prettier": "^3.0.1",
-    "eslint-plugin-react": "^7.12.3",
-    "graphql": "^14.0.2",
+    "eslint-plugin-react": "^7.12.4",
+    "graphql": "^14.1.1",
     "graphql-api-koa": "^2.0.0",
     "husky": "^1.3.1",
     "jsdoc-md": "^1.7.0",
-    "koa": "^2.6.2",
+    "koa": "^2.7.0",
     "koa-bodyparser": "^4.2.1",
-    "lint-staged": "^8.1.0",
-    "prettier": "^1.15.3",
+    "lint-staged": "^8.1.1",
+    "prettier": "^1.16.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "size-limit": "^0.21.1",
-    "tap": "^12.1.1"
+    "tap": "^12.4.0"
   },
@@ -84,0 +85,0 @@ "scripts": {

readme.md

@@ -11,23 +11,19 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)
 
-- Add 1 dependency to get started with GraphQL in a React project.
-- No Webpack or Babel setup.
-- Simple components, no decorators.
-- Query components fetch on mount and when props change. While loading, cache from the last identical request is available to display.
+- Add 1 dependency to a React project to get started.
+- No [webpack](https://webpack.js.org) or [Babel](https://babeljs.io) setup.
+- Write queries without [`gql`](https://github.com/apollographql/graphql-tag#gql).
+- Use file input values as mutation arguments to upload files; [compatible with a variety of servers](https://github.com/jaydenseric/graphql-multipart-request-spec#server).
 - Automatically fresh cache, even after mutations.
-- Use file input values as mutation arguments to upload files; compatible with [a variety of servers](https://github.com/jaydenseric/graphql-multipart-request-spec#server).
-- [Template literal](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) queries; no need for [`gql`](https://github.com/apollographql/graphql-tag#gql).
-- Query multiple GraphQL APIs.
 
 ### Smart 💡
 
-- Adds only a few KB to a typical min+gzip bundle.
-- [Native ESM in Node.js](https://nodejs.org/api/esm.html) via `.mjs`.
-- [Package `module` entry](https://github.com/rollup/rollup/wiki/pkg.module) for [tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers.
-- Server side rendering for crawlable pages and a better UX.
-- Components use the [React v16.3 context API](https://github.com/facebook/react/pull/11818).
-- **_All_** fetch options overridable per request.
-- GraphQL request fetch options hash based cache:
-  - No data denormalization or need to query `id` fields.
+- < 2.5 KB min+gzip bundle size, guaranteed by [`size-limit`](https://npm.im/size-limit) tests. That’s around 40 KB less than [Apollo](https://www.apollographql.com)!
+- Native ESM via `.mjs` for [Node.js in `--experimental-modules` mode](https://nodejs.org/api/esm.html#esm_enabling) and [tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers like [webpack](https://webpack.js.org).
+- Server side rendering for better UX and SEO.
+- Uses the [React v16.3 context API](https://github.com/facebook/react/pull/11818).
+- All fetch options overridable per request.
+- GraphQL requests are cached under hashes of their `fetch` options:
+  - No data normalization or need to query `id` fields.
   - No tampering with queries or `__typename` insertion.
-  - Errors are cached and can be server side rendered.
+  - Errors cache and can be server side rendered.
   - Query multiple GraphQL APIs without stitching data.
@@ -105,5 +101,6 @@
 
-## Example
+## Examples
 
-See the [example GraphQL API and Next.js web app](https://github.com/jaydenseric/graphql-react-examples), deployed at [graphql-react.now.sh](https://graphql-react.now.sh).
+- [The official Next.js example](https://github.com/zeit/next.js/tree/canary/examples/with-graphql-react).
+- [The Next.js example](https://github.com/jaydenseric/graphql-react-examples) deployed at [graphql-react.now.sh](https://graphql-react.now.sh).
 
@@ -134,7 +131,8 @@ ## Support
   - [Examples](#examples-3)
-- [function preload](#function-preload)
+- [function Provider](#function-provider)
   - [Examples](#examples-4)
-- [function Provider](#function-provider)
+- [function Query](#function-query)
   - [Examples](#examples-5)
-- [function Query](#function-query)
+- [function ssr](#function-ssr)
+  - [See](#see)
   - [Examples](#examples-6)
@@ -151,2 +149,3 @@ - [type ActiveQuery](#type-activequery)
   - [Examples](#examples-9)
+- [type ReactNode](#type-reactnode)
 - [type RequestCache](#type-requestcache)
@@ -227,3 +226,3 @@
 
-**Returns:** ReactElement — React virtual DOM element.
+**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
 
@@ -244,37 +243,2 @@ #### Examples
 
-### function preload
-
-Recursively preloads [`Query`](#function-query) components that have the `loadOnMount` prop in a React element tree. Useful for server side rendering (SSR) or to preload components for a better user experience when they mount.
-
-| Parameter | Type         | Description                  |
-| :-------- | :----------- | :--------------------------- |
-| `element` | ReactElement | A React virtual DOM element. |
-
-**Returns:** [Promise](https://mdn.io/promise)<void> — Resolves once loading is done and cache is ready to be exported from the [`GraphQL`](#class-graphql) instance. Cache can be imported when constructing new [`GraphQL`](#class-graphql) instances.
-
-#### Examples
-
-_An async SSR function that returns a HTML string and cache JSON for client hydration._
-
-> ```jsx
-> import { GraphQL, preload, Provider } from 'graphql-react'
-> import { renderToString } from 'react-dom/server'
-> import { App } from './components'
->
-> const graphql = new GraphQL()
-> const page = (
->   <Provider value={graphql}>
->     <App />
->   </Provider>
-> )
->
-> export async function ssr() {
->   await preload(page)
->   return {
->     cache: JSON.stringify(graphql.cache),
->     html: renderToString(page)
->   }
-> }
-> ```
-
 ### function Provider
@@ -284,8 +248,8 @@
 
-| Parameter  | Type                      | Description                             |
-| :--------- | :------------------------ | :-------------------------------------- |
-| `value`    | [GraphQL](#class-graphql) | A [`GraphQL`](#class-graphql) instance. |
-| `children` | ReactNode                 | A React node.                           |
+| Parameter  | Type                         | Description                             |
+| :--------- | :--------------------------- | :-------------------------------------- |
+| `value`    | [GraphQL](#class-graphql)    | A [`GraphQL`](#class-graphql) instance. |
+| `children` | [ReactNode](#type-reactnode) | A React node.                           |
 
-**Returns:** ReactElement — React virtual DOM element.
+**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
 
@@ -320,3 +284,3 @@ #### Examples
 
-**Returns:** ReactElement — React virtual DOM element.
+**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
 
@@ -415,2 +379,60 @@ #### Examples
 
+### function ssr
+
+Asynchronously server side renders a [React node](#type-reactnode), preloading all [`Query`](#function-query) components that have the `loadOnMount` prop. After resolving, cache can be exported from the [`GraphQL` instance property `cache`](#graphql-instance-property-cache) for serialization (usually as JSON) and transport to the client for hydration via the [`GraphQL` constructor parameter `options.cache`](#class-graphql).
+
+| Parameter | Type                                                                         | Description                                                                                                                                                                                                                                                                                              |
+| :-------- | :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `graphql` | [GraphQL](#class-graphql)                                                    | [`GraphQL`](#class-graphql) instance.                                                                                                                                                                                                                                                                    |
+| `node`    | [ReactNode](#type-reactnode)                                                 | React virtual DOM node.                                                                                                                                                                                                                                                                                  |
+| `render`  | [function](https://mdn.io/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). |
+
+**Returns:** [Promise](https://mdn.io/promise)&lt;[string](https://mdn.io/string)> — Promise resolving the rendered HTML string.
+
+#### See
+
+- [`ReactDOMServer` docs](https://reactjs.org/docs/react-dom-server).
+- [`next-graphql-react`](https://npm.im/next-graphql-react) makes it easy to use this API in a [Next.js](https://nextjs.org) project.
+
+#### Examples
+
+_SSR function that resolves a HTML string and cache JSON for client hydration._
+
+> ```jsx
+> import { GraphQL, Provider } from 'graphql-react'
+> import { ssr } from 'graphql-react/lib/ssr'
+> import ReactDOMServer from 'react-dom/server'
+> import { App } from './components'
+>
+> async function render() {
+>   const graphql = new GraphQL()
+>   const page = (
+>     <Provider value={graphql}>
+>       <App />
+>     </Provider>
+>   )
+>   const html = await ssr(graphql, page, ReactDOMServer.renderToString)
+>   const cache = JSON.stringify(graphql.cache)
+>   return { html, cache }
+> }
+> ```
+
+_SSR function that resolves a HTML string suitable for a static page._
+
+> ```jsx
+> import { GraphQL, Provider } from 'graphql-react'
+> import { ssr } from 'graphql-react/lib/ssr'
+> import { App } from './components'
+>
+> function render() {
+>   const graphql = new GraphQL()
+>   const page = (
+>     <Provider value={graphql}>
+>       <App />
+>     </Provider>
+>   )
+>   return ssr(graphql, page)
+> }
+> ```
+
 ### type ActiveQuery
@@ -438,3 +460,3 @@
 
-**Returns:** ReactElement — React virtual DOM element.
+**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
 
@@ -522,3 +544,3 @@ #### Examples
 
-**Returns:** ReactElement — React virtual DOM element.
+**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
 
@@ -550,2 +572,8 @@ #### Examples
 
+### type ReactNode
+
+React virtual DOM node; anything React can render.
+
+**Type:** undefined | null | [boolean](https://mdn.io/boolean) | [number](https://mdn.io/number) | [string](https://mdn.io/string) | React.Element | [Array](https://mdn.io/array)&lt;[ReactNode](#type-reactnode)>
+
 ### type RequestCache
@@ -552,0 +580,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

70682

increased by0.19%

Number of package files

19

increased by26.67%

Number of lines in readme file

580

increased by5.07%

Worsened metrics

Dependency count

9

increased by12.5%

Lines of code

799

decreased by-9.41%

Number of medium supply chain risk alerts

5

increased by25%

Dependency changes

• + Addedreact-dom@16.14.0(transitive)

• + Addedscheduler@0.19.1(transitive)

• Updated@babel/runtime@^7.3.1

• Updatedextract-files@^5.0.1