Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
graphql-react
Advanced tools
graphql-react - npm Package Compare versions
Comparing version 16.0.0 to 17.0.0
| { | ||
| "name": "graphql-react", | ||
| "version": "16.0.0", | ||
| "version": "17.0.0", | ||
| "description": "A GraphQL client for React using modern context and hooks APIs that’s lightweight (< 4 kB) but powerful; the first Relay and Apollo alternative with server side rendering.", | ||
@@ -32,8 +32,2 @@ "license": "MIT", | ||
| "CacheContext.mjs", | ||
| "HYDRATION_TIME_MS.mjs", | ||
| "HydrationTimeStampContext.mjs", | ||
| "Loading.mjs", | ||
| "LoadingCacheValue.mjs", | ||
| "LoadingContext.mjs", | ||
| "Provider.mjs", | ||
| "cacheDelete.mjs", | ||
@@ -48,2 +42,9 @@ "cacheEntryDelete.mjs", | ||
| "fetchOptionsGraphQL.mjs", | ||
| "HYDRATION_TIME_MS.mjs", | ||
| "HydrationTimeStampContext.mjs", | ||
| "Loading.mjs", | ||
| "LoadingCacheValue.mjs", | ||
| "LoadingContext.mjs", | ||
| "Provider.mjs", | ||
| "types.mjs", | ||
| "useAutoAbortLoad.mjs", | ||
@@ -56,7 +57,7 @@ "useAutoLoad.mjs", | ||
| "useLoadGraphQL.mjs", | ||
| "useLoading.mjs", | ||
| "useLoadingEntry.mjs", | ||
| "useLoadOnDelete.mjs", | ||
| "useLoadOnMount.mjs", | ||
| "useLoadOnStale.mjs", | ||
| "useLoading.mjs", | ||
| "useLoadingEntry.mjs", | ||
| "useWaterfallLoad.mjs" | ||
@@ -66,11 +67,4 @@ ], | ||
| "exports": { | ||
| "./package.json": "./package.json", | ||
| "./Cache.mjs": "./Cache.mjs", | ||
| "./CacheContext.mjs": "./CacheContext.mjs", | ||
| "./HYDRATION_TIME_MS.mjs": "./HYDRATION_TIME_MS.mjs", | ||
| "./HydrationTimeStampContext.mjs": "./HydrationTimeStampContext.mjs", | ||
| "./Loading.mjs": "./Loading.mjs", | ||
| "./LoadingCacheValue.mjs": "./LoadingCacheValue.mjs", | ||
| "./LoadingContext.mjs": "./LoadingContext.mjs", | ||
| "./Provider.mjs": "./Provider.mjs", | ||
| "./cacheDelete.mjs": "./cacheDelete.mjs", | ||
@@ -85,2 +79,10 @@ "./cacheEntryDelete.mjs": "./cacheEntryDelete.mjs", | ||
| "./fetchOptionsGraphQL.mjs": "./fetchOptionsGraphQL.mjs", | ||
| "./HYDRATION_TIME_MS.mjs": "./HYDRATION_TIME_MS.mjs", | ||
| "./HydrationTimeStampContext.mjs": "./HydrationTimeStampContext.mjs", | ||
| "./Loading.mjs": "./Loading.mjs", | ||
| "./LoadingCacheValue.mjs": "./LoadingCacheValue.mjs", | ||
| "./LoadingContext.mjs": "./LoadingContext.mjs", | ||
| "./package.json": "./package.json", | ||
| "./Provider.mjs": "./Provider.mjs", | ||
| "./types.mjs": "./types.mjs", | ||
| "./useAutoAbortLoad.mjs": "./useAutoAbortLoad.mjs", | ||
@@ -92,7 +94,7 @@ "./useAutoLoad.mjs": "./useAutoLoad.mjs", | ||
| "./useLoadGraphQL.mjs": "./useLoadGraphQL.mjs", | ||
| "./useLoading.mjs": "./useLoading.mjs", | ||
| "./useLoadingEntry.mjs": "./useLoadingEntry.mjs", | ||
| "./useLoadOnDelete.mjs": "./useLoadOnDelete.mjs", | ||
| "./useLoadOnMount.mjs": "./useLoadOnMount.mjs", | ||
| "./useLoadOnStale.mjs": "./useLoadOnStale.mjs", | ||
| "./useLoading.mjs": "./useLoading.mjs", | ||
| "./useLoadingEntry.mjs": "./useLoadingEntry.mjs", | ||
| "./useWaterfallLoad.mjs": "./useWaterfallLoad.mjs" | ||
@@ -109,42 +111,46 @@ }, | ||
| "dependencies": { | ||
| "extract-files": "^11.0.0", | ||
| "react-waterfall-render": "^3.0.0" | ||
| "extract-files": "^12.0.0", | ||
| "react-waterfall-render": "^4.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@testing-library/react-hooks": "^7.0.2", | ||
| "@types/node": "^17.0.8", | ||
| "@types/react": "^17.0.38", | ||
| "@types/react-dom": "^17.0.11", | ||
| "@types/react-test-renderer": "^17.0.1", | ||
| "abort-controller": "^3.0.0", | ||
| "coverage-node": "^5.0.1", | ||
| "esbuild": "^0.14.0", | ||
| "eslint": "^8.3.0", | ||
| "eslint-config-env": "^23.0.0", | ||
| "esbuild": "^0.14.11", | ||
| "eslint": "^8.7.0", | ||
| "eslint-config-env": "^23.0.2", | ||
| "eslint-config-prettier": "^8.3.0", | ||
| "eslint-plugin-compat": "^4.0.0", | ||
| "eslint-plugin-import": "^2.25.3", | ||
| "eslint-plugin-jsdoc": "^37.0.3", | ||
| "eslint-plugin-compat": "^4.0.1", | ||
| "eslint-plugin-import": "^2.25.4", | ||
| "eslint-plugin-jsdoc": "^37.6.1", | ||
| "eslint-plugin-node": "^11.1.0", | ||
| "eslint-plugin-prettier": "^4.0.0", | ||
| "eslint-plugin-react": "^7.27.1", | ||
| "eslint-plugin-react": "^7.28.0", | ||
| "eslint-plugin-react-hooks": "^4.3.0", | ||
| "event-target-shim": "^6.0.2", | ||
| "fetch-blob": "^3.1.3", | ||
| "filter-console": "^1.0.0", | ||
| "formdata-node": "^4.3.1", | ||
| "formdata-polyfill": "^4.0.10", | ||
| "gzip-size": "^7.0.0", | ||
| "jsdoc-md": "^11.0.2", | ||
| "node-fetch": "^3.1.0", | ||
| "prettier": "^2.5.0", | ||
| "node-fetch": "^3.1.1", | ||
| "prettier": "^2.5.1", | ||
| "react": "^17.0.2", | ||
| "react-dom": "^17.0.2", | ||
| "react-test-renderer": "^17.0.2", | ||
| "revertable-globals": "^2.0.0", | ||
| "test-director": "^7.0.0" | ||
| "revertable-globals": "^3.0.0", | ||
| "test-director": "^8.0.1", | ||
| "typescript": "^4.6.0-dev.20220116" | ||
| }, | ||
| "scripts": { | ||
| "docs-update": "jsdoc-md", | ||
| "docs-check": "jsdoc-md -c", | ||
| "eslint": "eslint .", | ||
| "prettier": "prettier -c .", | ||
| "types": "tsc -p jsconfig.json", | ||
| "tests": "coverage-node test.mjs", | ||
| "test": "npm run eslint && npm run prettier && npm run docs-check && npm run tests", | ||
| "test": "npm run eslint && npm run prettier && npm run types && npm run tests", | ||
| "prepublishOnly": "npm test" | ||
| } | ||
| } |
947
readme.md
@@ -9,3 +9,3 @@  | ||
| The [API](#api) can also be used to custom load, cache and server side render any data, even from non-[GraphQL](https://graphql.org) sources. | ||
| The [exports](#exports) can also be used to custom load, cache and server side render any data, even from non-[GraphQL](https://graphql.org) sources. | ||
@@ -15,3 +15,3 @@ - [Installation](#installation) | ||
| - [Requirements](#requirements) | ||
| - [API](#api) | ||
| - [Exports](#exports) | ||
@@ -40,4 +40,4 @@ ## Installation | ||
| - [Official Next.js example](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-react). | ||
| - [Next.js example](https://github.com/jaydenseric/graphql-react-examples) deployed at [graphql-react.vercel.app](https://graphql-react.vercel.app). | ||
| - [Official Next.js example](https://github.com/vercel/next.js/tree/canary/examples/with-graphql-react) (often outdated as the Next.js team can be extremely slow to review and merge pull requests). | ||
@@ -151,912 +151,35 @@ Here is a basic example using the [GitHub GraphQL API](https://docs.github.com/en/graphql), with tips commented: | ||
| ## API | ||
| ## Exports | ||
| - [class Cache](#class-cache) | ||
| - [Cache instance property store](#cache-instance-property-store) | ||
| - [Cache event delete](#cache-event-delete) | ||
| - [Cache event prune](#cache-event-prune) | ||
| - [Cache event set](#cache-event-set) | ||
| - [Cache event stale](#cache-event-stale) | ||
| - [class Loading](#class-loading) | ||
| - [Loading instance property store](#loading-instance-property-store) | ||
| - [Loading event end](#loading-event-end) | ||
| - [Loading event start](#loading-event-start) | ||
| - [class LoadingCacheValue](#class-loadingcachevalue) | ||
| - [LoadingCacheValue instance property abortController](#loadingcachevalue-instance-property-abortcontroller) | ||
| - [LoadingCacheValue instance property promise](#loadingcachevalue-instance-property-promise) | ||
| - [LoadingCacheValue instance property timeStamp](#loadingcachevalue-instance-property-timestamp) | ||
| - [function cacheDelete](#function-cachedelete) | ||
| - [function cacheEntryDelete](#function-cacheentrydelete) | ||
| - [function cacheEntryPrune](#function-cacheentryprune) | ||
| - [function cacheEntrySet](#function-cacheentryset) | ||
| - [function cacheEntryStale](#function-cacheentrystale) | ||
| - [function cachePrune](#function-cacheprune) | ||
| - [function cacheStale](#function-cachestale) | ||
| - [function fetchGraphQL](#function-fetchgraphql) | ||
| - [function fetchOptionsGraphQL](#function-fetchoptionsgraphql) | ||
| - [function Provider](#function-provider) | ||
| - [function useAutoAbortLoad](#function-useautoabortload) | ||
| - [function useAutoLoad](#function-useautoload) | ||
| - [function useCache](#function-usecache) | ||
| - [function useCacheEntry](#function-usecacheentry) | ||
| - [function useCacheEntryPrunePrevention](#function-usecacheentrypruneprevention) | ||
| - [function useLoadGraphQL](#function-useloadgraphql) | ||
| - [function useLoading](#function-useloading) | ||
| - [function useLoadingEntry](#function-useloadingentry) | ||
| - [function useLoadOnDelete](#function-useloadondelete) | ||
| - [function useLoadOnMount](#function-useloadonmount) | ||
| - [function useLoadOnStale](#function-useloadonstale) | ||
| - [function useWaterfallLoad](#function-usewaterfallload) | ||
| - [member CacheContext](#member-cachecontext) | ||
| - [member HydrationTimeStampContext](#member-hydrationtimestampcontext) | ||
| - [member LoadingContext](#member-loadingcontext) | ||
| - [constant HYDRATION_TIME_MS](#constant-hydration_time_ms) | ||
| - [type CacheKey](#type-cachekey) | ||
| - [type CacheKeyMatcher](#type-cachekeymatcher) | ||
| - [type CacheValue](#type-cachevalue) | ||
| - [type FetchOptions](#type-fetchoptions) | ||
| - [type GraphQLOperation](#type-graphqloperation) | ||
| - [type GraphQLResult](#type-graphqlresult) | ||
| - [type GraphQLResultError](#type-graphqlresulterror) | ||
| - [type HighResTimeStamp](#type-highrestimestamp) | ||
| - [type Loader](#type-loader) | ||
| - [type LoadGraphQL](#type-loadgraphql) | ||
| - [type ReactNode](#type-reactnode) | ||
| These ECMAScript modules are published to [npm](https://npmjs.com) and exported via the [`package.json`](./package.json) `exports` field: | ||
| ### class Cache | ||
| Cache store. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `store` | object? = {} | Initial [cache store](#cache-instance-property-store). Useful for hydrating cache data from a server side render prior to the initial client side render. | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import Cache from "graphql-react/Cache.mjs"; | ||
| > ``` | ||
| _Construct a new instance._ | ||
| > ```js | ||
| > const cache = new Cache(); | ||
| > ``` | ||
| #### Cache instance property store | ||
| Store of cache [keys](#type-cachekey) and [values](#type-cachevalue). | ||
| **Type:** object | ||
| #### Cache event delete | ||
| Signals that a [cache store](#cache-instance-property-store) entry was deleted. The event name starts with the [cache key](#type-cachekey) of the deleted entry, followed by `/delete`. | ||
| **Type:** CustomEvent | ||
| #### Cache event prune | ||
| Signals that a [cache store](#cache-instance-property-store) entry will be deleted unless the event is canceled via `event.preventDefault()`. The event name starts with the [cache key](#type-cachekey) of the entry being pruned, followed by `/prune`. | ||
| **Type:** CustomEvent | ||
| #### Cache event set | ||
| Signals that a [cache store](#cache-instance-property-store) entry was set. The event name starts with the [cache key](#type-cachekey) of the set entry, followed by `/set`. | ||
| **Type:** CustomEvent | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `detail` | object | Event detail. | | ||
| | `detail.cacheValue` | [CacheValue](#type-cachevalue) | Cache value that was set. | | ||
| #### Cache event stale | ||
| Signals that a [cache store](#cache-instance-property-store) entry is now stale (often due to a mutation) and should probably be reloaded. The event name starts with the [cache key](#type-cachekey) of the stale entry, followed by `/stale`. | ||
| **Type:** CustomEvent | ||
| --- | ||
| ### class Loading | ||
| Loading store. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import Loading from "graphql-react/Loading.mjs"; | ||
| > ``` | ||
| _Construct a new instance._ | ||
| > ```js | ||
| > const loading = new Loading(); | ||
| > ``` | ||
| #### Loading instance property store | ||
| Loading store, keyed by [cache key](#type-cachekey). Multiple [loading cache values](#class-loadingcachevalue) for the same key are set in the order they started. | ||
| **Type:** object<[CacheKey](#type-cachekey), Set<[LoadingCacheValue](#class-loadingcachevalue)>> | ||
| #### Loading event end | ||
| Signals the end of [loading a cache value](#class-loadingcachevalue); either the loading finished and the [cache value](#type-cachevalue) was set, the loading was aborted, or there was an error. The event name starts with the [cache key](#type-cachekey), followed by `/end`. | ||
| **Type:** CustomEvent | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `detail` | object | Event detail. | | ||
| | `detail.loadingCacheValue` | [LoadingCacheValue](#class-loadingcachevalue) | Loading cache value that ended. | | ||
| #### Loading event start | ||
| Signals the start of [loading a cache value](#class-loadingcachevalue). The event name starts with the [cache key](#type-cachekey), followed by `/start`. | ||
| **Type:** CustomEvent | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `detail` | object | Event detail. | | ||
| | `detail.loadingCacheValue` | [LoadingCacheValue](#class-loadingcachevalue) | Loading cache value that started. | | ||
| --- | ||
| ### class LoadingCacheValue | ||
| Controls a loading [cache value](#type-cachevalue). | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `loading` | [Loading](#class-loading) | Loading to update. | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `loadingResult` | Promise<[CacheValue](#type-cachevalue)> | Resolves the loading result (including any loading errors) to be set as the [cache value](#type-cachevalue) if loading isn’t aborted. Shouldn’t reject. | | ||
| | `abortController` | AbortController | Aborts this loading and skips setting the loading result as the [cache value](#type-cachevalue). Has no effect after loading ends. | | ||
| #### Fires | ||
| - [Loading event start](#loading-event-start) | ||
| - [Cache event set](#cache-event-set) | ||
| - [Loading event end](#loading-event-end) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import LoadingCacheValue from "graphql-react/LoadingCacheValue.mjs"; | ||
| > ``` | ||
| #### LoadingCacheValue instance property abortController | ||
| Aborts this loading and skips setting the loading result as the [cache value](#type-cachevalue). Has no effect after loading ends. | ||
| **Type:** AbortController | ||
| #### LoadingCacheValue instance property promise | ||
| Resolves the loading result, after the [cache value](#type-cachevalue) has been set if the loading wasn’t aborted. Shouldn’t reject. | ||
| **Type:** Promise<\*> | ||
| #### LoadingCacheValue instance property timeStamp | ||
| When this loading started. | ||
| **Type:** [HighResTimeStamp](#type-highrestimestamp) | ||
| --- | ||
| ### function cacheDelete | ||
| Deletes [cache](#cache-instance-property-store) entries. Useful after a user logs out. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKeyMatcher` | [CacheKeyMatcher](#type-cachekeymatcher)? | Matches [cache keys](#type-cachekey) to delete. By default all are matched. | | ||
| #### Fires | ||
| - [Cache event delete](#cache-event-delete) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cacheDelete from "graphql-react/cacheDelete.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function cacheEntryDelete | ||
| Deletes a [cache](#cache-instance-property-store) entry. | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :--------------- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| #### Fires | ||
| - [Cache event delete](#cache-event-delete) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cacheEntryDelete from "graphql-react/cacheEntryDelete.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function cacheEntryPrune | ||
| Prunes a [cache](#cache-instance-property-store) entry, if no [prune event](#cache-event-prune) listener cancels the [cache](#cache-instance-property-store) entry deletion via `event.preventDefault()`. | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :--------------- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| #### Fires | ||
| - [Cache event prune](#cache-event-prune) | ||
| - [Cache event delete](#cache-event-delete) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cacheEntryPrune from "graphql-react/cacheEntryPrune.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function cacheEntrySet | ||
| Sets a [cache](#cache-instance-property-store) entry. | ||
| | Parameter | Type | Description | | ||
| | :----------- | :----------------------------- | :--------------- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `cacheValue` | [CacheValue](#type-cachevalue) | Cache value. | | ||
| #### Fires | ||
| - [Cache event set](#cache-event-set) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cacheEntrySet from "graphql-react/cacheEntrySet.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function cacheEntryStale | ||
| Stales a [cache](#cache-instance-property-store) entry, signalling it should probably be reloaded. | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :--------------- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| #### Fires | ||
| - [Cache event stale](#cache-event-stale) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cacheEntryStale from "graphql-react/cacheEntryStale.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function cachePrune | ||
| Prunes [cache](#cache-instance-property-store) entries. Useful after a mutation. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKeyMatcher` | [CacheKeyMatcher](#type-cachekeymatcher)? | Matches [cache keys](#type-cachekey) to prune. By default all are matched. | | ||
| #### Fires | ||
| - [Cache event prune](#cache-event-prune) | ||
| - [Cache event delete](#cache-event-delete) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cachePrune from "graphql-react/cachePrune.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function cacheStale | ||
| Stales [cache](#cache-instance-property-store) entries. Useful after a mutation. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cache` | [Cache](#class-cache) | Cache to update. | | ||
| | `cacheKeyMatcher` | [CacheKeyMatcher](#type-cachekeymatcher)? | Matches [cache keys](#type-cachekey) to stale. By default all are matched. | | ||
| #### Fires | ||
| - [Cache event stale](#cache-event-stale) | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import cacheStale from "graphql-react/cacheStale.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function fetchGraphQL | ||
| Fetches a GraphQL operation, always resolving a [GraphQL result](#type-graphqlresult) suitable for use as a [cache value](#type-cachevalue), even if there are errors. Loading errors are added to the [GraphQL result](#type-graphqlresult) `errors` property, and have an `extensions` property containing `client: true`, along with `code` and sometimes error-specific properties: | ||
| | Error code | Reasons | Error specific properties | | ||
| | :-- | :-- | :-- | | ||
| | `FETCH_ERROR` | Fetch error, e.g. the `fetch` global isn’t defined, or the network is offline. | `fetchErrorMessage` (string). | | ||
| | `RESPONSE_HTTP_STATUS` | Response HTTP status code is in the error range. | `statusCode` (number), `statusText` (string). | | ||
| | `RESPONSE_JSON_PARSE_ERROR` | Response JSON parse error. | `jsonParseErrorMessage` (string). | | ||
| | `RESPONSE_MALFORMED` | Response JSON isn’t an object, is missing an `errors` or `data` property, the `errors` property isn’t an array, or the `data` property isn’t an object or `null`. | | | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `fetchUri` | string | Fetch URI for the GraphQL API. | | ||
| | `fetchOptions` | [FetchOptions](#type-fetchoptions) | Fetch options. | | ||
| **Returns:** Promise<[GraphQLResult](#type-graphqlresult)> — Resolves a result suitable for use as a [cache value](#type-cachevalue). Shouldn’t reject. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import fetchGraphQL from "graphql-react/fetchGraphQL.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function fetchOptionsGraphQL | ||
| Creates default [`fetch` options](#type-fetchoptions) for a [GraphQL operation](#type-graphqloperation). If the [GraphQL operation](#type-graphqloperation) contains files to upload, the options will be for a [GraphQL multipart request](https://github.com/jaydenseric/graphql-multipart-request-spec), otherwise they will be for a regular [GraphQL `POST` request](https://github.com/graphql/graphql-over-http/blob/main/spec/GraphQLOverHTTP.md#post). | ||
| This utility exists for user convenience and isn’t used directly by the `graphql-react` API. If there is no chance the [GraphQL operation](#type-graphqloperation) contains files, avoid using this utility for a smaller bundle size. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `operation` | [GraphQLOperation](#type-graphqloperation) | GraphQL operation. | | ||
| **Returns:** [FetchOptions](#type-fetchoptions) — [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) options. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import fetchOptionsGraphQL from "graphql-react/fetchOptionsGraphQL.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function Provider | ||
| A React component to provide all the React context required to enable the entire `graphql-react` API: | ||
| - [Hydration time stamp context](#member-hydrationtimestampcontext) | ||
| - [Cache context](#member-cachecontext) | ||
| - [Loading context](#member-loadingcontext) | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `props` | object | Component props. | | ||
| | `props.cache` | [Cache](#class-cache) | [`Cache`](#class-cache) instance. | | ||
| | `props.children` | [ReactNode](#type-reactnode)? | React children. | | ||
| **Returns:** [ReactNode](#type-reactnode) — React virtual DOM node. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import Provider from "graphql-react/Provider.mjs"; | ||
| > ``` | ||
| _Provide a [`Cache`](#class-cache) instance for an app._ | ||
| > ```jsx | ||
| > import Cache from "graphql-react/Cache.mjs"; | ||
| > import Provider from "graphql-react/Provider.mjs"; | ||
| > import React from "react"; | ||
| > | ||
| > const cache = new Cache(); | ||
| > | ||
| > const App = ({ children }) => <Provider cache={cache}>{children}</Provider>; | ||
| > ``` | ||
| --- | ||
| ### function useAutoAbortLoad | ||
| A React hook to create a memoized [loader](#type-loader) from another, that automatically aborts previous loading that started via this hook when new loading starts via this hook, the hook arguments change, or the component unmounts. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `load` | [Loader](#type-loader) | Memoized function that starts the loading. | | ||
| **Returns:** [Loader](#type-loader) — Memoized function that starts the loading. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useAutoAbortLoad from "graphql-react/useAutoAbortLoad.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useAutoLoad | ||
| A React hook to prevent a [cache](#cache-instance-property-store) entry from being pruned while the component is mounted and automatically keep it loaded. Previous loading that started via this hook aborts when new loading starts via this hook, the hook arguments change, or the component unmounts. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `load` | [Loader](#type-loader) | Memoized function that starts the loading. | | ||
| **Returns:** [Loader](#type-loader) — Memoized [loader](#type-loader) created from the `load` argument, that automatically aborts the last loading when the memoized function changes or the component unmounts. | ||
| #### See | ||
| - [`useCacheEntryPrunePrevention`](#function-usecacheentrypruneprevention), used by this hook. | ||
| - [`useAutoAbortLoad`](#function-useautoabortload), used by this hook. | ||
| - [`useLoadOnMount`](#function-useloadonmount), used by this hook. | ||
| - [`useLoadOnStale`](#function-useloadonstale), used by this hook. | ||
| - [`useLoadOnDelete`](#function-useloadondelete), used by this hook. | ||
| - [`useWaterfallLoad`](#function-usewaterfallload), often used alongside this hook for SSR loading. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useAutoLoad from "graphql-react/useAutoLoad.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useCache | ||
| A React hook to get the [cache context](#member-cachecontext). | ||
| **Returns:** [Cache](#class-cache) — The cache. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useCache from "graphql-react/useCache.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useCacheEntry | ||
| A React hook to get a [cache value](#type-cachevalue) using its [cache key](#type-cachekey). | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :---------- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| **Returns:** [CacheValue](#type-cachevalue) — Cache value, if present. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useCacheEntry from "graphql-react/useCacheEntry.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useCacheEntryPrunePrevention | ||
| A React hook to prevent a [cache](#cache-instance-property-store) entry from being pruned, by canceling the cache entry deletion for [prune events](#cache-event-prune) with `event.preventDefault()`. | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :---------- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useCacheEntryPrunePrevention from "graphql-react/useCacheEntryPrunePrevention.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useLoadGraphQL | ||
| A React hook to get a function for loading a GraphQL operation. | ||
| **Returns:** [LoadGraphQL](#type-loadgraphql) — Loads a GraphQL operation. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useLoadGraphQL from "graphql-react/useLoadGraphQL.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useLoading | ||
| A React hook to get the [loading context](#member-loadingcontext). | ||
| **Returns:** [Loading](#class-loading) — Loading. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useLoading from "graphql-react/useLoading.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useLoadingEntry | ||
| A React hook to get the [loading cache values](#class-loadingcachevalue) for a given [cache key](#type-cachekey). | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :---------- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| **Returns:** Set<[LoadingCacheValue](#class-loadingcachevalue)> | `undefined` — Loading cache values, if present. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useLoadingEntry from "graphql-react/useLoadingEntry.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useLoadOnDelete | ||
| A React hook to load a [cache](#cache-instance-property-store) entry after it’s [deleted](#cache-event-delete), if there isn’t loading for the [cache key](#type-cachekey) that started after. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `load` | [Loader](#type-loader) | Memoized function that starts the loading. | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useLoadOnDelete from "graphql-react/useLoadOnDelete.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useLoadOnMount | ||
| A React hook to automatically load a [cache](#cache-instance-property-store) entry after the component mounts or the [cache context](#member-cachecontext) or any of the arguments change, except during the [hydration time](#constant-hydration_time_ms) if the [hydration time stamp context](#member-hydrationtimestampcontext) is populated and the [cache](#cache-instance-property-store) entry is already populated. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `load` | [Loader](#type-loader) | Memoized function that starts the loading. | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useLoadOnMount from "graphql-react/useLoadOnMount.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useLoadOnStale | ||
| A React hook to load a [cache](#cache-instance-property-store) entry after becomes [stale](#cache-event-stale), if there isn’t loading for the [cache key](#type-cachekey) that started after. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `load` | [Loader](#type-loader) | Memoized function that starts the loading. | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useLoadOnStale from "graphql-react/useLoadOnStale.mjs"; | ||
| > ``` | ||
| --- | ||
| ### function useWaterfallLoad | ||
| A React hook to load a [cache](#cache-instance-property-store) entry if the [waterfall render context](https://github.com/jaydenseric/react-waterfall-render#member-waterfallrendercontext) is populated, i.e. when [waterfall rendering](https://github.com/jaydenseric/react-waterfall-render#function-waterfallrender) for either a server side render or to preload components in a browser environment. | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| | `load` | [Loader](#type-loader) | Memoized function that starts the loading. | | ||
| **Returns:** boolean — Did loading start. If so, it’s efficient for the component to return `null` since this render will be discarded anyway for a re-render onces the loading ends. | ||
| #### See | ||
| - [`useAutoLoad`](#function-useautoload), often used alongside this hook. | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import useWaterfallLoad from "graphql-react/useWaterfallLoad.mjs"; | ||
| > ``` | ||
| --- | ||
| ### member CacheContext | ||
| React context for a [`Cache`](#class-cache) instance. | ||
| **Type:** object | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `Provider` | Function | [React context provider component](https://reactjs.org/docs/context.html#contextprovider). | | ||
| | `Consumer` | Function | [React context consumer component](https://reactjs.org/docs/context.html#contextconsumer). | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import CacheContext from "graphql-react/CacheContext.mjs"; | ||
| > ``` | ||
| --- | ||
| ### member HydrationTimeStampContext | ||
| React context for the client side hydration [time stamp](#type-highrestimestamp). | ||
| **Type:** object | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `Provider` | Function | [React context provider component](https://reactjs.org/docs/context.html#contextprovider). | | ||
| | `Consumer` | Function | [React context consumer component](https://reactjs.org/docs/context.html#contextconsumer). | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import HydrationTimeStampContext from "graphql-react/HydrationTimeStampContext.mjs"; | ||
| > ``` | ||
| --- | ||
| ### member LoadingContext | ||
| React context for a [`Loading`](#class-loading) instance. | ||
| **Type:** object | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `Provider` | Function | [React context provider component](https://reactjs.org/docs/context.html#contextprovider). | | ||
| | `Consumer` | Function | [React context consumer component](https://reactjs.org/docs/context.html#contextconsumer). | | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import LoadingContext from "graphql-react/LoadingContext.mjs"; | ||
| > ``` | ||
| --- | ||
| ### constant HYDRATION_TIME_MS | ||
| Number of milliseconds after the first client render that’s considered the hydration time; during which the [`useAutoLoad`](#function-useautoload) React hook won’t load if the cache entry is already populated. | ||
| **Type:** number | ||
| #### Examples | ||
| _How to import._ | ||
| > ```js | ||
| > import HYDRATION_TIME_MS from "graphql-react/HYDRATION_TIME_MS.mjs"; | ||
| > ``` | ||
| --- | ||
| ### type CacheKey | ||
| A unique key to access a [cache value](#type-cachevalue). | ||
| **Type:** string | ||
| --- | ||
| ### type CacheKeyMatcher | ||
| Matches a [cache key](#type-cachekey) against a custom condition. | ||
| **Type:** Function | ||
| | Parameter | Type | Description | | ||
| | :--------- | :------------------------- | :---------- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key. | | ||
| **Returns:** boolean — Does the [cache key](#type-cachekey) match the custom condition. | ||
| --- | ||
| ### type CacheValue | ||
| A [cache](#cache-instance-property-store) value. If server side rendering, it should be JSON serializable for client hydration. It should contain information about any errors that occurred during loading so they can be rendered, and if server side rendering, be hydrated on the client. | ||
| **Type:** \* | ||
| --- | ||
| ### type FetchOptions | ||
| [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) options, called `init` in official specs. | ||
| **Type:** object | ||
| #### See | ||
| - [MDN `fetch` parameters docs](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#parameters). | ||
| - [Polyfillable `fetch` options](https://github.github.io/fetch/#options). Don’t use other options if `fetch` is polyfilled for Node.js or legacy browsers. | ||
| --- | ||
| ### type GraphQLOperation | ||
| A GraphQL operation. Additional properties may be used; all are sent to the GraphQL server. | ||
| **Type:** object | ||
| | Property | Type | Description | | ||
| | :---------- | :------ | :----------------------------- | | ||
| | `query` | string | GraphQL queries or mutations. | | ||
| | `variables` | object? | Variables used in the `query`. | | ||
| --- | ||
| ### type GraphQLResult | ||
| A GraphQL result. | ||
| **Type:** object | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `data` | object? | GraphQL response data. | | ||
| | `errors` | Array<[GraphQLResultError](#type-graphqlresulterror)>? | GraphQL response errors from the server, along with any loading errors added on the client. | | ||
| #### See | ||
| - [GraphQL spec for a response](https://spec.graphql.org/June2018/#sec-Response). | ||
| --- | ||
| ### type GraphQLResultError | ||
| A GraphQL result error; either created by the GraphQL server, or by whatever loaded the GraphQL on the client (e.g. [`fetchGraphQL`](#function-fetchgraphql)). | ||
| **Type:** object | ||
| | Property | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `message` | object | Error message. | | ||
| | `locations` | Array<{line: number, column: number}>? | GraphQL query locations related to the error. | | ||
| | `path` | Array\<string>? | [GraphQL result](#type-graphqlresult) `data` field path related to the error. | | ||
| | `extensions` | object? | Custom error data. If the error was created on the client and not the GraphQL server, this property should be present and contain at least `client: true`, although `code` and error specific properties may be present. | | ||
| #### See | ||
| - [GraphQL spec for response errors](https://spec.graphql.org/June2018/#sec-Errors). | ||
| --- | ||
| ### type HighResTimeStamp | ||
| Milliseconds since the [performance time origin](https://developer.mozilla.org/en-US/docs/Web/API/Performance/timeOrigin) (when the current JavaScript environment started running). | ||
| **Type:** number | ||
| #### See | ||
| - [MDN `DOMHighResTimeStamp` docs](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp). | ||
| --- | ||
| ### type Loader | ||
| Starts [loading a cache value](#class-loadingcachevalue). | ||
| **Type:** Function | ||
| **Returns:** [LoadingCacheValue](#class-loadingcachevalue) — The loading cache value. | ||
| --- | ||
| ### type LoadGraphQL | ||
| Loads a GraphQL operation, using the [GraphQL fetcher](#function-fetchgraphql). | ||
| **Type:** [Loader](#type-loader) | ||
| | Parameter | Type | Description | | ||
| | :-- | :-- | :-- | | ||
| | `cacheKey` | [CacheKey](#type-cachekey) | Cache key to store the loading result under. | | ||
| | `fetchUri` | string | [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) URI. | | ||
| | `fetchOptions` | [FetchOptions](#type-fetchoptions) | [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) options. | | ||
| **Returns:** [LoadingCacheValue](#class-loadingcachevalue) — The loading cache value. | ||
| --- | ||
| ### type ReactNode | ||
| A React virtual DOM node; anything that can be rendered. | ||
| **Type:** `undefined` | `null` | boolean | number | string | React.Element | Array<[ReactNode](#type-reactnode)> | ||
| - [`Cache.mjs`](./Cache.mjs) | ||
| - [`CacheContext.mjs`](./CacheContext.mjs) | ||
| - [`cacheDelete.mjs`](./cacheDelete.mjs) | ||
| - [`cacheEntryDelete.mjs`](./cacheEntryDelete.mjs) | ||
| - [`cacheEntryPrune.mjs`](./cacheEntryPrune.mjs) | ||
| - [`cacheEntrySet.mjs`](./cacheEntrySet.mjs) | ||
| - [`cacheEntryStale.mjs`](./cacheEntryStale.mjs) | ||
| - [`cachePrune.mjs`](./cachePrune.mjs) | ||
| - [`cacheStale.mjs`](./cacheStale.mjs) | ||
| - [`fetchGraphQL.mjs`](./fetchGraphQL.mjs) | ||
| - [`fetchOptionsGraphQL.mjs`](./fetchOptionsGraphQL.mjs) | ||
| - [`HYDRATION_TIME_MS.mjs`](./HYDRATION_TIME_MS.mjs) | ||
| - [`HydrationTimeStampContext.mjs`](./HydrationTimeStampContext.mjs) | ||
| - [`Loading.mjs`](./Loading.mjs) | ||
| - [`LoadingCacheValue.mjs`](./LoadingCacheValue.mjs) | ||
| - [`LoadingContext.mjs`](./LoadingContext.mjs) | ||
| - [`Provider.mjs`](./Provider.mjs) | ||
| - [`types.mjs`](./types.mjs) | ||
| - [`useAutoAbortLoad.mjs`](./useAutoAbortLoad.mjs) | ||
| - [`useAutoLoad.mjs`](./useAutoLoad.mjs) | ||
| - [`useCache.mjs`](./useCache.mjs) | ||
| - [`useCacheEntry.mjs`](./useCacheEntry.mjs) | ||
| - [`useCacheEntryPrunePrevention.mjs`](./useCacheEntryPrunePrevention.mjs) | ||
| - [`useLoadGraphQL.mjs`](./useLoadGraphQL.mjs) | ||
| - [`useLoading.mjs`](./useLoading.mjs) | ||
| - [`useLoadingEntry.mjs`](./useLoadingEntry.mjs) | ||
| - [`useLoadOnDelete.mjs`](./useLoadOnDelete.mjs) | ||
| - [`useLoadOnMount.mjs`](./useLoadOnMount.mjs) | ||
| - [`useLoadOnStale.mjs`](./useLoadOnStale.mjs) | ||
| - [`useWaterfallLoad.mjs`](./useWaterfallLoad.mjs") |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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 riskPackage 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
Improved metrics
- Number of package files
- increased by6.25%
34
- Lines of code
- increased by7.44%
1271
- Number of medium supply chain risk alerts
- decreased by-33.33%
2
Worsened metrics
- Total package byte prevSize
- decreased by-24.34%
64934
- Dev dependency count
- increased by19.23%
31
- Number of lines in readme file
- decreased by-82.81%
182
Dependency changes
+ Addedextract-files@12.0.0(transitive)
+ Addedis-plain-obj@4.1.0(transitive)
+ Addedreact-waterfall-render@4.0.1(transitive)
- Removedextract-files@11.0.0(transitive)
- Removedreact-waterfall-render@3.0.0(transitive)
Updatedextract-files@^12.0.0