Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

graphql-react

Package Overview
Dependencies
Maintainers
1
Versions
48
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

graphql-react - npm Package Compare versions

Comparing version 7.0.0 to 8.0.0

server/index.js
server/index.mjs
server/ssr.js
server/ssr.mjs
universal/GraphQL.js
universal/GraphQL.mjs
universal/GraphQLContext.js
universal/GraphQLContext.mjs
universal/graphqlFetchOptions.js
universal/graphqlFetchOptions.mjs
universal/hashObject.js
universal/hashObject.mjs
universal/index.js
universal/index.mjs
universal/reportCacheErrors.js
universal/reportCacheErrors.mjs
universal/useGraphQL.js
universal/useGraphQL.mjs

42

changelog.md
# graphql-react changelog
## 8.0.0
### Major
- Updated the `react` and `react-dom` peer dependencies to `^16.8.0`.
- Removed the `Query` component.
- No longer exporting `Provider` and `Consumer`; now `GraphQLContext` is exported.
- The `GraphQL` instance method `query` has been renamed `operate`.
- The `GraphQL` constructor no longer has the `logErrors` option, and GraphQL operation errors are no longer console logged by default.
- The `ssr` function is now exported from `graphql-react/server` instead of `graphql-react/lib/ssr`.
- The `ssr` function is now implemented using `async`/`await` syntax.
- Browser (and less commonly server) environments that fetch GraphQL operations with file uploads must now support (natively or by polyfill) the [`FormData.entries()`](https://developer.mozilla.org/docs/Web/API/FormData/entries) API.
Caching of [GraphQL multipart requests](https://github.com/jaydenseric/graphql-multipart-request-spec) when the `fetch` options `body` is a `FormData` instance has been improved. Previously they would overwrite each other in the cache even if the GraphQL operations were different, depending if the `FormData` instance was native or from a polyfill that could be JSON serialized.
There is still room to improve as `FormData` field values that are `File` or `Blob` instances don’t influence the cache key hashing.
- `GraphQL` event properties have been renamed or added:
- The `fetch` event property `fetchOptionsHash` was renamed `cacheKey`, and the property `cache` was renamed `cacheValuePromise`.
- The `cache` event property `fetchOptionsHash` was renamed `cacheKey`, and the property `cacheValue` was added.
- The `reset` event property `exceptFetchOptionsHash` was renamed `exceptCacheKey`.
### Minor
- Added the `useGraphQL` React hook, which assumes the role of the removed `Query` component.
- Documented the `GraphQL` `on` and `off` methods for managing event listeners.
- Added the `reportCacheErrors` function, a `GraphQL` `cache` event handler that can be setup to report GraphQL operation errors via `console.log()`.
### Patch
- Updated dev dependencies.
- Updated the package description and keywords.
- Simplified the `prepublishOnly` script.
- Use the [`tap`](https://npm.im/tap) CLI and default reporter for tests.
- New project directory structure.
- Separate Babel configs for optimal universal, server, and test environment code.
- Much improved tests.
- Run size limit tests last in the package `test` script as they are the slowest.
- Smaller package size limits for server (3 KB down to 2.5 KB) and browser (2.5 KB down to 2 KB) environments.
- Improved JSDoc types and API documentation.
- Updated the readme intro and added a new “Apollo comparison” section.
## 7.0.0

@@ -4,0 +46,0 @@

84

package.json
{
"name": "graphql-react",
"version": "7.0.0",
"description": "A lightweight GraphQL client for React.",
"version": "8.0.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.",
"license": "MIT",

@@ -16,3 +16,2 @@ "author": {

"graphql",
"react",
"client",

@@ -24,2 +23,5 @@ "query",

"multipart",
"react",
"hooks",
"ssr",
"esm",

@@ -29,6 +31,6 @@ "mjs"

"files": [
"lib",
"!lib/test.*"
"universal",
"server"
],
"main": "lib",
"main": "universal",
"sideEffects": false,

@@ -40,4 +42,4 @@ "engines": {

"peerDependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0"
"react": "^16.8.0",
"react-dom": "^16.8.0"
},

@@ -47,7 +49,5 @@ "dependencies": {

"extract-files": "^5.0.1",
"fast-deep-equal": "^2.0.1",
"fnv1a": "^1.0.1",
"mitt": "^1.1.3",
"object-assign": "^4.1.1",
"prop-types": "^15.6.1"
"object-assign": "^4.1.1"
},

@@ -58,3 +58,3 @@ "devDependencies": {

"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
"@babel/plugin-proposal-object-rest-spread": "^7.3.2",
"@babel/plugin-transform-runtime": "^7.2.0",

@@ -65,8 +65,7 @@ "@babel/preset-env": "^7.3.1",

"babel-plugin-transform-replace-object-assign": "^2.0.0",
"capture-stdout": "^1.0.0",
"cross-fetch": "^3.0.0",
"eslint": "^5.12.1",
"eslint-config-env": "^2.0.0",
"cross-fetch": "^3.0.1",
"eslint": "^5.13.0",
"eslint-config-env": "^3.0.0",
"eslint-config-prettier": "^4.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-import-order-alphabetical": "^0.0.1",

@@ -76,30 +75,30 @@ "eslint-plugin-node": "^8.0.1",

"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-hooks": "^1.0.2",
"formdata-node": "^1.4.0",
"graphql": "^14.1.1",
"graphql-api-koa": "^2.0.0",
"husky": "^1.3.1",
"jsdoc-md": "^1.7.0",
"jsdoc-md": "^2.1.0",
"koa": "^2.7.0",
"koa-bodyparser": "^4.2.1",
"lint-staged": "^8.1.1",
"prettier": "^1.16.1",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"lint-staged": "^8.1.4",
"prettier": "^1.16.4",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"size-limit": "^0.21.1",
"tap": "^12.4.0"
"tap": "^12.5.2"
},
"scripts": {
"prepare": "npm run prepare:clean && npm run prepare:mjs && npm run prepare:js && npm run prepare:jsdoc && npm run prepare:prettier",
"prepare:clean": "rm -rf lib",
"prepare:mjs": "BABEL_ESM=1 babel src -d lib --keep-file-extension",
"prepare:js": "babel src -d lib",
"prepare:clean": "rm -rf universal server test",
"prepare:mjs": "BABEL_ESM=1 babel src -d . --keep-file-extension",
"prepare:js": "babel src -d .",
"prepare:jsdoc": "jsdoc-md",
"prepare:prettier": "prettier 'lib/**/*.{mjs,js}' readme.md --write",
"test": "npm run test:eslint && npm run test:prettier && npm run test:size && npm run test:lib && NODE_ENV=production npm run test:lib",
"prepare:prettier": "prettier '{universal,server,test}/**/*.{mjs,js}' readme.md --write",
"test": "npm run test:eslint && npm run test:prettier && npm run test:tap && npm run test:size",
"test:eslint": "eslint . --ext mjs,js",
"test:prettier": "prettier '**/*.{json,yml,md}' -l",
"test:size": "size-limit",
"test:lib": "npm run test:lib:mjs && npm run test:lib:js",
"test:lib:mjs": "node --experimental-modules --no-warnings lib/test | tap-mocha-reporter spec",
"test:lib:js": "node lib/test | tap-mocha-reporter spec",
"prepublishOnly": "npm run prepare && npm test"
"test:tap": "tap test/*.{mjs,js}",
"prepublishOnly": "npm test"
},

@@ -116,3 +115,7 @@ "husky": {

"eslintIgnore": [
"lib",
"!.*",
"node_modules",
"/universal",
"/server",
"/test",
"tap-snapshots"

@@ -134,15 +137,10 @@ ],

"path": "size-limit-entries/server.mjs",
"limit": "3 KB",
"ignore": [
"object-assign",
"prop-types"
]
"limit": "2.5 KB"
},
{
"name": "Client",
"path": "size-limit-entries/client.mjs",
"limit": "2.5 KB",
"name": "Browser",
"path": "size-limit-entries/browser.mjs",
"limit": "2 KB",
"ignore": [
"object-assign",
"prop-types"
"object-assign"
]

@@ -149,0 +147,0 @@ }

829

readme.md

@@ -7,95 +7,176 @@ ![graphql-react logo](https://cdn.jsdelivr.net/gh/jaydenseric/graphql-react@0.1.0/graphql-react-logo.svg)

A lightweight GraphQL client for React; the first Relay and Apollo alternative with server side rendering.
A lightweight but powerful GraphQL client for React using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.
### Easy 🔥
- [Apollo comparison](#apollo-comparison)
- [Setup](#setup)
- [Usage](#usage)
- [Examples](#examples)
- [Support](#support)
- [API](#api)
- 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.
## Apollo comparison
### Smart 💡
### Bundle impact
- < 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 cache and can be server side rendered.
- Query multiple GraphQL APIs without stitching data.
#### graphql-react
## Setup
A < 2 KB bundle impact is guaranteed by [`size-limit`](https://npm.im/size-limit) tests. The impact is smaller than the bundle size badge suggests as the internal [`object-assign`](https://npm.im/object-assign) dependency is shared with [`react`](https://npm.im/react).
To install [`graphql-react`](https://npm.im/graphql-react) from [npm](https://npmjs.com) run:
| 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) |
```sh
npm install graphql-react
[Tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers will eliminate unused exports (perhaps [`reportCacheErrors`](#function-reportcacheerrors)).
#### Apollo
Several dependencies must be installed for a minimal Apollo project.
| 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) |
[Tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers will eliminate unused [`graphql`](https://npm.im/graphql) exports.
### Native ESM
#### graphql-react
Supports native ESM via `.mjs` files for Node.js in [`--experimental-modules`](https://nodejs.org/api/esm.html#esm_enabling) mode and [tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers like [webpack](https://webpack.js.org). For legacy environments CJS is provided via `.js` files.
#### Apollo
No support for native ESM, although they do provide faux ESM via package `module` fields for [tree shaking](https://developer.mozilla.org/docs/Glossary/Tree_shaking) bundlers like [webpack](https://webpack.js.org).
### Writing queries
#### graphql-react
Uses template strings:
```js
const QUERY = /* GraphQL */ `
{
viewer {
id
}
}
`
```
Create and provide a single [`GraphQL`](#class-graphql) client to hold the cache for all the queries in your app:
The optional `/* GraphQL */` comment signals the syntax for highlighters and linters.
```jsx
import { GraphQL, Provider } from 'graphql-react'
#### Apollo
const graphql = new GraphQL()
Uses template strings tagged with `gql` from [`graphql-tag`](https://npm.im/graphql-tag):
export const App = ({ children }) => (
<Provider value={graphql}>{children}</Provider>
)
```js
import gql from 'graphql-tag'
const QUERY = gql`
{
viewer {
id
}
}
`
```
[`GraphQL`](#class-graphql) accepts a single `cache` option for hydration after SSR; see [**_Example_**](#example).
### Cache strategy
Setup is simple because [`Query`](#function-query) components determine their own fetch options (such as the GraphQL endpoint URI). Multiple GraphQL APIs can be used in an app 🤯
#### graphql-react
## Usage
The [`GraphQL`](#class-graphql) client has no GraphQL API specific config; [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) options are determined on demand at the component level. Multiple GraphQL APIs can be queried!
Use the [`Query`](#function-query) component for queries and mutations throughout your app:
GraphQL operations are cached under hashes of their [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) options. Multiple operations with the same hash share the same loading status and cache value.
```jsx
import { Query } from 'graphql-react'
[`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API), HTTP, parse and GraphQL errors can be cached, and therefore server side rendered and transported to the client for hydration and initial render.
export const PokemonViewer = ({ name }) => (
<Query
loadOnMount
loadOnReset
fetchOptionsOverride={options => {
options.url = 'https://graphql-pokemon.now.sh'
}}
operation={{
variables: { name },
query: /* GraphQL */ `
query pokemon($name: String!) {
pokemon(name: $name) {
number
image
}
}
`
}}
>
{({ loading, data }) =>
data ? (
<figure>
<img src={data.pokemon.image} alt={name} />
<figcaption>
Pokémon #{data.pokemon.number}: {name}
</figcaption>
</figure>
) : loading ? (
<p>Loading…</p>
) : (
<p>Error!</p>
)
}
</Query>
)
#### Apollo
Apollo Client is configured for one GraphQL API per app.
GraphQL operation data is deconstructed based upon `id` and `__typename` fields into a “[normalized](https://apollographql.com/docs/react/advanced/caching#normalization)” cache. These fields must be queried even if they aren’t used in components.
[Errors aren’t cached](https://github.com/apollographql/apollo-client/issues/3897#issuecomment-432982170), and therefore can’t be server side rendered and transported to the client for hydration and initial render.
### Stale cache
#### graphql-react
By default, cache is refreshed for mounting components.
GraphQL operations can optionally refresh all cache except their own fresh cache; handy for mutations.
#### Apollo
By default, cache isn’t refreshed for mounting components.
GraphQL mutations only update the cache with the contents of their payload. The prescribed approach is to try to manually update other normalized cache after mutations using complicated and often buggy APIs. Resetting all cache is possible, but it also wipes the result of the last operation.
### File uploads
#### graphql-react
Out of the box file uploads compliant with the [GraphQL multipart request spec](https://github.com/jaydenseric/graphql-multipart-request-spec) (authored by [@jaydenseric](https://github.com/jaydenseric)) which is supported by popular GraphQL servers including [Apollo Server](https://apollographql.com/docs/apollo-server). File input values can be used as query or mutation arguments.
#### Apollo
Supports file uploads if you drop [`apollo-boost`](https://npm.im/apollo-boost) and manually setup Apollo Client with [`apollo-upload-client`](https://npm.im/apollo-upload-client) (also by [@jaydenseric](https://github.com/jaydenseric)).
### Subscriptions
#### graphql-react
Not supported yet.
#### Apollo
Supported.
### TypeScript
#### graphql-react
Written in ECMAScript; no types are exported.
#### Apollo
Written in TypeScript; types are exported.
### Next.js integration
#### graphql-react
Has [an official example](https://github.com/zeit/next.js/tree/canary/examples/with-graphql-react) using [`next-graphql-react`](https://npm.im/next-graphql-react), which provides easy an easy to install [`App`](https://nextjs.org/docs/#custom-app) decorator and [plugin](https://nextjs.org/docs/#custom-configuration) to enable server side rendered GraphQL queries.
#### Apollo
Has [an official example](https://github.com/zeit/next.js/tree/canary/examples/with-apollo), but it consists of over 100 lines of complicated copy-paste boilerplate code across multiple files.
## Setup
### Next.js setup
See the [`next-graphql-react`](https://npm.im/next-graphql-react) setup instructions.
### Vanilla React setup
To install [`graphql-react`](https://npm.im/graphql-react) from [npm](https://npmjs.com) run:
```sh
npm install graphql-react
```
To make queries and mutations without a component, use the [`GraphQL` instance method `query`](#graphql-instance-method-query).
Create a single [`GraphQL`](#class-graphql) instance and use [`GraphQLContext`](#constant-graphqlcontext) to provide it for your app.
For server side rendering see [`ssr()`](#function-ssr).
## Usage
Use the [`useGraphQL`](#function-usegraphql) React hook in your components to make queries and mutations, or use the [`GraphQL` instance method `operate`](#graphql-instance-method-operate) directly.
## Examples

@@ -115,2 +196,3 @@

- [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API)
- [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData)

@@ -122,4 +204,8 @@ ## API

- [class GraphQL](#class-graphql)
- [See](#see)
- [Examples](#examples)
- [GraphQL instance method query](#graphql-instance-method-query)
- [GraphQL instance method off](#graphql-instance-method-off)
- [GraphQL instance method on](#graphql-instance-method-on)
- [See](#see-1)
- [GraphQL instance method operate](#graphql-instance-method-operate)
- [GraphQL instance method reset](#graphql-instance-method-reset)

@@ -129,38 +215,48 @@ - [Examples](#examples-1)

- [Examples](#examples-2)
- [GraphQL instance property logErrors](#graphql-instance-property-logerrors)
- [function Consumer](#function-consumer)
- [GraphQL instance property operations](#graphql-instance-property-operations)
- [function reportCacheErrors](#function-reportcacheerrors)
- [Examples](#examples-3)
- [function Provider](#function-provider)
- [function ssr](#function-ssr)
- [See](#see-2)
- [Examples](#examples-4)
- [function Query](#function-query)
- [function useGraphQL](#function-usegraphql)
- [See](#see-3)
- [Examples](#examples-5)
- [function ssr](#function-ssr)
- [See](#see)
- [constant GraphQLContext](#constant-graphqlcontext)
- [See](#see-4)
- [Examples](#examples-6)
- [type ActiveQuery](#type-activequery)
- [type ConsumerRender](#type-consumerrender)
- [type GraphQLCache](#type-graphqlcache)
- [See](#see-5)
- [type GraphQLCacheKey](#type-graphqlcachekey)
- [type GraphQLCacheValue](#type-graphqlcachevalue)
- [type GraphQLFetchOptions](#type-graphqlfetchoptions)
- [See](#see-6)
- [type GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)
- [See](#see-7)
- [Examples](#examples-7)
- [type FetchOptions](#type-fetchoptions)
- [type FetchOptionsOverride](#type-fetchoptionsoverride)
- [Examples](#examples-8)
- [type GraphQLOperation](#type-graphqloperation)
- [See](#see-8)
- [type GraphQLOperationLoading](#type-graphqloperationloading)
- [See](#see-9)
- [type GraphQLOperationStatus](#type-graphqloperationstatus)
- [See](#see-10)
- [type HttpError](#type-httperror)
- [type QueryRender](#type-queryrender)
- [Examples](#examples-9)
- [type ReactNode](#type-reactnode)
- [type RequestCache](#type-requestcache)
### class GraphQL
A lightweight GraphQL client that caches requests.
A lightweight GraphQL client that caches queries and mutations.
| Parameter | Type | Description |
| :------------------ | :------------------------------------------ | :------------------------------------------------------------------ |
| `options` | [Object](https://mdn.io/object)? = `{}` | Options. |
| `options.cache` | [Object](https://mdn.io/object)? = `{}` | Cache to import; usually from a server side render. |
| `options.logErrors` | [boolean](https://mdn.io/boolean)? = `true` | Should GraphQL request errors be console logged for easy debugging. |
| Parameter | Type | Description |
| :-------------- | :----------------------------------------- | :-------------------------------------------------- |
| `options` | Object? = `{}` | Options. |
| `options.cache` | [GraphQLCache](#type-graphqlcache)? = `{}` | Cache to import; usually from a server side render. |
#### See
- [`reportCacheErrors`](#function-reportcacheerrors) to setup error reporting.
#### Examples
_Constructing a new GraphQL client._
_Construct a GraphQL client._

@@ -173,15 +269,37 @@ > ```js

#### GraphQL instance method query
#### GraphQL instance method off
Queries a GraphQL server.
Removes an event listener.
| Parameter | Type | Description |
| :----------------------------- | :-------------------------------------------------- | :--------------------------------------------------------------------------------------- |
| `options` | [Object](https://mdn.io/object) | Options. |
| `options.operation` | [GraphQLOperation](#type-graphqloperation) | GraphQL operation. |
| `options.fetchOptionsOverride` | [FetchOptionsOverride](#type-fetchoptionsoverride)? | Overrides default GraphQL request [fetch options](#type-fetchoptions). |
| `options.resetOnLoad` | [boolean](https://mdn.io/boolean)? = `false` | Should the [GraphQL cache](#graphql-instance-property-cache) reset when the query loads. |
| Parameter | Type | Description |
| :-------- | :------- | :------------- |
| `type` | String | Event type. |
| `handler` | function | Event handler. |
**Returns:** [ActiveQuery](#type-activequery) — Loading query details.
#### GraphQL instance method on
Adds an event listener.
| Parameter | Type | Description |
| :-------- | :------- | :------------- |
| `type` | String | Event type. |
| `handler` | function | Event handler. |
##### See
- [`reportCacheErrors`](#function-reportcacheerrors) can be used with this to setup error reporting.
#### GraphQL instance method operate
Loads or reuses an already loading GraphQL operation.
| 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.resetOnLoad` | boolean? = `false` | Should the [GraphQL cache](#graphql-instance-property-cache) reset when the operation loads. |
**Returns:** [GraphQLOperationLoading](#type-graphqloperationloading) — Loading GraphQL operation details.
#### GraphQL instance method reset

@@ -191,9 +309,9 @@

| Parameter | Type | Description |
| :----------------------- | :------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `exceptFetchOptionsHash` | [string](https://mdn.io/string)? | A [fetch options](#type-fetchoptions) hash for cache to exempt from deletion. Useful for resetting cache after a mutation, preserving the mutation cache. |
| 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. |
##### Examples
_Resetting the GraphQL cache._
_Resetting the [GraphQL cache](#graphql-instance-property-cache)._

@@ -206,4 +324,6 @@ > ```js

GraphQL [request cache](#type-requestcache) map, keyed by [fetch options](#type-fetchoptions) hashes.
Cache of loaded GraphQL operations. You probably don’t need to interact with this unless you’re implementing a server side rendering framework.
**Type:** [GraphQLCache](#type-graphqlcache)
##### Examples

@@ -217,179 +337,65 @@

#### GraphQL instance property logErrors
_Example cache JSON._
Should GraphQL request errors be logged. May be toggled at runtime.
> ```json
> {
> "a1bCd2": {
> "data": {
> "viewer": {
> "name": "Jayden Seric"
> }
> }
> }
> }
> ```
### function Consumer
#### GraphQL instance property operations
A React component that gets the [`GraphQL`](#class-graphql) instance from context.
A map of loading GraphQL operations. You probably don’t need to interact with this unless you’re implementing a server side rendering framework.
| Parameter | Type | Description |
| :--------- | :------------------------------------- | :-------------------------------------------------------------------- |
| `children` | [ConsumerRender](#type-consumerrender) | Render function that receives a [`GraphQL`](#class-graphql) instance. |
**Type:** Object&lt;[GraphQLCacheKey](#type-graphqlcachekey), Promise&lt;[GraphQLCacheValue](#type-graphqlcachevalue)>>
**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
---
#### Examples
### function reportCacheErrors
_A button component that resets the [GraphQL cache](#graphql-instance-property-cache)._
A [`GraphQL`](#class-graphql) `cache` event handler that reports [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API), HTTP, parse and GraphQL errors via `console.log()`. In a browser environment the grouped error details are expandable.
> ```jsx
> import { Consumer } from 'graphql-react'
>
> const ResetCacheButton = () => (
> <Consumer>
> {graphql => <button onClick={graphql.reset}>Reset cache</button>}
> </Consumer>
> )
> ```
| 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). |
### function Provider
A React component that provides a [`GraphQL`](#class-graphql) instance in context for nested [`Consumer`](#function-consumer) components to use.
| Parameter | Type | Description |
| :--------- | :--------------------------- | :-------------------------------------- |
| `value` | [GraphQL](#class-graphql) | A [`GraphQL`](#class-graphql) instance. |
| `children` | [ReactNode](#type-reactnode) | A React node. |
**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
#### Examples
_Using the `Provider` component for a page._
_[`GraphQL`](#class-graphql) initialized to report cache errors._
> ```jsx
> import { GraphQL, Provider } from 'graphql-react'
> ```js
> import { GraphQL, reportCacheErrors } from 'graphql-react'
>
> const graphql = new GraphQL()
>
> const Page = () => (
> <Provider value={graphql}>Use Consumer or Query components…</Provider>
> )
> graphql.on('cache', reportCacheErrors)
> ```
### function Query
---
A React component to manage a GraphQL query or mutation.
### function ssr
| Parameter | Type | Description |
| :--------------------------- | :-------------------------------------------------- | :----------------------------------------------------------------------------------------- |
| `props` | [Object](https://mdn.io/object) | Component props. |
| `props.operation` | [GraphQLOperation](#type-graphqloperation) | GraphQL operation. |
| `props.fetchOptionsOverride` | [FetchOptionsOverride](#type-fetchoptionsoverride)? | Overrides default GraphQL request [fetch options](#type-fetchoptions). |
| `props.loadOnMount` | [boolean](https://mdn.io/boolean)? = `false` | Should the query load when the component mounts. |
| `props.loadOnReset` | [boolean](https://mdn.io/boolean)? = `false` | Should the query load when the [GraphQL cache](#graphql-instance-property-cache) is reset. |
| `props.resetOnLoad` | [boolean](https://mdn.io/boolean)? = `false` | Should the [GraphQL cache](#graphql-instance-property-cache) reset when the query loads. |
| `props.children` | [QueryRender](#type-queryrender) | Renders the query status. |
Asynchronously server side renders a [React node](#type-reactnode), preloading all GraphQL queries set to `loadOnMount`. After resolving, cache can be exported from the [`GraphQL` instance property `cache`](#graphql-instance-property-cache) for serialization (usually to JSON) and transport to the client for hydration via the [`GraphQL` constructor parameter `options.cache`](#class-graphql).
**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
Be sure to globally polyfill [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API).
#### Examples
| 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). |
_A query to display a user profile._
**Returns:** Promise&lt;string> — Promise resolving the rendered HTML string.
> ```jsx
> import { Query } from 'graphql-react'
>
> const Profile = ({ userId }) => (
> <Query
> loadOnMount
> loadOnReset
> fetchOptionsOverride={options => {
> options.url = 'https://api.example.com/graphql'
> }}
> operation={
> variables: { userId },
> query: `
> query user($userId: ID!) {
> user(userId: $userId) {
> name
> }
> }
> `
> }
> >
> {({
> load,
> loading,
> fetchError,
> httpError,
> parseError,
> graphQLErrors,
> data
> }) => (
> <article>
> <button onClick={load}>Reload</button>
> {loading && <span>Loading…</span>}
> {(fetchError || httpError || parseError || graphQLErrors) && (
> <strong>Error!</strong>
> )}
> {data && <h1>{data.user.name}</h1>}
> </article>
> )}
> </Query>
> )
> ```
_A mutation to clap an article._
> ```jsx
> import { Query } from 'graphql-react'
>
> const ClapArticleButton = ({ articleId }) => (
> <Query
> resetOnLoad
> fetchOptionsOverride={options => {
> options.url = 'https://api.example.com/graphql'
> }}
> operation={
> variables: { articleId },
> query: `
> mutation clapArticle($articleId: ID!) {
> clapArticle(articleId: $articleId) {
> clapCount
> }
> }
> `
> }
> >
> {({
> load,
> loading,
> fetchError,
> httpError,
> parseError,
> graphQLErrors,
> data
> }) => (
> <aside>
> <button onClick={load} disabled={loading}>
> Clap
> </button>
> {(fetchError || httpError || parseError || graphQLErrors) && (
> <strong>Error!</strong>
> )}
> {data && <p>Clapped {data.clapArticle.clapCount} times.</p>}
> </aside>
> )}
> </Query>
> )
> ```
### 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.
- [`next-graphql-react`](https://npm.im/next-graphql-react) to use this API in a [Next.js](https://nextjs.org) project.

@@ -401,4 +407,4 @@ #### Examples

> ```jsx
> import { GraphQL, Provider } from 'graphql-react'
> import { ssr } from 'graphql-react/lib/ssr'
> import { GraphQL, GraphQLContext } from 'graphql-react'
> import { ssr } from 'graphql-react/server'
> import ReactDOMServer from 'react-dom/server'

@@ -410,5 +416,5 @@ > import { App } from './components'

> const page = (
> <Provider value={graphql}>
> <GraphQLContext.Provider value={graphql}>
> <App />
> </Provider>
> </GraphQLContext.Provider>
> )

@@ -424,4 +430,4 @@ > const html = await ssr(graphql, page, ReactDOMServer.renderToString)

> ```jsx
> import { GraphQL, Provider } from 'graphql-react'
> import { ssr } from 'graphql-react/lib/ssr'
> import { GraphQL, GraphQLContext } from 'graphql-react'
> import { ssr } from 'graphql-react/server'
> import { App } from './components'

@@ -432,5 +438,5 @@ >

> const page = (
> <Provider value={graphql}>
> <GraphQLContext.Provider value={graphql}>
> <App />
> </Provider>
> </GraphQLContext.Provider>
> )

@@ -441,61 +447,171 @@ > return ssr(graphql, page)

### type ActiveQuery
---
Loading query details.
### function useGraphQL
**Type:** [Object](https://mdn.io/object)
A [React hook](https://reactjs.org/docs/hooks-intro) to manage a GraphQL operation in a component.
| Property | Type | Description |
| :----------------- | :----------------------------------------------------------------------- | :----------------------------------------------------------------- |
| `fetchOptionsHash` | [string](https://mdn.io/string) | [fetch options](#type-fetchoptions) hash. |
| `cache` | [RequestCache](#type-requestcache)? | Results from the last identical request. |
| `request` | [Promise](https://mdn.io/promise)&lt;[RequestCache](#type-requestcache)> | A promise that resolves fresh [request cache](#type-requestcache). |
| Parameter | Type | Description |
| :----------------------------- | :---------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------ |
| `options` | Object | Options. |
| `options.fetchOptionsOverride` | [GraphQLFetchOptionsOverride](#type-graphqlfetchoptionsoverride)? | Overrides default [`fetch` options](#type-graphqlfetchoptions) for the GraphQL operation. |
| `options.loadOnMount` | boolean? = `true` | Should the operation load when the component mounts. |
| `options.loadOnReset` | boolean? = `true` | Should the operation load when its [GraphQL cache](#graphql-instance-property-cache) [value](#type-graphqlcachevalue) is reset. |
| `options.resetOnLoad` | boolean? = `false` | Should all other [GraphQL cache](#graphql-instance-property-cache) reset when the operation loads. |
| `options.operation` | [GraphQLOperation](#type-graphqloperation) | GraphQL operation. |
### type ConsumerRender
**Returns:** [GraphQLOperationStatus](#type-graphqloperationstatus) — GraphQL operation status.
Renders a [`GraphQL`](#class-graphql) consumer.
#### See
**Type:** [function](https://mdn.io/function)
- [`GraphQLContext`](#constant-graphqlcontext) `Provider`; required for [`useGraphQL`](#function-usegraphql) to work.
| Parameter | Type | Description |
| :-------- | :------------------------ | :------------------------------------ |
| `graphql` | [GraphQL](#class-graphql) | [`GraphQL`](#class-graphql) instance. |
#### Examples
**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
_A component that displays a Pokémon image._
> ```jsx
> import { useGraphQL } from 'graphql-react'
>
> const PokemonImage = ({ name }) => {
> const { loading, cacheValue = {} } = useGraphQL({
> fetchOptionsOverride(options) {
> options.url = 'https://graphql-pokemon.now.sh'
> },
> operation: {
> query: `{ pokemon(name: "${name}") { image } }`
> }
> })
>
> return cacheValue.data ? (
> <img src={cacheValue.data.pokemon.image} alt={name} />
> ) : loading ? (
> 'Loading…'
> ) : (
> 'Error!'
> )
> }
> ```
---
### constant GraphQLContext
[React context object](https://reactjs.org/docs/context#api) for a [`GraphQL`](#class-graphql) instance.
**Type:** Object
| 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). |
#### See
- [`useGraphQL`](#function-usegraphql) React hook requires a [`GraphQLContext`](#constant-graphqlcontext) `Provider` to work.
#### Examples
_A button that resets the [GraphQL cache](#graphql-instance-property-cache)._
_Provide a [`GraphQL`](#class-graphql) instance for an app._
> ```jsx
> graphql => <button onClick={graphql.reset}>Reset cache</button>
> import { GraphQL, GraphQLContext } from 'graphql-react'
>
> const graphql = new GraphQL()
>
> const App = ({ children }) => (
> <GraphQLContext.Provider value={graphql}>
> {children}
> </GraphQLContext.Provider>
> )
> ```
### type FetchOptions
_A button component that resets the [GraphQL cache](#graphql-instance-property-cache)._
[Polyfillable fetch options](https://github.github.io/fetch/#options) for a GraphQL request.
> ```jsx
> import { GraphQLContext } from 'graphql-react'
>
> const ResetCacheButton = () => (
> <GraphQLContext.Consumer>
> {graphql => <button onClick={graphql.reset}>Reset cache</button>}
> </GraphQLContext.Consumer>
> )
> ```
**Type:** [Object](https://mdn.io/object)
---
| Property | Type | Description |
| :------------ | :------------------------------------------ | :------------------------------- |
| `url` | [string](https://mdn.io/string) | A GraphQL API URL. |
| `body` | [string](https://mdn.io/string) \| FormData | HTTP request body. |
| `headers` | [Object](https://mdn.io/object) | HTTP request headers. |
| `credentials` | [string](https://mdn.io/string)? | Authentication credentials mode. |
### type GraphQLCache
### type FetchOptionsOverride
A [GraphQL cache](#graphql-instance-property-cache) map of GraphQL operation results.
Overrides default GraphQL request [fetch options](#type-fetchoptions). Modify the provided options object without a return.
**Type:** Object&lt;[GraphQLCacheKey](#type-graphqlcachekey), [GraphQLCacheValue](#type-graphqlcachevalue)>
**Type:** [function](https://mdn.io/function)
#### See
| Parameter | Type | Description |
| :------------- | :------------------------------------------ | :------------------------------------- |
| `fetchOptions` | [FetchOptions](#type-fetchoptions) | Default GraphQL request fetch options. |
| `operation` | [GraphQLOperation](#type-graphqloperation)? | GraphQL operation. |
- [`GraphQL`](#class-graphql) constructor accepts this type in `options.cache`.
- [`GraphQL` instance property `cache`](#graphql-instance-property-cache) is this type.
---
### type GraphQLCacheKey
A [GraphQL cache](#type-graphqlcache) key, derived from a hash of the [`fetch` options](#type-graphqlfetchoptions) of the GraphQL operation that populated the [value](#type-graphqlcachevalue).
**Type:** string
---
### type GraphQLCacheValue
JSON serializable GraphQL operation result that includes errors and data.
**Type:** Object
| 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. |
---
### type GraphQLFetchOptions
GraphQL API URL and [polyfillable `fetch` options](https://github.github.io/fetch/#options). The `url` property gets extracted and the rest are used as [`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) options.
**Type:** Object
| Property | Type | Description |
| :------------ | :----------------- | :------------------------------- |
| `url` | string | GraphQL API URL. |
| `body` | string \| FormData | HTTP request body. |
| `headers` | Object | HTTP request headers. |
| `credentials` | string? | Authentication credentials mode. |
#### See
- [`GraphQLFetchOptionsOverride` functions](#type-graphqlfetchoptionsoverride) accept this type.
---
### type GraphQLFetchOptionsOverride
Overrides default [GraphQL `fetch` options](#type-graphqlfetchoptions). Mutate the provided options object; there is no need to return it.
**Type:** function
| 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). |
#### See
- [`GraphQL` instance method `operate`](#graphql-instance-method-operate) accepts this type in `options.fetchOptionsOverride`.
- [`useGraphQL`](#function-usegraphql) React hook accepts this type in `options.fetchOptionsOverride`.
#### Examples
_Setting [fetch options](#type-fetchoptions) for an example API._
_Setting [GraphQL `fetch` options](#type-graphqlfetchoptions) for an imaginary API._

@@ -509,2 +625,4 @@ > ```js

---
### type GraphQLOperation

@@ -514,81 +632,70 @@

**Type:** [Object](https://mdn.io/object)
**Type:** Object
| Property | Type | Description |
| :---------- | :------------------------------ | :---------------------------- |
| `query` | [string](https://mdn.io/string) | GraphQL queries or mutations. |
| `variables` | [Object](https://mdn.io/object) | Variables used by the query. |
| Property | Type | Description |
| :---------- | :----- | :----------------------------- |
| `query` | string | GraphQL queries/mutations. |
| `variables` | Object | Variables used in the `query`. |
### type HttpError
#### See
Fetch HTTP error.
- [`GraphQL` instance method `operate`](#graphql-instance-method-operate) accepts this type in `options.operation`.
- [`useGraphQL`](#function-usegraphql) React hook accepts this type in `options.operation`.
**Type:** [Object](https://mdn.io/object)
---
| Property | Type | Description |
| :----------- | :------------------------------ | :---------------- |
| `status` | [number](https://mdn.io/number) | HTTP status code. |
| `statusText` | [string](https://mdn.io/string) | HTTP status text. |
### type GraphQLOperationLoading
### type QueryRender
A loading GraphQL operation.
Renders the status of a query or mutation.
**Type:** Object
**Type:** [function](https://mdn.io/function)
| 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). |
| Parameter | Type | Description |
| :-------------- | :----------------------------------------------------------------- | :----------------------------------------- |
| `load` | [function](https://mdn.io/function) | Loads the query on demand, updating cache. |
| `loading` | [boolean](https://mdn.io/boolean) | Is the query loading. |
| `fetchError` | [string](https://mdn.io/string)? | Fetch error message. |
| `httpError` | [HttpError](#type-httperror)? | Fetch response HTTP error. |
| `parseError` | [string](https://mdn.io/string)? | Parse error message. |
| `graphQLErrors` | [Array](https://mdn.io/array)&lt;[Object](https://mdn.io/object)>? | GraphQL response errors. |
| `data` | [Object](https://mdn.io/object)? | GraphQL response data. |
#### See
**Returns:** [ReactNode](#type-reactnode) — React virtual DOM node.
- [`GraphQL` instance method `operate`](#graphql-instance-method-operate) returns this type.
#### Examples
---
_Rendering a user profile query._
### type GraphQLOperationStatus
> ```jsx
> ;({
> load,
> loading,
> fetchError,
> httpError,
> parseError,
> graphQLErrors,
> data
> }) => (
> <aside>
> <button onClick={load}>Reload</button>
> {loading && <span>Loading…</span>}
> {(fetchError || httpError || parseError || graphQLErrors) && (
> <strong>Error!</strong>
> )}
> {data && <h1>{data.user.name}</h1>}
> </aside>
> )
> ```
The status of a GraphQL operation.
### type ReactNode
**Type:** Object
React virtual DOM node; anything React can render.
| 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). |
**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)>
#### See
### type RequestCache
- [`useGraphQL`](#function-usegraphql) React hook returns this type.
JSON serializable result of a GraphQL request (including all errors and data) suitable for caching.
---
**Type:** [Object](https://mdn.io/object)
### type HttpError
| Property | Type | Description |
| :-------------- | :----------------------------------------------------------------- | :------------------------- |
| `fetchError` | [string](https://mdn.io/string)? | Fetch error message. |
| `httpError` | [HttpError](#type-httperror)? | Fetch response HTTP error. |
| `parseError` | [string](https://mdn.io/string)? | Parse error message. |
| `graphQLErrors` | [Array](https://mdn.io/array)&lt;[Object](https://mdn.io/object)>? | GraphQL response errors. |
| `data` | [Object](https://mdn.io/object)? | GraphQL response data. |
[`fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) HTTP error.
**Type:** Object
| Property | Type | Description |
| :----------- | :----- | :---------------- |
| `status` | number | HTTP status code. |
| `statusText` | string | HTTP status text. |
---
### type ReactNode
A React virtual DOM node; anything that can be rendered.
**Type:** undefined | null | boolean | number | string | React.Element | Array&lt;[ReactNode](#type-reactnode)>
lib/GraphQL.js
lib/GraphQL.mjs
lib/GraphQLContext.js
lib/GraphQLContext.mjs
lib/graphqlFetchOptions.js
lib/graphqlFetchOptions.mjs
lib/GraphQLQuery.js
lib/GraphQLQuery.mjs
lib/hashObject.js
lib/hashObject.mjs
lib/index.js
lib/index.mjs
lib/Query.js
lib/Query.mjs
lib/ssr.js
lib/ssr.mjs
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc