graphql-react
Advanced tools
Changelog
20.0.0
react-waterfall-render
dependency to v5.extract-files
dependency to v13.node:
URL scheme for Node.js builtin module imports in tests.Record
types with index signatures.is-plain-obj
.Changelog
19.0.0
^14.17.0 || ^16.0.0 || >= 18.0.0
.react
peer dependency to 16.14 - 18
.react-dom
peer dependency.@testing-library/react-hooks
dev dependency and rewrote React hook tests using react-test-renderer
, a new test utility function createReactTestRenderer
, and a custom React component ReactHookTest
.fetch-blob
and formdata-node
dev dependencies. Instead, File
and FormData
are imported from node-fetch
.jsconfig.json
:
compilerOptions.maxNodeModuleJsDepth
to 10
.compilerOptions.module
to nodenext
.not IE > 0
from the Browserslist query.react-dom/server
imports in tests to suit React v18.fetchGraphQL
test with the global fetch
API unavailable for new versions of Node.js that have the fetch
global.globalThis
instead of global
in tests.ReactTestRenderer
instead of ReactDOMServer.renderToStaticMarkup
in some React context related tests.graphql-react
examples repo migration from Node.js, Next.js, and Vercel to Deno, Ruck, and Fly.io.Changelog
18.0.0
FetchGraphQLResultErrors
to FetchGraphQLResultError
in fetchGraphQL.mjs
.FetchGraphQLResultErrorLoading
to fetchGraphQL.mjs
containing the GraphQL result error types related to loading that are generated on the client, not the GraphQL server.types.mjs
.Deferred
class used in tests.Changelog
17.0.0
extract-files
dependency.react-waterfall-render
dependency.files
and exports
fields.jsdoc-md
dev dependency and the package docs-update
and docs-check
scripts, replacing the readme “API” section with a manually written “Exports” section.types
script.formdata-node
dev dependency with formdata-polyfill
and fetch-blob
.license.md
MIT License file, fixing #54.Changelog
16.0.0
^12.22.0 || ^14.17.0 || >= 16.0.0
.files
and exports
fields../package
from the package exports
field; the full package.json
filename must be used in a require
path./public/
..mjs
files instead of CJS in .js
files, accessible via import
but not require
.React.createElement
instead of the the new React JSX runtime.isobject
dependency.useCacheEntryPrunePrevention
React hook to avoid the React.useCallback
React hook.react
and react-dom
as they’re not proper Node.js ESM.process.env.NODE_ENV
.eslint-plugin-compat
.assertBundleSize
function to assert module bundle size in tests:
singleQuote
to the default, false
.Changelog
15.0.0
extract-files
dependency to v11. This dependency is used by the function fetchOptionsGraphQL
.Changelog
14.0.0
^12.20 || >= 14.13
.package.json
exports
field public subpath folder mapping (deprecated by Node.js) with a subpath pattern. Deep require
paths within graphql-react/public/
must now include the .js
file extension..mjs
files instead of CJS in .js
files.jsdoc-md
v10+ automatically generates a Prettier formatted readme.test:jsdoc
script that checks the readme API docs are up to date with the source JSDoc.esbuild
instead of webpack
and disposable-directory
.esbuild
instead of webpack
.kB
symbol instead of KB
wherever bundle size is mentioned in the package description and readme.require
from react
to slightly improve the esbuild
bundle size..js
file extension in internal require
paths.changelog.md
is no longer published.Changelog
13.0.0
Updated Node.js version support to ^12.0.0 || >= 13.7.0
.
Stopped supporting Internet Explorer.
Updated the react
and react-dom
peer dependencies to 16.14 - 17
.
Use the new JSX runtime.
Reorganized the file structure and replaced the entire API:
GraphQL
GraphQLContext
GraphQLProvider
hashObject
reportCacheErrors
useGraphQL
ssr
graphql-react/public/
.js
CJS modules:
Cache
CacheContext
HYDRATION_TIME_MS
HydrationTimeStampContext
Loading
LoadingCacheValue
LoadingContext
Provider
cacheDelete
cacheEntryDelete
cacheEntryPrune
cacheEntrySet
cacheEntryStale
cachePrune
cacheStale
fetchGraphQL
fetchOptionsGraphQL
useAutoAbortLoad
useAutoLoad
useCache
useCacheEntry
useCacheEntryPrunePrevention
useLoadGraphQL
useLoadOnDelete
useLoadOnMount
useLoadOnStale
useLoading
useLoadingEntry
useWaterfallLoad
waterfallRender
from react-waterfall-render
should now be used for server side rendering, fixing #57.The API for the cache (centered around a Cache
instance provided in the CacheContext
React context) is separated from the API for loading (centered around a Loading
instance provided in the LoadingContext
React context). Although the new loading system should work well for everyone, it could be totally avoided in an app that implements a custom alternative.
Instead of using the old mitt
dependency for events, the Cache
and Loading
classes extend the native EventTarget
global available in modern browsers and Node.js; a powerful and familiar event system with zero bundle size cost.
The new API avoids class methods that add to bundle size regardless if they are used, in favor of focused functions that can be imported to process instances as arguments. For example, one route in your app may only render a cache entry, while another may have a form that makes the global cache stale. If the functionality to make the cache stale was a Cache
instance method, it would increase the bundle size for the entire app, whereas a function imported in the second route will only grow the bundle size for that route. Features can be added to the API over time without growing everyone’s bundles.
There are now functions that can be imported to directly manipulate the cache. The functions cacheEntrySet
and cacheEntryDelete
update a particular entry, and cacheDelete
deletes all cache.
There is a new approach for dealing with stale cache. The function cacheEntryStale
signals a single entry is stale, and cacheStale
does the same for all entries (useful after a mutation). These functions don’t actually update cache entries; they simply dispatch cache entry stale events and it’s up to components to listen for this event and reload the cache entry in response, typically via the useLoadOnStale
React hook.
Cache entries that are not relevant to the current view can now be pruned on demand using the functions cacheEntryPrune
for a single entry, or cachePrune
for all entries, fixing #55. These functions work by dispatching cache entry prune events on the Cache
instance, and for each event not cancelled by a listener with event.preventDefault()
, the cache entry is deleted. The useCacheEntryPrunePrevention
React hook can be used to automatically cancel pruning of a cache entry used in a component.
Cache keys are now manually defined instead of automatically derived from fetch
options hashes, fixing #56. This is easier to understand, is faster to render, and results in a smaller bundle size without the old fnv1a
dependency for hashing.
Instead of one useGraphQL
React hook with complex options that all add to a component’s bundle size regardless if they are used, there are now several more focused React hooks that can be composed to do exactly the work required, fixing #53.
The React hooks can be composed with custom ones to load and cache any type of data, not just GraphQL, using any method, not just fetch
.
The new loading system provides the ability to abort loading at any time, implemented using the native AbortController
global available in modern browsers and Node.js, fixing #24. Many of the new React hooks leverage this for features such as automatically aborting loading a cache entry when the component loading it unmounts. The new API makes it trivially easy to build features as auto-suggest search inputs that abort the last loading on new input, or page queries that abort loading if the user abandons the route.
While the new API may seem to have an intimidating number of public exports, the average Next.js app that queries and renders data from a GraphQL API will only use a few. For inspiration, see the readme “Examples” section.
Published modules now contain JSDoc comments, which might affect TypeScript projects.
actions/checkout
to v2.actions/setup-node
to v2.CI
environment variable as it’s set by default.hard-rejection
to detect unhandled Promise
rejections in tests, as Node.js v15+ does this natively.webpack
v5, and remove size-limit
related dev dependencies, config, and scripts.Changelog
12.0.0
Concurrent GraphQL operations with the same cache key no longer share the first request.
The GraphQL
instance property operations
type has changed:
- object<GraphQLCacheKey, Promise<GraphQLCacheValue>>
+ object<GraphQLCacheKey, Array<Promise<GraphQLCacheValue>>>
promisifyEvent
function.GraphQL
instance method operate
option reloadOnLoad
in isolation.GraphQL
instance method operate
triggered events.GraphQL
instance method operate
to eliminate the GraphQL
private instance method fetch
and reduce the chance of race conditions in consumer code.GraphQL
instance method operate
when the reloadOnLoad
and reloadOnLoad
options are false
.void
.