@apollo/react-components
Advanced tools
@apollo/react-components - npm Package Compare versions
Comparing version 0.1.0-beta.4 to 0.1.0-beta.5
@@ -7,3 +7,3 @@ /// <reference types="react" /> | ||
| export declare namespace Mutation { | ||
| var propTypes: { | ||
| const propTypes: { | ||
| mutation: PropTypes.Validator<object>; | ||
@@ -10,0 +10,0 @@ variables: PropTypes.Requireable<object>; |
@@ -7,17 +7,19 @@ import { useMutation } from '@apollo/react-hooks'; | ||
| } | ||
| Mutation.propTypes = { | ||
| mutation: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| optimisticResponse: PropTypes.object, | ||
| refetchQueries: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), | ||
| PropTypes.func | ||
| ]), | ||
| awaitRefetchQueries: PropTypes.bool, | ||
| update: PropTypes.func, | ||
| children: PropTypes.func.isRequired, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| fetchPolicy: PropTypes.string | ||
| }; | ||
| (function (Mutation) { | ||
| Mutation.propTypes = { | ||
| mutation: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| optimisticResponse: PropTypes.object, | ||
| refetchQueries: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), | ||
| PropTypes.func | ||
| ]), | ||
| awaitRefetchQueries: PropTypes.bool, | ||
| update: PropTypes.func, | ||
| children: PropTypes.func.isRequired, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| fetchPolicy: PropTypes.string, | ||
| }; | ||
| })(Mutation || (Mutation = {})); | ||
| //# sourceMappingURL=Mutation.js.map |
@@ -7,3 +7,3 @@ /// <reference types="react" /> | ||
| export declare namespace Query { | ||
| var propTypes: { | ||
| const propTypes: { | ||
| client: PropTypes.Requireable<object>; | ||
@@ -10,0 +10,0 @@ children: PropTypes.Validator<(...args: any[]) => any>; |
@@ -7,16 +7,18 @@ import { useQuery } from '@apollo/react-hooks'; | ||
| } | ||
| Query.propTypes = { | ||
| client: PropTypes.object, | ||
| children: PropTypes.func.isRequired, | ||
| fetchPolicy: PropTypes.string, | ||
| notifyOnNetworkStatusChange: PropTypes.bool, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| pollInterval: PropTypes.number, | ||
| query: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| ssr: PropTypes.bool, | ||
| partialRefetch: PropTypes.bool, | ||
| returnPartialData: PropTypes.bool | ||
| }; | ||
| (function (Query) { | ||
| Query.propTypes = { | ||
| client: PropTypes.object, | ||
| children: PropTypes.func.isRequired, | ||
| fetchPolicy: PropTypes.string, | ||
| notifyOnNetworkStatusChange: PropTypes.bool, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| pollInterval: PropTypes.number, | ||
| query: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| ssr: PropTypes.bool, | ||
| partialRefetch: PropTypes.bool, | ||
| returnPartialData: PropTypes.bool, | ||
| }; | ||
| })(Query || (Query = {})); | ||
| //# sourceMappingURL=Query.js.map |
@@ -1,832 +0,83 @@ | ||
| 'use strict'; | ||
| exports.__esModule = true; | ||
| exports.Mutation = Mutation; | ||
| exports.Query = Query; | ||
| exports.Subscription = Subscription; | ||
| exports.renderToStringWithData = exports.getMarkupFromTree = exports.getDataFromTree = exports.resetApolloContext = exports.getApolloContext = exports.ApolloProvider = exports.ApolloConsumer = void 0; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var _reactCommon = require("@apollo/react-common"); | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
| exports.ApolloConsumer = _reactCommon.ApolloConsumer; | ||
| exports.ApolloProvider = _reactCommon.ApolloProvider; | ||
| exports.getApolloContext = _reactCommon.getApolloContext; | ||
| exports.resetApolloContext = _reactCommon.resetApolloContext; | ||
| var reactCommon = require('@apollo/react-common'); | ||
| var tslib = require('tslib'); | ||
| var React = require('react'); | ||
| var React__default = _interopDefault(React); | ||
| var apolloClient = require('apollo-client'); | ||
| var tsInvariant = require('ts-invariant'); | ||
| require('fast-json-stable-stringify'); | ||
| var PropTypes = _interopDefault(require('prop-types')); | ||
| var _reactHooks = require("@apollo/react-hooks"); | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * | ||
| */ | ||
| exports.getDataFromTree = _reactHooks.getDataFromTree; | ||
| exports.getMarkupFromTree = _reactHooks.getMarkupFromTree; | ||
| exports.renderToStringWithData = _reactHooks.renderToStringWithData; | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * | ||
| */ | ||
| var _propTypes = _interopRequireDefault(require("prop-types")); | ||
| function isEqual(a, b) { | ||
| if (a === b) { | ||
| return true; | ||
| } | ||
| if (a instanceof Date && b instanceof Date) { | ||
| return a.getTime() === b.getTime(); | ||
| } | ||
| if (a != null && | ||
| typeof a === 'object' && | ||
| b != null && | ||
| typeof b === 'object') { | ||
| for (var key in a) { | ||
| if (Object.prototype.hasOwnProperty.call(a, key)) { | ||
| if (!Object.prototype.hasOwnProperty.call(b, key)) { | ||
| return false; | ||
| } | ||
| if (!isEqual(a[key], b[key])) { | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| for (var key in b) { | ||
| if (Object.prototype.hasOwnProperty.call(b, key) && | ||
| !Object.prototype.hasOwnProperty.call(a, key)) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| var OperationData = (function () { | ||
| function OperationData(options, context) { | ||
| this._isMounted = true; | ||
| this._options = {}; | ||
| this._previousOptions = {}; | ||
| this._context = {}; | ||
| this._options = options || {}; | ||
| this._context = context || {}; | ||
| } | ||
| Object.defineProperty(OperationData.prototype, "isMounted", { | ||
| get: function () { | ||
| return this._isMounted; | ||
| }, | ||
| set: function (mounted) { | ||
| this._isMounted = mounted; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "options", { | ||
| get: function () { | ||
| return this._options; | ||
| }, | ||
| set: function (newOptions) { | ||
| if (!isEqual(this.options, newOptions)) { | ||
| this.previousOptions = this.options; | ||
| } | ||
| this._options = newOptions; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "previousOptions", { | ||
| get: function () { | ||
| return this._previousOptions; | ||
| }, | ||
| set: function (newOptions) { | ||
| this._previousOptions = newOptions; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "context", { | ||
| get: function () { | ||
| return this._context; | ||
| }, | ||
| set: function (newContext) { | ||
| this._context = newContext; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "client", { | ||
| get: function () { | ||
| return this._client; | ||
| }, | ||
| set: function (newClient) { | ||
| this._client = newClient; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| OperationData.prototype.unmount = function () { | ||
| this.isMounted = false; | ||
| }; | ||
| OperationData.prototype.refreshClient = function () { | ||
| var client = (this.options && this.options.client) || | ||
| (this.context && this.context.client); | ||
| process.env.NODE_ENV === "production" ? tsInvariant.invariant(!!client) : process.env.NODE_ENV === "production" ? tsInvariant.invariant(!!client) : tsInvariant.invariant(!!client, 'Could not find "client" in the context or passed in as an option. ' + | ||
| 'Wrap the root component in an <ApolloProvider>, or pass an ' + | ||
| 'ApolloClient instance in via options.'); | ||
| var isNew = false; | ||
| if (client !== this.client) { | ||
| isNew = true; | ||
| this.client = client; | ||
| this.cleanup(); | ||
| } | ||
| return { | ||
| client: this.client, | ||
| isNew: isNew | ||
| }; | ||
| }; | ||
| OperationData.prototype.verifyDocumentType = function (document, type) { | ||
| var operation = reactCommon.parser(document); | ||
| var requiredOperationName = reactCommon.operationName(type); | ||
| var usedOperationName = reactCommon.operationName(operation.type); | ||
| process.env.NODE_ENV === "production" ? tsInvariant.invariant(operation.type === type) : process.env.NODE_ENV === "production" ? tsInvariant.invariant(operation.type === type) : tsInvariant.invariant(operation.type === type, "Running a " + requiredOperationName + " requires a graphql " + | ||
| (requiredOperationName + ", but a " + usedOperationName + " was used instead.")); | ||
| }; | ||
| return OperationData; | ||
| }()); | ||
| var QueryData = (function (_super) { | ||
| tslib.__extends(QueryData, _super); | ||
| function QueryData(_a) { | ||
| var options = _a.options, context = _a.context, forceUpdate = _a.forceUpdate; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.previousData = {}; | ||
| _this.currentObservable = {}; | ||
| _this.forceUpdate = forceUpdate; | ||
| return _this; | ||
| } | ||
| QueryData.prototype.execute = function () { | ||
| var _this = this; | ||
| this.refreshClient(); | ||
| var _a = this.options, skip = _a.skip, query = _a.query; | ||
| if (skip || query !== this.previousData.query) { | ||
| this.removeQuerySubscription(); | ||
| this.previousData.query = query; | ||
| } | ||
| this.updateObservableQuery(); | ||
| if (!skip) { | ||
| this.startQuerySubscription(); | ||
| } | ||
| var finish = function () { return _this.getQueryResult(); }; | ||
| if (this.context && this.context.renderPromises) { | ||
| var result = this.context.renderPromises.addQueryPromise(this, finish); | ||
| return result || { loading: true, networkStatus: apolloClient.NetworkStatus.loading }; | ||
| } | ||
| return finish(); | ||
| }; | ||
| QueryData.prototype.fetchData = function () { | ||
| if (this.options.skip) | ||
| return false; | ||
| var _a = this.options, children = _a.children, ssr = _a.ssr, displayName = _a.displayName, skip = _a.skip, onCompleted = _a.onCompleted, onError = _a.onError, partialRefetch = _a.partialRefetch, opts = tslib.__rest(_a, ["children", "ssr", "displayName", "skip", "onCompleted", "onError", "partialRefetch"]); | ||
| var fetchPolicy = opts.fetchPolicy; | ||
| if (ssr === false) | ||
| return false; | ||
| if (fetchPolicy === 'network-only' || fetchPolicy === 'cache-and-network') { | ||
| fetchPolicy = 'cache-first'; | ||
| } | ||
| var obs = this.refreshClient().client.watchQuery(tslib.__assign({}, opts, { fetchPolicy: fetchPolicy })); | ||
| if (this.context && this.context.renderPromises) { | ||
| this.context.renderPromises.registerSSRObservable(obs, this.options); | ||
| } | ||
| var result = this.currentObservable.query.getCurrentResult(); | ||
| return result.loading ? obs.result() : false; | ||
| }; | ||
| QueryData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| this.handleErrorOrCompleted(); | ||
| return this.unmount.bind(this); | ||
| }; | ||
| QueryData.prototype.cleanup = function () { | ||
| this.removeQuerySubscription(); | ||
| this.currentObservable.query = null; | ||
| this.previousData.result = null; | ||
| }; | ||
| QueryData.prototype.updateCurrentData = function () { | ||
| if (this.isMounted) { | ||
| this.forceUpdate(); | ||
| } | ||
| }; | ||
| QueryData.prototype.prepareObservableQueryOptions = function () { | ||
| this.verifyDocumentType(this.options.query, reactCommon.DocumentType.Query); | ||
| var displayName = this.options.displayName || 'Query'; | ||
| return tslib.__assign({}, this.options, { displayName: displayName, context: this.options.context || {}, metadata: { reactComponent: { displayName: displayName } } }); | ||
| }; | ||
| QueryData.prototype.observableQueryFields = function (observable) { | ||
| var fields = { | ||
| variables: observable.variables, | ||
| refetch: observable.refetch.bind(observable), | ||
| fetchMore: observable.fetchMore.bind(observable), | ||
| updateQuery: observable.updateQuery.bind(observable), | ||
| startPolling: observable.startPolling.bind(observable), | ||
| stopPolling: observable.stopPolling.bind(observable), | ||
| subscribeToMore: observable.subscribeToMore.bind(observable) | ||
| }; | ||
| return fields; | ||
| }; | ||
| QueryData.prototype.initializeObservableQuery = function () { | ||
| if (this.context && this.context.renderPromises) { | ||
| this.currentObservable.query = this.context.renderPromises.getSSRObservable(this.options); | ||
| } | ||
| if (!this.currentObservable.query) { | ||
| var observableQueryOptions = this.prepareObservableQueryOptions(); | ||
| this.previousData.observableQueryOptions = tslib.__assign({}, observableQueryOptions, { children: null }); | ||
| this.currentObservable.query = this.refreshClient().client.watchQuery(observableQueryOptions); | ||
| } | ||
| }; | ||
| QueryData.prototype.updateObservableQuery = function () { | ||
| if (!this.currentObservable.query) { | ||
| this.initializeObservableQuery(); | ||
| } | ||
| var newObservableQueryOptions = tslib.__assign({}, this.prepareObservableQueryOptions(), { children: null }); | ||
| if (!isEqual(newObservableQueryOptions, this.previousData.observableQueryOptions)) { | ||
| this.previousData.observableQueryOptions = newObservableQueryOptions; | ||
| this.currentObservable | ||
| .query.setOptions(newObservableQueryOptions) | ||
| .catch(function () { return null; }); | ||
| } | ||
| }; | ||
| QueryData.prototype.startQuerySubscription = function () { | ||
| var _this = this; | ||
| if (this.currentObservable.subscription) | ||
| return; | ||
| var obsQuery = this.currentObservable.query; | ||
| this.currentObservable.subscription = obsQuery.subscribe({ | ||
| next: function (_a) { | ||
| var loading = _a.loading, networkStatus = _a.networkStatus, data = _a.data; | ||
| if (_this.previousData.result && | ||
| _this.previousData.result.loading === loading && | ||
| _this.previousData.result.networkStatus === networkStatus && | ||
| isEqual(_this.previousData.result.data, data || {})) { | ||
| return; | ||
| } | ||
| _this.updateCurrentData(); | ||
| }, | ||
| error: function (error) { | ||
| if (!_this.previousData.result || | ||
| _this.previousData.result.networkStatus === apolloClient.NetworkStatus.refetch) { | ||
| _this.resubscribeToQuery(); | ||
| } | ||
| if (!error.hasOwnProperty('graphQLErrors')) | ||
| throw error; | ||
| _this.updateCurrentData(); | ||
| } | ||
| }); | ||
| }; | ||
| QueryData.prototype.resubscribeToQuery = function () { | ||
| this.removeQuerySubscription(); | ||
| var lastError = this.currentObservable.query.getLastError(); | ||
| var lastResult = this.currentObservable.query.getLastResult(); | ||
| this.currentObservable.query.resetLastResults(); | ||
| this.startQuerySubscription(); | ||
| Object.assign(this.currentObservable.query, { | ||
| lastError: lastError, | ||
| lastResult: lastResult | ||
| }); | ||
| }; | ||
| QueryData.prototype.getQueryResult = function () { | ||
| var result = { | ||
| data: Object.create(null) | ||
| }; | ||
| Object.assign(result, this.observableQueryFields(this.currentObservable.query)); | ||
| if (this.options.skip) { | ||
| result = tslib.__assign({}, result, { data: undefined, error: undefined, loading: false }); | ||
| } | ||
| else { | ||
| var currentResult = this.currentObservable.query.getCurrentResult(); | ||
| var loading = currentResult.loading, partial = currentResult.partial, networkStatus = currentResult.networkStatus, errors = currentResult.errors; | ||
| var error = currentResult.error, data = currentResult.data; | ||
| data = data || Object.create(null); | ||
| if (errors && errors.length > 0) { | ||
| error = new apolloClient.ApolloError({ graphQLErrors: errors }); | ||
| } | ||
| Object.assign(result, { loading: loading, networkStatus: networkStatus, error: error }); | ||
| if (loading) { | ||
| var previousData = this.previousData.result | ||
| ? this.previousData.result.data | ||
| : {}; | ||
| Object.assign(result.data, previousData, data); | ||
| } | ||
| else if (error) { | ||
| Object.assign(result, { | ||
| data: (this.currentObservable.query.getLastResult() || {}) | ||
| .data | ||
| }); | ||
| } | ||
| else { | ||
| var fetchPolicy = this.currentObservable.query.options.fetchPolicy; | ||
| var partialRefetch = this.options.partialRefetch; | ||
| if (partialRefetch && | ||
| Object.keys(data).length === 0 && | ||
| partial && | ||
| fetchPolicy !== 'cache-only') { | ||
| Object.assign(result, { | ||
| loading: true, | ||
| networkStatus: apolloClient.NetworkStatus.loading | ||
| }); | ||
| result.refetch(); | ||
| return result; | ||
| } | ||
| Object.assign(result.data, data); | ||
| } | ||
| } | ||
| result.client = this.client; | ||
| this.previousData.loading = | ||
| (this.previousData.result && this.previousData.result.loading) || false; | ||
| this.previousData.result = result; | ||
| return result; | ||
| }; | ||
| QueryData.prototype.handleErrorOrCompleted = function () { | ||
| var _a = this.currentObservable.query.getCurrentResult(), data = _a.data, loading = _a.loading, error = _a.error; | ||
| if (!loading) { | ||
| var _b = this.options, query = _b.query, variables = _b.variables, onCompleted = _b.onCompleted, onError = _b.onError; | ||
| if (this.previousOptions && | ||
| isEqual(this.previousOptions.query, query) && | ||
| isEqual(this.previousOptions.variables, variables) && | ||
| !this.previousData.loading) { | ||
| return; | ||
| } | ||
| if (onCompleted && !error) { | ||
| onCompleted(data); | ||
| } | ||
| else if (onError && error) { | ||
| onError(error); | ||
| } | ||
| } | ||
| }; | ||
| QueryData.prototype.removeQuerySubscription = function () { | ||
| if (this.currentObservable.subscription) { | ||
| this.currentObservable.subscription.unsubscribe(); | ||
| delete this.currentObservable.subscription; | ||
| } | ||
| }; | ||
| return QueryData; | ||
| }(OperationData)); | ||
| function useQuery(query, options) { | ||
| var context = React.useContext(reactCommon.getApolloContext()); | ||
| var _a = React.useReducer(function (x) { return x + 1; }, 0), _ignored = _a[0], forceUpdate = _a[1]; | ||
| var updatedOptions = options ? tslib.__assign({}, options, { query: query }) : { query: query }; | ||
| var queryDataRef = React.useRef(); | ||
| function getQueryDataRef() { | ||
| if (!queryDataRef.current) { | ||
| queryDataRef.current = new QueryData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| forceUpdate: forceUpdate | ||
| }); | ||
| } | ||
| return queryDataRef.current; | ||
| } | ||
| var queryData = getQueryDataRef(); | ||
| queryData.options = updatedOptions; | ||
| queryData.context = context; | ||
| React.useEffect(function () { | ||
| return queryData.afterExecute(); | ||
| }); | ||
| return queryData.execute(); | ||
| function Query(props) { | ||
| var result = (0, _reactHooks.useQuery)(props.query, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| var MutationData = (function (_super) { | ||
| tslib.__extends(MutationData, _super); | ||
| function MutationData(_a) { | ||
| var options = _a.options, context = _a.context, result = _a.result, setResult = _a.setResult; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.verifyDocumentType(options.mutation, reactCommon.DocumentType.Mutation); | ||
| _this.result = result; | ||
| _this.setResult = setResult; | ||
| _this.mostRecentMutationId = 0; | ||
| return _this; | ||
| } | ||
| MutationData.prototype.execute = function (result) { | ||
| var _this = this; | ||
| this.verifyDocumentType(this.options.mutation, reactCommon.DocumentType.Mutation); | ||
| var runMutation = function (options) { return _this.runMutation(options); }; | ||
| return [runMutation, result]; | ||
| }; | ||
| MutationData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| return this.unmount.bind(this); | ||
| }; | ||
| MutationData.prototype.cleanup = function () { | ||
| }; | ||
| MutationData.prototype.runMutation = function (mutationFunctionOptions) { | ||
| var _this = this; | ||
| if (mutationFunctionOptions === void 0) { mutationFunctionOptions = {}; } | ||
| this.onMutationStart(); | ||
| var mutationId = this.generateNewMutationId(); | ||
| return this.mutate(mutationFunctionOptions) | ||
| .then(function (response) { | ||
| _this.onMutationCompleted(response, mutationId); | ||
| return response; | ||
| }) | ||
| .catch(function (error) { | ||
| _this.onMutationError(error, mutationId); | ||
| if (!_this.options.onError) | ||
| throw error; | ||
| }); | ||
| }; | ||
| MutationData.prototype.mutate = function (mutationFunctionOptions) { | ||
| var _a = this.options, mutation = _a.mutation, variables = _a.variables, optimisticResponse = _a.optimisticResponse, update = _a.update, _b = _a.context, mutationContext = _b === void 0 ? {} : _b, _c = _a.awaitRefetchQueries, awaitRefetchQueries = _c === void 0 ? false : _c, fetchPolicy = _a.fetchPolicy; | ||
| var mutateOptions = tslib.__assign({}, mutationFunctionOptions); | ||
| var refetchQueries = mutateOptions.refetchQueries || this.options.refetchQueries; | ||
| var mutateVariables = Object.assign({}, variables, mutateOptions.variables); | ||
| delete mutateOptions.variables; | ||
| return this.refreshClient().client.mutate(tslib.__assign({ mutation: mutation, | ||
| optimisticResponse: optimisticResponse, | ||
| refetchQueries: refetchQueries, | ||
| awaitRefetchQueries: awaitRefetchQueries, | ||
| update: update, context: mutationContext, fetchPolicy: fetchPolicy, variables: mutateVariables }, mutateOptions)); | ||
| }; | ||
| MutationData.prototype.onMutationStart = function () { | ||
| if (!this.result.loading && !this.options.ignoreResults) { | ||
| this.updateResult({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined, | ||
| called: true | ||
| }); | ||
| } | ||
| }; | ||
| MutationData.prototype.onMutationCompleted = function (response, mutationId) { | ||
| var _a = this.options, onCompleted = _a.onCompleted, ignoreResults = _a.ignoreResults; | ||
| var data = response.data, errors = response.errors; | ||
| var error = errors && errors.length > 0 | ||
| ? new apolloClient.ApolloError({ graphQLErrors: errors }) | ||
| : undefined; | ||
| var callOncomplete = function () { | ||
| return onCompleted ? onCompleted(data) : null; | ||
| }; | ||
| if (this.isMostRecentMutation(mutationId) && !ignoreResults) { | ||
| this.updateResult({ | ||
| called: true, | ||
| loading: false, | ||
| data: data, | ||
| error: error | ||
| }); | ||
| } | ||
| callOncomplete(); | ||
| }; | ||
| MutationData.prototype.onMutationError = function (error, mutationId) { | ||
| var onError = this.options.onError; | ||
| var callOnError = function () { return (onError ? onError(error) : null); }; | ||
| if (this.isMostRecentMutation(mutationId)) { | ||
| this.updateResult({ | ||
| loading: false, | ||
| error: error, | ||
| data: undefined, | ||
| called: true | ||
| }); | ||
| } | ||
| callOnError(); | ||
| }; | ||
| MutationData.prototype.generateNewMutationId = function () { | ||
| this.mostRecentMutationId += 1; | ||
| return this.mostRecentMutationId; | ||
| }; | ||
| MutationData.prototype.isMostRecentMutation = function (mutationId) { | ||
| return this.mostRecentMutationId === mutationId; | ||
| }; | ||
| MutationData.prototype.updateResult = function (result) { | ||
| if (this.isMounted && | ||
| (!this.previousResult || !isEqual(this.previousResult, result))) { | ||
| this.setResult(result); | ||
| this.previousResult = result; | ||
| } | ||
| }; | ||
| return MutationData; | ||
| }(OperationData)); | ||
| (function (Query) { | ||
| Query.propTypes = { | ||
| client: _propTypes.default.object, | ||
| children: _propTypes.default.func.isRequired, | ||
| fetchPolicy: _propTypes.default.string, | ||
| notifyOnNetworkStatusChange: _propTypes.default.bool, | ||
| onCompleted: _propTypes.default.func, | ||
| onError: _propTypes.default.func, | ||
| pollInterval: _propTypes.default.number, | ||
| query: _propTypes.default.object.isRequired, | ||
| variables: _propTypes.default.object, | ||
| ssr: _propTypes.default.bool, | ||
| partialRefetch: _propTypes.default.bool, | ||
| returnPartialData: _propTypes.default.bool | ||
| }; | ||
| })(Query || (exports.Query = Query = {})); | ||
| function useMutation(mutation, options) { | ||
| var context = React.useContext(reactCommon.getApolloContext()); | ||
| var _a = React.useState({ called: false, loading: false }), result = _a[0], setResult = _a[1]; | ||
| var updatedOptions = options ? tslib.__assign({}, options, { mutation: mutation }) : { mutation: mutation }; | ||
| var mutationDataRef = React.useRef(); | ||
| function getMutationDataRef() { | ||
| if (!mutationDataRef.current) { | ||
| mutationDataRef.current = new MutationData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| result: result, | ||
| setResult: setResult | ||
| }); | ||
| } | ||
| return mutationDataRef.current; | ||
| } | ||
| var mutationData = getMutationDataRef(); | ||
| mutationData.options = updatedOptions; | ||
| mutationData.context = context; | ||
| React.useEffect(function () { | ||
| return mutationData.afterExecute(); | ||
| }); | ||
| return mutationData.execute(result); | ||
| } | ||
| function Mutation(props) { | ||
| var _a = (0, _reactHooks.useMutation)(props.mutation, props), | ||
| runMutation = _a[0], | ||
| result = _a[1]; | ||
| var SubscriptionData = (function (_super) { | ||
| tslib.__extends(SubscriptionData, _super); | ||
| function SubscriptionData(_a) { | ||
| var options = _a.options, context = _a.context, setResult = _a.setResult; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.currentObservable = {}; | ||
| _this.setResult = setResult; | ||
| _this.initialize(options); | ||
| return _this; | ||
| } | ||
| SubscriptionData.prototype.execute = function (result) { | ||
| var currentResult = result; | ||
| if (this.refreshClient().isNew) { | ||
| currentResult = this.getLoadingResult(); | ||
| } | ||
| var shouldResubscribe = this.options.shouldResubscribe; | ||
| if (typeof shouldResubscribe === 'function') { | ||
| shouldResubscribe = !!shouldResubscribe(this.options); | ||
| } | ||
| if (shouldResubscribe !== false && | ||
| this.previousOptions && | ||
| Object.keys(this.previousOptions).length > 0 && | ||
| (!isEqual(this.previousOptions.variables, this.options.variables) || | ||
| this.previousOptions.subscription !== this.options.subscription)) { | ||
| this.endSubscription(); | ||
| delete this.currentObservable.query; | ||
| currentResult = this.getLoadingResult(); | ||
| } | ||
| this.initialize(this.options); | ||
| this.startSubscription(); | ||
| this.previousOptions = this.options; | ||
| return tslib.__assign({}, currentResult, { variables: this.options.variables }); | ||
| }; | ||
| SubscriptionData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| return this.unmount.bind(this); | ||
| }; | ||
| SubscriptionData.prototype.cleanup = function () { | ||
| this.endSubscription(); | ||
| delete this.currentObservable.query; | ||
| }; | ||
| SubscriptionData.prototype.initialize = function (options) { | ||
| if (this.currentObservable.query) | ||
| return; | ||
| this.currentObservable.query = this.refreshClient().client.subscribe({ | ||
| query: options.subscription, | ||
| variables: options.variables, | ||
| fetchPolicy: options.fetchPolicy | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.startSubscription = function () { | ||
| if (this.currentObservable.subscription) | ||
| return; | ||
| this.currentObservable.subscription = this.currentObservable.query.subscribe({ | ||
| next: this.updateCurrentData.bind(this), | ||
| error: this.updateError.bind(this), | ||
| complete: this.completeSubscription.bind(this) | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.getLoadingResult = function () { | ||
| return { | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }; | ||
| }; | ||
| SubscriptionData.prototype.updateResult = function (result) { | ||
| if (this.isMounted) { | ||
| this.setResult(result); | ||
| } | ||
| }; | ||
| SubscriptionData.prototype.updateCurrentData = function (result) { | ||
| var onSubscriptionData = this.options.onSubscriptionData; | ||
| if (onSubscriptionData) { | ||
| onSubscriptionData({ | ||
| client: this.refreshClient().client, | ||
| subscriptionData: result | ||
| }); | ||
| } | ||
| this.updateResult({ | ||
| data: result.data, | ||
| loading: false, | ||
| error: undefined | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.updateError = function (error) { | ||
| this.updateResult({ | ||
| error: error, | ||
| loading: false | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.completeSubscription = function () { | ||
| var onSubscriptionComplete = this.options.onSubscriptionComplete; | ||
| if (onSubscriptionComplete) | ||
| onSubscriptionComplete(); | ||
| this.endSubscription(); | ||
| }; | ||
| SubscriptionData.prototype.endSubscription = function () { | ||
| if (this.currentObservable.subscription) { | ||
| this.currentObservable.subscription.unsubscribe(); | ||
| delete this.currentObservable.subscription; | ||
| } | ||
| }; | ||
| return SubscriptionData; | ||
| }(OperationData)); | ||
| function useSubscription(subscription, options) { | ||
| var context = React.useContext(reactCommon.getApolloContext()); | ||
| var _a = React.useState({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }), result = _a[0], setResult = _a[1]; | ||
| var updatedOptions = options | ||
| ? tslib.__assign({}, options, { subscription: subscription }) : { subscription: subscription }; | ||
| var subscriptionDataRef = React.useRef(); | ||
| function getSubscriptionDataRef() { | ||
| if (!subscriptionDataRef.current) { | ||
| subscriptionDataRef.current = new SubscriptionData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| setResult: setResult | ||
| }); | ||
| } | ||
| return subscriptionDataRef.current; | ||
| } | ||
| var subscriptionData = getSubscriptionDataRef(); | ||
| subscriptionData.options = updatedOptions; | ||
| subscriptionData.context = context; | ||
| React.useEffect(function () { | ||
| return subscriptionData.afterExecute(); | ||
| }); | ||
| return subscriptionData.execute(result); | ||
| return props.children ? props.children(runMutation, result) : null; | ||
| } | ||
| function makeDefaultQueryInfo() { | ||
| return { | ||
| seen: false, | ||
| observable: null | ||
| }; | ||
| } | ||
| var RenderPromises = (function () { | ||
| function RenderPromises() { | ||
| this.queryPromises = new Map(); | ||
| this.queryInfoTrie = new Map(); | ||
| } | ||
| RenderPromises.prototype.registerSSRObservable = function (observable, props) { | ||
| this.lookupQueryInfo(props).observable = observable; | ||
| }; | ||
| RenderPromises.prototype.getSSRObservable = function (props) { | ||
| return this.lookupQueryInfo(props).observable; | ||
| }; | ||
| RenderPromises.prototype.addQueryPromise = function (queryInstance, finish) { | ||
| var info = this.lookupQueryInfo(queryInstance.options); | ||
| if (!info.seen) { | ||
| this.queryPromises.set(queryInstance.options, new Promise(function (resolve) { | ||
| resolve(queryInstance.fetchData()); | ||
| })); | ||
| return null; | ||
| } | ||
| return finish(); | ||
| }; | ||
| RenderPromises.prototype.hasPromises = function () { | ||
| return this.queryPromises.size > 0; | ||
| }; | ||
| RenderPromises.prototype.consumeAndAwaitPromises = function () { | ||
| var _this = this; | ||
| var promises = []; | ||
| this.queryPromises.forEach(function (promise, queryInstance) { | ||
| _this.lookupQueryInfo(queryInstance).seen = true; | ||
| promises.push(promise); | ||
| }); | ||
| this.queryPromises.clear(); | ||
| return Promise.all(promises); | ||
| }; | ||
| RenderPromises.prototype.lookupQueryInfo = function (props) { | ||
| var queryInfoTrie = this.queryInfoTrie; | ||
| var query = props.query, variables = props.variables; | ||
| var varMap = queryInfoTrie.get(query) || new Map(); | ||
| if (!queryInfoTrie.has(query)) | ||
| queryInfoTrie.set(query, varMap); | ||
| var variablesString = JSON.stringify(variables); | ||
| var info = varMap.get(variablesString) || makeDefaultQueryInfo(); | ||
| if (!varMap.has(variablesString)) | ||
| varMap.set(variablesString, info); | ||
| return info; | ||
| }; | ||
| return RenderPromises; | ||
| }()); | ||
| function getDataFromTree(tree, context) { | ||
| if (context === void 0) { context = {}; } | ||
| return getMarkupFromTree({ | ||
| tree: tree, | ||
| context: context, | ||
| renderFunction: require('react-dom/server').renderToStaticMarkup | ||
| }); | ||
| } | ||
| function getMarkupFromTree(_a) { | ||
| var tree = _a.tree, _b = _a.context, context = _b === void 0 ? {} : _b, _c = _a.renderFunction, renderFunction = _c === void 0 ? require('react-dom/server').renderToStaticMarkup : _c; | ||
| var renderPromises = new RenderPromises(); | ||
| function process() { | ||
| var ApolloContext = reactCommon.getApolloContext(); | ||
| var html = renderFunction(React__default.createElement(ApolloContext.Provider, { value: tslib.__assign({}, context, { renderPromises: renderPromises }) }, tree)); | ||
| return renderPromises.hasPromises() | ||
| ? renderPromises.consumeAndAwaitPromises().then(process) | ||
| : html; | ||
| } | ||
| return Promise.resolve().then(process); | ||
| } | ||
| (function (Mutation) { | ||
| Mutation.propTypes = { | ||
| mutation: _propTypes.default.object.isRequired, | ||
| variables: _propTypes.default.object, | ||
| optimisticResponse: _propTypes.default.object, | ||
| refetchQueries: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])), _propTypes.default.func]), | ||
| awaitRefetchQueries: _propTypes.default.bool, | ||
| update: _propTypes.default.func, | ||
| children: _propTypes.default.func.isRequired, | ||
| onCompleted: _propTypes.default.func, | ||
| onError: _propTypes.default.func, | ||
| fetchPolicy: _propTypes.default.string | ||
| }; | ||
| })(Mutation || (exports.Mutation = Mutation = {})); | ||
| function renderToStringWithData(component) { | ||
| return getMarkupFromTree({ | ||
| tree: component, | ||
| renderFunction: require('react-dom/server').renderToString | ||
| }); | ||
| } | ||
| function Query(props) { | ||
| var result = useQuery(props.query, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| Query.propTypes = { | ||
| client: PropTypes.object, | ||
| children: PropTypes.func.isRequired, | ||
| fetchPolicy: PropTypes.string, | ||
| notifyOnNetworkStatusChange: PropTypes.bool, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| pollInterval: PropTypes.number, | ||
| query: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| ssr: PropTypes.bool, | ||
| partialRefetch: PropTypes.bool, | ||
| returnPartialData: PropTypes.bool | ||
| }; | ||
| function Mutation(props) { | ||
| var _a = useMutation(props.mutation, props), runMutation = _a[0], result = _a[1]; | ||
| return props.children ? props.children(runMutation, result) : null; | ||
| } | ||
| Mutation.propTypes = { | ||
| mutation: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| optimisticResponse: PropTypes.object, | ||
| refetchQueries: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), | ||
| PropTypes.func | ||
| ]), | ||
| awaitRefetchQueries: PropTypes.bool, | ||
| update: PropTypes.func, | ||
| children: PropTypes.func.isRequired, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| fetchPolicy: PropTypes.string | ||
| }; | ||
| function Subscription(props) { | ||
| var result = useSubscription(props.subscription, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| var result = (0, _reactHooks.useSubscription)(props.subscription, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| Subscription.propTypes = { | ||
| subscription: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| children: PropTypes.func, | ||
| onSubscriptionData: PropTypes.func, | ||
| onSubscriptionComplete: PropTypes.func, | ||
| shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]) | ||
| }; | ||
| Object.defineProperty(exports, 'ApolloConsumer', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.ApolloConsumer; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, 'ApolloProvider', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.ApolloProvider; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, 'getApolloContext', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.getApolloContext; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, 'resetApolloContext', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.resetApolloContext; | ||
| } | ||
| }); | ||
| exports.Mutation = Mutation; | ||
| exports.Query = Query; | ||
| exports.Subscription = Subscription; | ||
| exports.getDataFromTree = getDataFromTree; | ||
| exports.getMarkupFromTree = getMarkupFromTree; | ||
| exports.renderToStringWithData = renderToStringWithData; | ||
| (function (Subscription) { | ||
| Subscription.propTypes = { | ||
| subscription: _propTypes.default.object.isRequired, | ||
| variables: _propTypes.default.object, | ||
| children: _propTypes.default.func, | ||
| onSubscriptionData: _propTypes.default.func, | ||
| onSubscriptionComplete: _propTypes.default.func, | ||
| shouldResubscribe: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]) | ||
| }; | ||
| })(Subscription || (exports.Subscription = Subscription = {})); |
@@ -1,745 +0,6 @@ | ||
| import { parser, operationName, DocumentType, getApolloContext } from '@apollo/react-common'; | ||
| export { ApolloConsumer, ApolloProvider, getApolloContext, resetApolloContext } from '@apollo/react-common'; | ||
| import { __extends, __rest, __assign } from 'tslib'; | ||
| import React, { useContext, useReducer, useRef, useEffect, useState } from 'react'; | ||
| import { NetworkStatus, ApolloError } from 'apollo-client'; | ||
| import { invariant } from 'ts-invariant'; | ||
| import 'fast-json-stable-stringify'; | ||
| import { useQuery, useMutation, useSubscription } from '@apollo/react-hooks'; | ||
| export { getDataFromTree, getMarkupFromTree, renderToStringWithData } from '@apollo/react-hooks'; | ||
| import PropTypes from 'prop-types'; | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * | ||
| */ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * | ||
| */ | ||
| function isEqual(a, b) { | ||
| if (a === b) { | ||
| return true; | ||
| } | ||
| if (a instanceof Date && b instanceof Date) { | ||
| return a.getTime() === b.getTime(); | ||
| } | ||
| if (a != null && | ||
| typeof a === 'object' && | ||
| b != null && | ||
| typeof b === 'object') { | ||
| for (var key in a) { | ||
| if (Object.prototype.hasOwnProperty.call(a, key)) { | ||
| if (!Object.prototype.hasOwnProperty.call(b, key)) { | ||
| return false; | ||
| } | ||
| if (!isEqual(a[key], b[key])) { | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| for (var key in b) { | ||
| if (Object.prototype.hasOwnProperty.call(b, key) && | ||
| !Object.prototype.hasOwnProperty.call(a, key)) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
| var OperationData = (function () { | ||
| function OperationData(options, context) { | ||
| this._isMounted = true; | ||
| this._options = {}; | ||
| this._previousOptions = {}; | ||
| this._context = {}; | ||
| this._options = options || {}; | ||
| this._context = context || {}; | ||
| } | ||
| Object.defineProperty(OperationData.prototype, "isMounted", { | ||
| get: function () { | ||
| return this._isMounted; | ||
| }, | ||
| set: function (mounted) { | ||
| this._isMounted = mounted; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "options", { | ||
| get: function () { | ||
| return this._options; | ||
| }, | ||
| set: function (newOptions) { | ||
| if (!isEqual(this.options, newOptions)) { | ||
| this.previousOptions = this.options; | ||
| } | ||
| this._options = newOptions; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "previousOptions", { | ||
| get: function () { | ||
| return this._previousOptions; | ||
| }, | ||
| set: function (newOptions) { | ||
| this._previousOptions = newOptions; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "context", { | ||
| get: function () { | ||
| return this._context; | ||
| }, | ||
| set: function (newContext) { | ||
| this._context = newContext; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "client", { | ||
| get: function () { | ||
| return this._client; | ||
| }, | ||
| set: function (newClient) { | ||
| this._client = newClient; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| OperationData.prototype.unmount = function () { | ||
| this.isMounted = false; | ||
| }; | ||
| OperationData.prototype.refreshClient = function () { | ||
| var client = (this.options && this.options.client) || | ||
| (this.context && this.context.client); | ||
| process.env.NODE_ENV === "production" ? invariant(!!client) : process.env.NODE_ENV === "production" ? invariant(!!client) : invariant(!!client, 'Could not find "client" in the context or passed in as an option. ' + | ||
| 'Wrap the root component in an <ApolloProvider>, or pass an ' + | ||
| 'ApolloClient instance in via options.'); | ||
| var isNew = false; | ||
| if (client !== this.client) { | ||
| isNew = true; | ||
| this.client = client; | ||
| this.cleanup(); | ||
| } | ||
| return { | ||
| client: this.client, | ||
| isNew: isNew | ||
| }; | ||
| }; | ||
| OperationData.prototype.verifyDocumentType = function (document, type) { | ||
| var operation = parser(document); | ||
| var requiredOperationName = operationName(type); | ||
| var usedOperationName = operationName(operation.type); | ||
| process.env.NODE_ENV === "production" ? invariant(operation.type === type) : process.env.NODE_ENV === "production" ? invariant(operation.type === type) : invariant(operation.type === type, "Running a " + requiredOperationName + " requires a graphql " + | ||
| (requiredOperationName + ", but a " + usedOperationName + " was used instead.")); | ||
| }; | ||
| return OperationData; | ||
| }()); | ||
| var QueryData = (function (_super) { | ||
| __extends(QueryData, _super); | ||
| function QueryData(_a) { | ||
| var options = _a.options, context = _a.context, forceUpdate = _a.forceUpdate; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.previousData = {}; | ||
| _this.currentObservable = {}; | ||
| _this.forceUpdate = forceUpdate; | ||
| return _this; | ||
| } | ||
| QueryData.prototype.execute = function () { | ||
| var _this = this; | ||
| this.refreshClient(); | ||
| var _a = this.options, skip = _a.skip, query = _a.query; | ||
| if (skip || query !== this.previousData.query) { | ||
| this.removeQuerySubscription(); | ||
| this.previousData.query = query; | ||
| } | ||
| this.updateObservableQuery(); | ||
| if (!skip) { | ||
| this.startQuerySubscription(); | ||
| } | ||
| var finish = function () { return _this.getQueryResult(); }; | ||
| if (this.context && this.context.renderPromises) { | ||
| var result = this.context.renderPromises.addQueryPromise(this, finish); | ||
| return result || { loading: true, networkStatus: NetworkStatus.loading }; | ||
| } | ||
| return finish(); | ||
| }; | ||
| QueryData.prototype.fetchData = function () { | ||
| if (this.options.skip) | ||
| return false; | ||
| var _a = this.options, children = _a.children, ssr = _a.ssr, displayName = _a.displayName, skip = _a.skip, onCompleted = _a.onCompleted, onError = _a.onError, partialRefetch = _a.partialRefetch, opts = __rest(_a, ["children", "ssr", "displayName", "skip", "onCompleted", "onError", "partialRefetch"]); | ||
| var fetchPolicy = opts.fetchPolicy; | ||
| if (ssr === false) | ||
| return false; | ||
| if (fetchPolicy === 'network-only' || fetchPolicy === 'cache-and-network') { | ||
| fetchPolicy = 'cache-first'; | ||
| } | ||
| var obs = this.refreshClient().client.watchQuery(__assign({}, opts, { fetchPolicy: fetchPolicy })); | ||
| if (this.context && this.context.renderPromises) { | ||
| this.context.renderPromises.registerSSRObservable(obs, this.options); | ||
| } | ||
| var result = this.currentObservable.query.getCurrentResult(); | ||
| return result.loading ? obs.result() : false; | ||
| }; | ||
| QueryData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| this.handleErrorOrCompleted(); | ||
| return this.unmount.bind(this); | ||
| }; | ||
| QueryData.prototype.cleanup = function () { | ||
| this.removeQuerySubscription(); | ||
| this.currentObservable.query = null; | ||
| this.previousData.result = null; | ||
| }; | ||
| QueryData.prototype.updateCurrentData = function () { | ||
| if (this.isMounted) { | ||
| this.forceUpdate(); | ||
| } | ||
| }; | ||
| QueryData.prototype.prepareObservableQueryOptions = function () { | ||
| this.verifyDocumentType(this.options.query, DocumentType.Query); | ||
| var displayName = this.options.displayName || 'Query'; | ||
| return __assign({}, this.options, { displayName: displayName, context: this.options.context || {}, metadata: { reactComponent: { displayName: displayName } } }); | ||
| }; | ||
| QueryData.prototype.observableQueryFields = function (observable) { | ||
| var fields = { | ||
| variables: observable.variables, | ||
| refetch: observable.refetch.bind(observable), | ||
| fetchMore: observable.fetchMore.bind(observable), | ||
| updateQuery: observable.updateQuery.bind(observable), | ||
| startPolling: observable.startPolling.bind(observable), | ||
| stopPolling: observable.stopPolling.bind(observable), | ||
| subscribeToMore: observable.subscribeToMore.bind(observable) | ||
| }; | ||
| return fields; | ||
| }; | ||
| QueryData.prototype.initializeObservableQuery = function () { | ||
| if (this.context && this.context.renderPromises) { | ||
| this.currentObservable.query = this.context.renderPromises.getSSRObservable(this.options); | ||
| } | ||
| if (!this.currentObservable.query) { | ||
| var observableQueryOptions = this.prepareObservableQueryOptions(); | ||
| this.previousData.observableQueryOptions = __assign({}, observableQueryOptions, { children: null }); | ||
| this.currentObservable.query = this.refreshClient().client.watchQuery(observableQueryOptions); | ||
| } | ||
| }; | ||
| QueryData.prototype.updateObservableQuery = function () { | ||
| if (!this.currentObservable.query) { | ||
| this.initializeObservableQuery(); | ||
| } | ||
| var newObservableQueryOptions = __assign({}, this.prepareObservableQueryOptions(), { children: null }); | ||
| if (!isEqual(newObservableQueryOptions, this.previousData.observableQueryOptions)) { | ||
| this.previousData.observableQueryOptions = newObservableQueryOptions; | ||
| this.currentObservable | ||
| .query.setOptions(newObservableQueryOptions) | ||
| .catch(function () { return null; }); | ||
| } | ||
| }; | ||
| QueryData.prototype.startQuerySubscription = function () { | ||
| var _this = this; | ||
| if (this.currentObservable.subscription) | ||
| return; | ||
| var obsQuery = this.currentObservable.query; | ||
| this.currentObservable.subscription = obsQuery.subscribe({ | ||
| next: function (_a) { | ||
| var loading = _a.loading, networkStatus = _a.networkStatus, data = _a.data; | ||
| if (_this.previousData.result && | ||
| _this.previousData.result.loading === loading && | ||
| _this.previousData.result.networkStatus === networkStatus && | ||
| isEqual(_this.previousData.result.data, data || {})) { | ||
| return; | ||
| } | ||
| _this.updateCurrentData(); | ||
| }, | ||
| error: function (error) { | ||
| if (!_this.previousData.result || | ||
| _this.previousData.result.networkStatus === NetworkStatus.refetch) { | ||
| _this.resubscribeToQuery(); | ||
| } | ||
| if (!error.hasOwnProperty('graphQLErrors')) | ||
| throw error; | ||
| _this.updateCurrentData(); | ||
| } | ||
| }); | ||
| }; | ||
| QueryData.prototype.resubscribeToQuery = function () { | ||
| this.removeQuerySubscription(); | ||
| var lastError = this.currentObservable.query.getLastError(); | ||
| var lastResult = this.currentObservable.query.getLastResult(); | ||
| this.currentObservable.query.resetLastResults(); | ||
| this.startQuerySubscription(); | ||
| Object.assign(this.currentObservable.query, { | ||
| lastError: lastError, | ||
| lastResult: lastResult | ||
| }); | ||
| }; | ||
| QueryData.prototype.getQueryResult = function () { | ||
| var result = { | ||
| data: Object.create(null) | ||
| }; | ||
| Object.assign(result, this.observableQueryFields(this.currentObservable.query)); | ||
| if (this.options.skip) { | ||
| result = __assign({}, result, { data: undefined, error: undefined, loading: false }); | ||
| } | ||
| else { | ||
| var currentResult = this.currentObservable.query.getCurrentResult(); | ||
| var loading = currentResult.loading, partial = currentResult.partial, networkStatus = currentResult.networkStatus, errors = currentResult.errors; | ||
| var error = currentResult.error, data = currentResult.data; | ||
| data = data || Object.create(null); | ||
| if (errors && errors.length > 0) { | ||
| error = new ApolloError({ graphQLErrors: errors }); | ||
| } | ||
| Object.assign(result, { loading: loading, networkStatus: networkStatus, error: error }); | ||
| if (loading) { | ||
| var previousData = this.previousData.result | ||
| ? this.previousData.result.data | ||
| : {}; | ||
| Object.assign(result.data, previousData, data); | ||
| } | ||
| else if (error) { | ||
| Object.assign(result, { | ||
| data: (this.currentObservable.query.getLastResult() || {}) | ||
| .data | ||
| }); | ||
| } | ||
| else { | ||
| var fetchPolicy = this.currentObservable.query.options.fetchPolicy; | ||
| var partialRefetch = this.options.partialRefetch; | ||
| if (partialRefetch && | ||
| Object.keys(data).length === 0 && | ||
| partial && | ||
| fetchPolicy !== 'cache-only') { | ||
| Object.assign(result, { | ||
| loading: true, | ||
| networkStatus: NetworkStatus.loading | ||
| }); | ||
| result.refetch(); | ||
| return result; | ||
| } | ||
| Object.assign(result.data, data); | ||
| } | ||
| } | ||
| result.client = this.client; | ||
| this.previousData.loading = | ||
| (this.previousData.result && this.previousData.result.loading) || false; | ||
| this.previousData.result = result; | ||
| return result; | ||
| }; | ||
| QueryData.prototype.handleErrorOrCompleted = function () { | ||
| var _a = this.currentObservable.query.getCurrentResult(), data = _a.data, loading = _a.loading, error = _a.error; | ||
| if (!loading) { | ||
| var _b = this.options, query = _b.query, variables = _b.variables, onCompleted = _b.onCompleted, onError = _b.onError; | ||
| if (this.previousOptions && | ||
| isEqual(this.previousOptions.query, query) && | ||
| isEqual(this.previousOptions.variables, variables) && | ||
| !this.previousData.loading) { | ||
| return; | ||
| } | ||
| if (onCompleted && !error) { | ||
| onCompleted(data); | ||
| } | ||
| else if (onError && error) { | ||
| onError(error); | ||
| } | ||
| } | ||
| }; | ||
| QueryData.prototype.removeQuerySubscription = function () { | ||
| if (this.currentObservable.subscription) { | ||
| this.currentObservable.subscription.unsubscribe(); | ||
| delete this.currentObservable.subscription; | ||
| } | ||
| }; | ||
| return QueryData; | ||
| }(OperationData)); | ||
| function useQuery(query, options) { | ||
| var context = useContext(getApolloContext()); | ||
| var _a = useReducer(function (x) { return x + 1; }, 0), _ignored = _a[0], forceUpdate = _a[1]; | ||
| var updatedOptions = options ? __assign({}, options, { query: query }) : { query: query }; | ||
| var queryDataRef = useRef(); | ||
| function getQueryDataRef() { | ||
| if (!queryDataRef.current) { | ||
| queryDataRef.current = new QueryData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| forceUpdate: forceUpdate | ||
| }); | ||
| } | ||
| return queryDataRef.current; | ||
| } | ||
| var queryData = getQueryDataRef(); | ||
| queryData.options = updatedOptions; | ||
| queryData.context = context; | ||
| useEffect(function () { | ||
| return queryData.afterExecute(); | ||
| }); | ||
| return queryData.execute(); | ||
| } | ||
| var MutationData = (function (_super) { | ||
| __extends(MutationData, _super); | ||
| function MutationData(_a) { | ||
| var options = _a.options, context = _a.context, result = _a.result, setResult = _a.setResult; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.verifyDocumentType(options.mutation, DocumentType.Mutation); | ||
| _this.result = result; | ||
| _this.setResult = setResult; | ||
| _this.mostRecentMutationId = 0; | ||
| return _this; | ||
| } | ||
| MutationData.prototype.execute = function (result) { | ||
| var _this = this; | ||
| this.verifyDocumentType(this.options.mutation, DocumentType.Mutation); | ||
| var runMutation = function (options) { return _this.runMutation(options); }; | ||
| return [runMutation, result]; | ||
| }; | ||
| MutationData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| return this.unmount.bind(this); | ||
| }; | ||
| MutationData.prototype.cleanup = function () { | ||
| }; | ||
| MutationData.prototype.runMutation = function (mutationFunctionOptions) { | ||
| var _this = this; | ||
| if (mutationFunctionOptions === void 0) { mutationFunctionOptions = {}; } | ||
| this.onMutationStart(); | ||
| var mutationId = this.generateNewMutationId(); | ||
| return this.mutate(mutationFunctionOptions) | ||
| .then(function (response) { | ||
| _this.onMutationCompleted(response, mutationId); | ||
| return response; | ||
| }) | ||
| .catch(function (error) { | ||
| _this.onMutationError(error, mutationId); | ||
| if (!_this.options.onError) | ||
| throw error; | ||
| }); | ||
| }; | ||
| MutationData.prototype.mutate = function (mutationFunctionOptions) { | ||
| var _a = this.options, mutation = _a.mutation, variables = _a.variables, optimisticResponse = _a.optimisticResponse, update = _a.update, _b = _a.context, mutationContext = _b === void 0 ? {} : _b, _c = _a.awaitRefetchQueries, awaitRefetchQueries = _c === void 0 ? false : _c, fetchPolicy = _a.fetchPolicy; | ||
| var mutateOptions = __assign({}, mutationFunctionOptions); | ||
| var refetchQueries = mutateOptions.refetchQueries || this.options.refetchQueries; | ||
| var mutateVariables = Object.assign({}, variables, mutateOptions.variables); | ||
| delete mutateOptions.variables; | ||
| return this.refreshClient().client.mutate(__assign({ mutation: mutation, | ||
| optimisticResponse: optimisticResponse, | ||
| refetchQueries: refetchQueries, | ||
| awaitRefetchQueries: awaitRefetchQueries, | ||
| update: update, context: mutationContext, fetchPolicy: fetchPolicy, variables: mutateVariables }, mutateOptions)); | ||
| }; | ||
| MutationData.prototype.onMutationStart = function () { | ||
| if (!this.result.loading && !this.options.ignoreResults) { | ||
| this.updateResult({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined, | ||
| called: true | ||
| }); | ||
| } | ||
| }; | ||
| MutationData.prototype.onMutationCompleted = function (response, mutationId) { | ||
| var _a = this.options, onCompleted = _a.onCompleted, ignoreResults = _a.ignoreResults; | ||
| var data = response.data, errors = response.errors; | ||
| var error = errors && errors.length > 0 | ||
| ? new ApolloError({ graphQLErrors: errors }) | ||
| : undefined; | ||
| var callOncomplete = function () { | ||
| return onCompleted ? onCompleted(data) : null; | ||
| }; | ||
| if (this.isMostRecentMutation(mutationId) && !ignoreResults) { | ||
| this.updateResult({ | ||
| called: true, | ||
| loading: false, | ||
| data: data, | ||
| error: error | ||
| }); | ||
| } | ||
| callOncomplete(); | ||
| }; | ||
| MutationData.prototype.onMutationError = function (error, mutationId) { | ||
| var onError = this.options.onError; | ||
| var callOnError = function () { return (onError ? onError(error) : null); }; | ||
| if (this.isMostRecentMutation(mutationId)) { | ||
| this.updateResult({ | ||
| loading: false, | ||
| error: error, | ||
| data: undefined, | ||
| called: true | ||
| }); | ||
| } | ||
| callOnError(); | ||
| }; | ||
| MutationData.prototype.generateNewMutationId = function () { | ||
| this.mostRecentMutationId += 1; | ||
| return this.mostRecentMutationId; | ||
| }; | ||
| MutationData.prototype.isMostRecentMutation = function (mutationId) { | ||
| return this.mostRecentMutationId === mutationId; | ||
| }; | ||
| MutationData.prototype.updateResult = function (result) { | ||
| if (this.isMounted && | ||
| (!this.previousResult || !isEqual(this.previousResult, result))) { | ||
| this.setResult(result); | ||
| this.previousResult = result; | ||
| } | ||
| }; | ||
| return MutationData; | ||
| }(OperationData)); | ||
| function useMutation(mutation, options) { | ||
| var context = useContext(getApolloContext()); | ||
| var _a = useState({ called: false, loading: false }), result = _a[0], setResult = _a[1]; | ||
| var updatedOptions = options ? __assign({}, options, { mutation: mutation }) : { mutation: mutation }; | ||
| var mutationDataRef = useRef(); | ||
| function getMutationDataRef() { | ||
| if (!mutationDataRef.current) { | ||
| mutationDataRef.current = new MutationData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| result: result, | ||
| setResult: setResult | ||
| }); | ||
| } | ||
| return mutationDataRef.current; | ||
| } | ||
| var mutationData = getMutationDataRef(); | ||
| mutationData.options = updatedOptions; | ||
| mutationData.context = context; | ||
| useEffect(function () { | ||
| return mutationData.afterExecute(); | ||
| }); | ||
| return mutationData.execute(result); | ||
| } | ||
| var SubscriptionData = (function (_super) { | ||
| __extends(SubscriptionData, _super); | ||
| function SubscriptionData(_a) { | ||
| var options = _a.options, context = _a.context, setResult = _a.setResult; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.currentObservable = {}; | ||
| _this.setResult = setResult; | ||
| _this.initialize(options); | ||
| return _this; | ||
| } | ||
| SubscriptionData.prototype.execute = function (result) { | ||
| var currentResult = result; | ||
| if (this.refreshClient().isNew) { | ||
| currentResult = this.getLoadingResult(); | ||
| } | ||
| var shouldResubscribe = this.options.shouldResubscribe; | ||
| if (typeof shouldResubscribe === 'function') { | ||
| shouldResubscribe = !!shouldResubscribe(this.options); | ||
| } | ||
| if (shouldResubscribe !== false && | ||
| this.previousOptions && | ||
| Object.keys(this.previousOptions).length > 0 && | ||
| (!isEqual(this.previousOptions.variables, this.options.variables) || | ||
| this.previousOptions.subscription !== this.options.subscription)) { | ||
| this.endSubscription(); | ||
| delete this.currentObservable.query; | ||
| currentResult = this.getLoadingResult(); | ||
| } | ||
| this.initialize(this.options); | ||
| this.startSubscription(); | ||
| this.previousOptions = this.options; | ||
| return __assign({}, currentResult, { variables: this.options.variables }); | ||
| }; | ||
| SubscriptionData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| return this.unmount.bind(this); | ||
| }; | ||
| SubscriptionData.prototype.cleanup = function () { | ||
| this.endSubscription(); | ||
| delete this.currentObservable.query; | ||
| }; | ||
| SubscriptionData.prototype.initialize = function (options) { | ||
| if (this.currentObservable.query) | ||
| return; | ||
| this.currentObservable.query = this.refreshClient().client.subscribe({ | ||
| query: options.subscription, | ||
| variables: options.variables, | ||
| fetchPolicy: options.fetchPolicy | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.startSubscription = function () { | ||
| if (this.currentObservable.subscription) | ||
| return; | ||
| this.currentObservable.subscription = this.currentObservable.query.subscribe({ | ||
| next: this.updateCurrentData.bind(this), | ||
| error: this.updateError.bind(this), | ||
| complete: this.completeSubscription.bind(this) | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.getLoadingResult = function () { | ||
| return { | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }; | ||
| }; | ||
| SubscriptionData.prototype.updateResult = function (result) { | ||
| if (this.isMounted) { | ||
| this.setResult(result); | ||
| } | ||
| }; | ||
| SubscriptionData.prototype.updateCurrentData = function (result) { | ||
| var onSubscriptionData = this.options.onSubscriptionData; | ||
| if (onSubscriptionData) { | ||
| onSubscriptionData({ | ||
| client: this.refreshClient().client, | ||
| subscriptionData: result | ||
| }); | ||
| } | ||
| this.updateResult({ | ||
| data: result.data, | ||
| loading: false, | ||
| error: undefined | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.updateError = function (error) { | ||
| this.updateResult({ | ||
| error: error, | ||
| loading: false | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.completeSubscription = function () { | ||
| var onSubscriptionComplete = this.options.onSubscriptionComplete; | ||
| if (onSubscriptionComplete) | ||
| onSubscriptionComplete(); | ||
| this.endSubscription(); | ||
| }; | ||
| SubscriptionData.prototype.endSubscription = function () { | ||
| if (this.currentObservable.subscription) { | ||
| this.currentObservable.subscription.unsubscribe(); | ||
| delete this.currentObservable.subscription; | ||
| } | ||
| }; | ||
| return SubscriptionData; | ||
| }(OperationData)); | ||
| function useSubscription(subscription, options) { | ||
| var context = useContext(getApolloContext()); | ||
| var _a = useState({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }), result = _a[0], setResult = _a[1]; | ||
| var updatedOptions = options | ||
| ? __assign({}, options, { subscription: subscription }) : { subscription: subscription }; | ||
| var subscriptionDataRef = useRef(); | ||
| function getSubscriptionDataRef() { | ||
| if (!subscriptionDataRef.current) { | ||
| subscriptionDataRef.current = new SubscriptionData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| setResult: setResult | ||
| }); | ||
| } | ||
| return subscriptionDataRef.current; | ||
| } | ||
| var subscriptionData = getSubscriptionDataRef(); | ||
| subscriptionData.options = updatedOptions; | ||
| subscriptionData.context = context; | ||
| useEffect(function () { | ||
| return subscriptionData.afterExecute(); | ||
| }); | ||
| return subscriptionData.execute(result); | ||
| } | ||
| function makeDefaultQueryInfo() { | ||
| return { | ||
| seen: false, | ||
| observable: null | ||
| }; | ||
| } | ||
| var RenderPromises = (function () { | ||
| function RenderPromises() { | ||
| this.queryPromises = new Map(); | ||
| this.queryInfoTrie = new Map(); | ||
| } | ||
| RenderPromises.prototype.registerSSRObservable = function (observable, props) { | ||
| this.lookupQueryInfo(props).observable = observable; | ||
| }; | ||
| RenderPromises.prototype.getSSRObservable = function (props) { | ||
| return this.lookupQueryInfo(props).observable; | ||
| }; | ||
| RenderPromises.prototype.addQueryPromise = function (queryInstance, finish) { | ||
| var info = this.lookupQueryInfo(queryInstance.options); | ||
| if (!info.seen) { | ||
| this.queryPromises.set(queryInstance.options, new Promise(function (resolve) { | ||
| resolve(queryInstance.fetchData()); | ||
| })); | ||
| return null; | ||
| } | ||
| return finish(); | ||
| }; | ||
| RenderPromises.prototype.hasPromises = function () { | ||
| return this.queryPromises.size > 0; | ||
| }; | ||
| RenderPromises.prototype.consumeAndAwaitPromises = function () { | ||
| var _this = this; | ||
| var promises = []; | ||
| this.queryPromises.forEach(function (promise, queryInstance) { | ||
| _this.lookupQueryInfo(queryInstance).seen = true; | ||
| promises.push(promise); | ||
| }); | ||
| this.queryPromises.clear(); | ||
| return Promise.all(promises); | ||
| }; | ||
| RenderPromises.prototype.lookupQueryInfo = function (props) { | ||
| var queryInfoTrie = this.queryInfoTrie; | ||
| var query = props.query, variables = props.variables; | ||
| var varMap = queryInfoTrie.get(query) || new Map(); | ||
| if (!queryInfoTrie.has(query)) | ||
| queryInfoTrie.set(query, varMap); | ||
| var variablesString = JSON.stringify(variables); | ||
| var info = varMap.get(variablesString) || makeDefaultQueryInfo(); | ||
| if (!varMap.has(variablesString)) | ||
| varMap.set(variablesString, info); | ||
| return info; | ||
| }; | ||
| return RenderPromises; | ||
| }()); | ||
| function getDataFromTree(tree, context) { | ||
| if (context === void 0) { context = {}; } | ||
| return getMarkupFromTree({ | ||
| tree: tree, | ||
| context: context, | ||
| renderFunction: require('react-dom/server').renderToStaticMarkup | ||
| }); | ||
| } | ||
| function getMarkupFromTree(_a) { | ||
| var tree = _a.tree, _b = _a.context, context = _b === void 0 ? {} : _b, _c = _a.renderFunction, renderFunction = _c === void 0 ? require('react-dom/server').renderToStaticMarkup : _c; | ||
| var renderPromises = new RenderPromises(); | ||
| function process() { | ||
| var ApolloContext = getApolloContext(); | ||
| var html = renderFunction(React.createElement(ApolloContext.Provider, { value: __assign({}, context, { renderPromises: renderPromises }) }, tree)); | ||
| return renderPromises.hasPromises() | ||
| ? renderPromises.consumeAndAwaitPromises().then(process) | ||
| : html; | ||
| } | ||
| return Promise.resolve().then(process); | ||
| } | ||
| function renderToStringWithData(component) { | ||
| return getMarkupFromTree({ | ||
| tree: component, | ||
| renderFunction: require('react-dom/server').renderToString | ||
| }); | ||
| } | ||
| function Query(props) { | ||
@@ -749,16 +10,18 @@ var result = useQuery(props.query, props); | ||
| } | ||
| Query.propTypes = { | ||
| client: PropTypes.object, | ||
| children: PropTypes.func.isRequired, | ||
| fetchPolicy: PropTypes.string, | ||
| notifyOnNetworkStatusChange: PropTypes.bool, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| pollInterval: PropTypes.number, | ||
| query: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| ssr: PropTypes.bool, | ||
| partialRefetch: PropTypes.bool, | ||
| returnPartialData: PropTypes.bool | ||
| }; | ||
| (function (Query) { | ||
| Query.propTypes = { | ||
| client: PropTypes.object, | ||
| children: PropTypes.func.isRequired, | ||
| fetchPolicy: PropTypes.string, | ||
| notifyOnNetworkStatusChange: PropTypes.bool, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| pollInterval: PropTypes.number, | ||
| query: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| ssr: PropTypes.bool, | ||
| partialRefetch: PropTypes.bool, | ||
| returnPartialData: PropTypes.bool, | ||
| }; | ||
| })(Query || (Query = {})); | ||
@@ -769,17 +32,19 @@ function Mutation(props) { | ||
| } | ||
| Mutation.propTypes = { | ||
| mutation: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| optimisticResponse: PropTypes.object, | ||
| refetchQueries: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), | ||
| PropTypes.func | ||
| ]), | ||
| awaitRefetchQueries: PropTypes.bool, | ||
| update: PropTypes.func, | ||
| children: PropTypes.func.isRequired, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| fetchPolicy: PropTypes.string | ||
| }; | ||
| (function (Mutation) { | ||
| Mutation.propTypes = { | ||
| mutation: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| optimisticResponse: PropTypes.object, | ||
| refetchQueries: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), | ||
| PropTypes.func | ||
| ]), | ||
| awaitRefetchQueries: PropTypes.bool, | ||
| update: PropTypes.func, | ||
| children: PropTypes.func.isRequired, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| fetchPolicy: PropTypes.string, | ||
| }; | ||
| })(Mutation || (Mutation = {})); | ||
@@ -790,12 +55,14 @@ function Subscription(props) { | ||
| } | ||
| Subscription.propTypes = { | ||
| subscription: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| children: PropTypes.func, | ||
| onSubscriptionData: PropTypes.func, | ||
| onSubscriptionComplete: PropTypes.func, | ||
| shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]) | ||
| }; | ||
| (function (Subscription) { | ||
| Subscription.propTypes = { | ||
| subscription: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| children: PropTypes.func, | ||
| onSubscriptionData: PropTypes.func, | ||
| onSubscriptionComplete: PropTypes.func, | ||
| shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), | ||
| }; | ||
| })(Subscription || (Subscription = {})); | ||
| export { Mutation, Query, Subscription, getDataFromTree, getMarkupFromTree, renderToStringWithData }; | ||
| export { Mutation, Query, Subscription }; | ||
| //# sourceMappingURL=react-components.esm.js.map |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@apollo/react-common'), require('tslib'), require('react'), require('apollo-client'), require('ts-invariant'), require('fast-json-stable-stringify'), require('prop-types')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', '@apollo/react-common', 'tslib', 'react', 'apollo-client', 'ts-invariant', 'fast-json-stable-stringify', 'prop-types'], factory) : | ||
| (global = global || self, factory(global['react-components'] = {}, global.apolloReactCommon, global.tslib, global.React, global.apollo.core, global.invariant, global.stringify, global.PropTypes)); | ||
| }(this, function (exports, reactCommon, tslib, React, apolloClient, tsInvariant, fastJsonStableStringify, PropTypes) { 'use strict'; | ||
| if (typeof define === "function" && define.amd) { | ||
| define(["exports", "@apollo/react-common", "@apollo/react-hooks", "prop-types"], factory); | ||
| } else if (typeof exports !== "undefined") { | ||
| factory(exports, require("@apollo/react-common"), require("@apollo/react-hooks"), require("prop-types")); | ||
| } else { | ||
| var mod = { | ||
| exports: {} | ||
| }; | ||
| factory(mod.exports, global.reactCommon, global.reactHooks, global.propTypes); | ||
| global.unknown = mod.exports; | ||
| } | ||
| })(this, function (_exports, _reactCommon, _reactHooks, _propTypes) { | ||
| var React__default = 'default' in React ? React['default'] : React; | ||
| PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; | ||
| _exports.__esModule = true; | ||
| _exports.Mutation = Mutation; | ||
| _exports.Query = Query; | ||
| _exports.Subscription = Subscription; | ||
| _exports.renderToStringWithData = _exports.getMarkupFromTree = _exports.getDataFromTree = _exports.resetApolloContext = _exports.getApolloContext = _exports.ApolloProvider = _exports.ApolloConsumer = void 0; | ||
| _exports.ApolloConsumer = _reactCommon.ApolloConsumer; | ||
| _exports.ApolloProvider = _reactCommon.ApolloProvider; | ||
| _exports.getApolloContext = _reactCommon.getApolloContext; | ||
| _exports.resetApolloContext = _reactCommon.resetApolloContext; | ||
| _exports.getDataFromTree = _reactHooks.getDataFromTree; | ||
| _exports.getMarkupFromTree = _reactHooks.getMarkupFromTree; | ||
| _exports.renderToStringWithData = _reactHooks.renderToStringWithData; | ||
| _propTypes = _interopRequireDefault(_propTypes); | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * | ||
| */ | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * | ||
| */ | ||
| function Query(props) { | ||
| var result = (0, _reactHooks.useQuery)(props.query, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| function isEqual(a, b) { | ||
| if (a === b) { | ||
| return true; | ||
| } | ||
| if (a instanceof Date && b instanceof Date) { | ||
| return a.getTime() === b.getTime(); | ||
| } | ||
| if (a != null && | ||
| typeof a === 'object' && | ||
| b != null && | ||
| typeof b === 'object') { | ||
| for (var key in a) { | ||
| if (Object.prototype.hasOwnProperty.call(a, key)) { | ||
| if (!Object.prototype.hasOwnProperty.call(b, key)) { | ||
| return false; | ||
| } | ||
| if (!isEqual(a[key], b[key])) { | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| for (var key in b) { | ||
| if (Object.prototype.hasOwnProperty.call(b, key) && | ||
| !Object.prototype.hasOwnProperty.call(a, key)) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
| (function (Query) { | ||
| Query.propTypes = { | ||
| client: _propTypes.default.object, | ||
| children: _propTypes.default.func.isRequired, | ||
| fetchPolicy: _propTypes.default.string, | ||
| notifyOnNetworkStatusChange: _propTypes.default.bool, | ||
| onCompleted: _propTypes.default.func, | ||
| onError: _propTypes.default.func, | ||
| pollInterval: _propTypes.default.number, | ||
| query: _propTypes.default.object.isRequired, | ||
| variables: _propTypes.default.object, | ||
| ssr: _propTypes.default.bool, | ||
| partialRefetch: _propTypes.default.bool, | ||
| returnPartialData: _propTypes.default.bool | ||
| }; | ||
| })(Query || (_exports.Query = Query = {})); | ||
| var OperationData = (function () { | ||
| function OperationData(options, context) { | ||
| this._isMounted = true; | ||
| this._options = {}; | ||
| this._previousOptions = {}; | ||
| this._context = {}; | ||
| this._options = options || {}; | ||
| this._context = context || {}; | ||
| } | ||
| Object.defineProperty(OperationData.prototype, "isMounted", { | ||
| get: function () { | ||
| return this._isMounted; | ||
| }, | ||
| set: function (mounted) { | ||
| this._isMounted = mounted; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "options", { | ||
| get: function () { | ||
| return this._options; | ||
| }, | ||
| set: function (newOptions) { | ||
| if (!isEqual(this.options, newOptions)) { | ||
| this.previousOptions = this.options; | ||
| } | ||
| this._options = newOptions; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "previousOptions", { | ||
| get: function () { | ||
| return this._previousOptions; | ||
| }, | ||
| set: function (newOptions) { | ||
| this._previousOptions = newOptions; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "context", { | ||
| get: function () { | ||
| return this._context; | ||
| }, | ||
| set: function (newContext) { | ||
| this._context = newContext; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| Object.defineProperty(OperationData.prototype, "client", { | ||
| get: function () { | ||
| return this._client; | ||
| }, | ||
| set: function (newClient) { | ||
| this._client = newClient; | ||
| }, | ||
| enumerable: true, | ||
| configurable: true | ||
| }); | ||
| OperationData.prototype.unmount = function () { | ||
| this.isMounted = false; | ||
| }; | ||
| OperationData.prototype.refreshClient = function () { | ||
| var client = (this.options && this.options.client) || | ||
| (this.context && this.context.client); | ||
| process.env.NODE_ENV === "production" ? tsInvariant.invariant(!!client) : process.env.NODE_ENV === "production" ? tsInvariant.invariant(!!client) : tsInvariant.invariant(!!client, 'Could not find "client" in the context or passed in as an option. ' + | ||
| 'Wrap the root component in an <ApolloProvider>, or pass an ' + | ||
| 'ApolloClient instance in via options.'); | ||
| var isNew = false; | ||
| if (client !== this.client) { | ||
| isNew = true; | ||
| this.client = client; | ||
| this.cleanup(); | ||
| } | ||
| return { | ||
| client: this.client, | ||
| isNew: isNew | ||
| }; | ||
| }; | ||
| OperationData.prototype.verifyDocumentType = function (document, type) { | ||
| var operation = reactCommon.parser(document); | ||
| var requiredOperationName = reactCommon.operationName(type); | ||
| var usedOperationName = reactCommon.operationName(operation.type); | ||
| process.env.NODE_ENV === "production" ? tsInvariant.invariant(operation.type === type) : process.env.NODE_ENV === "production" ? tsInvariant.invariant(operation.type === type) : tsInvariant.invariant(operation.type === type, "Running a " + requiredOperationName + " requires a graphql " + | ||
| (requiredOperationName + ", but a " + usedOperationName + " was used instead.")); | ||
| }; | ||
| return OperationData; | ||
| }()); | ||
| function Mutation(props) { | ||
| var _a = (0, _reactHooks.useMutation)(props.mutation, props), | ||
| runMutation = _a[0], | ||
| result = _a[1]; | ||
| var QueryData = (function (_super) { | ||
| tslib.__extends(QueryData, _super); | ||
| function QueryData(_a) { | ||
| var options = _a.options, context = _a.context, forceUpdate = _a.forceUpdate; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.previousData = {}; | ||
| _this.currentObservable = {}; | ||
| _this.forceUpdate = forceUpdate; | ||
| return _this; | ||
| } | ||
| QueryData.prototype.execute = function () { | ||
| var _this = this; | ||
| this.refreshClient(); | ||
| var _a = this.options, skip = _a.skip, query = _a.query; | ||
| if (skip || query !== this.previousData.query) { | ||
| this.removeQuerySubscription(); | ||
| this.previousData.query = query; | ||
| } | ||
| this.updateObservableQuery(); | ||
| if (!skip) { | ||
| this.startQuerySubscription(); | ||
| } | ||
| var finish = function () { return _this.getQueryResult(); }; | ||
| if (this.context && this.context.renderPromises) { | ||
| var result = this.context.renderPromises.addQueryPromise(this, finish); | ||
| return result || { loading: true, networkStatus: apolloClient.NetworkStatus.loading }; | ||
| } | ||
| return finish(); | ||
| }; | ||
| QueryData.prototype.fetchData = function () { | ||
| if (this.options.skip) | ||
| return false; | ||
| var _a = this.options, children = _a.children, ssr = _a.ssr, displayName = _a.displayName, skip = _a.skip, onCompleted = _a.onCompleted, onError = _a.onError, partialRefetch = _a.partialRefetch, opts = tslib.__rest(_a, ["children", "ssr", "displayName", "skip", "onCompleted", "onError", "partialRefetch"]); | ||
| var fetchPolicy = opts.fetchPolicy; | ||
| if (ssr === false) | ||
| return false; | ||
| if (fetchPolicy === 'network-only' || fetchPolicy === 'cache-and-network') { | ||
| fetchPolicy = 'cache-first'; | ||
| } | ||
| var obs = this.refreshClient().client.watchQuery(tslib.__assign({}, opts, { fetchPolicy: fetchPolicy })); | ||
| if (this.context && this.context.renderPromises) { | ||
| this.context.renderPromises.registerSSRObservable(obs, this.options); | ||
| } | ||
| var result = this.currentObservable.query.getCurrentResult(); | ||
| return result.loading ? obs.result() : false; | ||
| }; | ||
| QueryData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| this.handleErrorOrCompleted(); | ||
| return this.unmount.bind(this); | ||
| }; | ||
| QueryData.prototype.cleanup = function () { | ||
| this.removeQuerySubscription(); | ||
| this.currentObservable.query = null; | ||
| this.previousData.result = null; | ||
| }; | ||
| QueryData.prototype.updateCurrentData = function () { | ||
| if (this.isMounted) { | ||
| this.forceUpdate(); | ||
| } | ||
| }; | ||
| QueryData.prototype.prepareObservableQueryOptions = function () { | ||
| this.verifyDocumentType(this.options.query, reactCommon.DocumentType.Query); | ||
| var displayName = this.options.displayName || 'Query'; | ||
| return tslib.__assign({}, this.options, { displayName: displayName, context: this.options.context || {}, metadata: { reactComponent: { displayName: displayName } } }); | ||
| }; | ||
| QueryData.prototype.observableQueryFields = function (observable) { | ||
| var fields = { | ||
| variables: observable.variables, | ||
| refetch: observable.refetch.bind(observable), | ||
| fetchMore: observable.fetchMore.bind(observable), | ||
| updateQuery: observable.updateQuery.bind(observable), | ||
| startPolling: observable.startPolling.bind(observable), | ||
| stopPolling: observable.stopPolling.bind(observable), | ||
| subscribeToMore: observable.subscribeToMore.bind(observable) | ||
| }; | ||
| return fields; | ||
| }; | ||
| QueryData.prototype.initializeObservableQuery = function () { | ||
| if (this.context && this.context.renderPromises) { | ||
| this.currentObservable.query = this.context.renderPromises.getSSRObservable(this.options); | ||
| } | ||
| if (!this.currentObservable.query) { | ||
| var observableQueryOptions = this.prepareObservableQueryOptions(); | ||
| this.previousData.observableQueryOptions = tslib.__assign({}, observableQueryOptions, { children: null }); | ||
| this.currentObservable.query = this.refreshClient().client.watchQuery(observableQueryOptions); | ||
| } | ||
| }; | ||
| QueryData.prototype.updateObservableQuery = function () { | ||
| if (!this.currentObservable.query) { | ||
| this.initializeObservableQuery(); | ||
| } | ||
| var newObservableQueryOptions = tslib.__assign({}, this.prepareObservableQueryOptions(), { children: null }); | ||
| if (!isEqual(newObservableQueryOptions, this.previousData.observableQueryOptions)) { | ||
| this.previousData.observableQueryOptions = newObservableQueryOptions; | ||
| this.currentObservable | ||
| .query.setOptions(newObservableQueryOptions) | ||
| .catch(function () { return null; }); | ||
| } | ||
| }; | ||
| QueryData.prototype.startQuerySubscription = function () { | ||
| var _this = this; | ||
| if (this.currentObservable.subscription) | ||
| return; | ||
| var obsQuery = this.currentObservable.query; | ||
| this.currentObservable.subscription = obsQuery.subscribe({ | ||
| next: function (_a) { | ||
| var loading = _a.loading, networkStatus = _a.networkStatus, data = _a.data; | ||
| if (_this.previousData.result && | ||
| _this.previousData.result.loading === loading && | ||
| _this.previousData.result.networkStatus === networkStatus && | ||
| isEqual(_this.previousData.result.data, data || {})) { | ||
| return; | ||
| } | ||
| _this.updateCurrentData(); | ||
| }, | ||
| error: function (error) { | ||
| if (!_this.previousData.result || | ||
| _this.previousData.result.networkStatus === apolloClient.NetworkStatus.refetch) { | ||
| _this.resubscribeToQuery(); | ||
| } | ||
| if (!error.hasOwnProperty('graphQLErrors')) | ||
| throw error; | ||
| _this.updateCurrentData(); | ||
| } | ||
| }); | ||
| }; | ||
| QueryData.prototype.resubscribeToQuery = function () { | ||
| this.removeQuerySubscription(); | ||
| var lastError = this.currentObservable.query.getLastError(); | ||
| var lastResult = this.currentObservable.query.getLastResult(); | ||
| this.currentObservable.query.resetLastResults(); | ||
| this.startQuerySubscription(); | ||
| Object.assign(this.currentObservable.query, { | ||
| lastError: lastError, | ||
| lastResult: lastResult | ||
| }); | ||
| }; | ||
| QueryData.prototype.getQueryResult = function () { | ||
| var result = { | ||
| data: Object.create(null) | ||
| }; | ||
| Object.assign(result, this.observableQueryFields(this.currentObservable.query)); | ||
| if (this.options.skip) { | ||
| result = tslib.__assign({}, result, { data: undefined, error: undefined, loading: false }); | ||
| } | ||
| else { | ||
| var currentResult = this.currentObservable.query.getCurrentResult(); | ||
| var loading = currentResult.loading, partial = currentResult.partial, networkStatus = currentResult.networkStatus, errors = currentResult.errors; | ||
| var error = currentResult.error, data = currentResult.data; | ||
| data = data || Object.create(null); | ||
| if (errors && errors.length > 0) { | ||
| error = new apolloClient.ApolloError({ graphQLErrors: errors }); | ||
| } | ||
| Object.assign(result, { loading: loading, networkStatus: networkStatus, error: error }); | ||
| if (loading) { | ||
| var previousData = this.previousData.result | ||
| ? this.previousData.result.data | ||
| : {}; | ||
| Object.assign(result.data, previousData, data); | ||
| } | ||
| else if (error) { | ||
| Object.assign(result, { | ||
| data: (this.currentObservable.query.getLastResult() || {}) | ||
| .data | ||
| }); | ||
| } | ||
| else { | ||
| var fetchPolicy = this.currentObservable.query.options.fetchPolicy; | ||
| var partialRefetch = this.options.partialRefetch; | ||
| if (partialRefetch && | ||
| Object.keys(data).length === 0 && | ||
| partial && | ||
| fetchPolicy !== 'cache-only') { | ||
| Object.assign(result, { | ||
| loading: true, | ||
| networkStatus: apolloClient.NetworkStatus.loading | ||
| }); | ||
| result.refetch(); | ||
| return result; | ||
| } | ||
| Object.assign(result.data, data); | ||
| } | ||
| } | ||
| result.client = this.client; | ||
| this.previousData.loading = | ||
| (this.previousData.result && this.previousData.result.loading) || false; | ||
| this.previousData.result = result; | ||
| return result; | ||
| }; | ||
| QueryData.prototype.handleErrorOrCompleted = function () { | ||
| var _a = this.currentObservable.query.getCurrentResult(), data = _a.data, loading = _a.loading, error = _a.error; | ||
| if (!loading) { | ||
| var _b = this.options, query = _b.query, variables = _b.variables, onCompleted = _b.onCompleted, onError = _b.onError; | ||
| if (this.previousOptions && | ||
| isEqual(this.previousOptions.query, query) && | ||
| isEqual(this.previousOptions.variables, variables) && | ||
| !this.previousData.loading) { | ||
| return; | ||
| } | ||
| if (onCompleted && !error) { | ||
| onCompleted(data); | ||
| } | ||
| else if (onError && error) { | ||
| onError(error); | ||
| } | ||
| } | ||
| }; | ||
| QueryData.prototype.removeQuerySubscription = function () { | ||
| if (this.currentObservable.subscription) { | ||
| this.currentObservable.subscription.unsubscribe(); | ||
| delete this.currentObservable.subscription; | ||
| } | ||
| }; | ||
| return QueryData; | ||
| }(OperationData)); | ||
| return props.children ? props.children(runMutation, result) : null; | ||
| } | ||
| function useQuery(query, options) { | ||
| var context = React.useContext(reactCommon.getApolloContext()); | ||
| var _a = React.useReducer(function (x) { return x + 1; }, 0), _ignored = _a[0], forceUpdate = _a[1]; | ||
| var updatedOptions = options ? tslib.__assign({}, options, { query: query }) : { query: query }; | ||
| var queryDataRef = React.useRef(); | ||
| function getQueryDataRef() { | ||
| if (!queryDataRef.current) { | ||
| queryDataRef.current = new QueryData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| forceUpdate: forceUpdate | ||
| }); | ||
| } | ||
| return queryDataRef.current; | ||
| } | ||
| var queryData = getQueryDataRef(); | ||
| queryData.options = updatedOptions; | ||
| queryData.context = context; | ||
| React.useEffect(function () { | ||
| return queryData.afterExecute(); | ||
| }); | ||
| return queryData.execute(); | ||
| } | ||
| var MutationData = (function (_super) { | ||
| tslib.__extends(MutationData, _super); | ||
| function MutationData(_a) { | ||
| var options = _a.options, context = _a.context, result = _a.result, setResult = _a.setResult; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.verifyDocumentType(options.mutation, reactCommon.DocumentType.Mutation); | ||
| _this.result = result; | ||
| _this.setResult = setResult; | ||
| _this.mostRecentMutationId = 0; | ||
| return _this; | ||
| } | ||
| MutationData.prototype.execute = function (result) { | ||
| var _this = this; | ||
| this.verifyDocumentType(this.options.mutation, reactCommon.DocumentType.Mutation); | ||
| var runMutation = function (options) { return _this.runMutation(options); }; | ||
| return [runMutation, result]; | ||
| }; | ||
| MutationData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| return this.unmount.bind(this); | ||
| }; | ||
| MutationData.prototype.cleanup = function () { | ||
| }; | ||
| MutationData.prototype.runMutation = function (mutationFunctionOptions) { | ||
| var _this = this; | ||
| if (mutationFunctionOptions === void 0) { mutationFunctionOptions = {}; } | ||
| this.onMutationStart(); | ||
| var mutationId = this.generateNewMutationId(); | ||
| return this.mutate(mutationFunctionOptions) | ||
| .then(function (response) { | ||
| _this.onMutationCompleted(response, mutationId); | ||
| return response; | ||
| }) | ||
| .catch(function (error) { | ||
| _this.onMutationError(error, mutationId); | ||
| if (!_this.options.onError) | ||
| throw error; | ||
| }); | ||
| }; | ||
| MutationData.prototype.mutate = function (mutationFunctionOptions) { | ||
| var _a = this.options, mutation = _a.mutation, variables = _a.variables, optimisticResponse = _a.optimisticResponse, update = _a.update, _b = _a.context, mutationContext = _b === void 0 ? {} : _b, _c = _a.awaitRefetchQueries, awaitRefetchQueries = _c === void 0 ? false : _c, fetchPolicy = _a.fetchPolicy; | ||
| var mutateOptions = tslib.__assign({}, mutationFunctionOptions); | ||
| var refetchQueries = mutateOptions.refetchQueries || this.options.refetchQueries; | ||
| var mutateVariables = Object.assign({}, variables, mutateOptions.variables); | ||
| delete mutateOptions.variables; | ||
| return this.refreshClient().client.mutate(tslib.__assign({ mutation: mutation, | ||
| optimisticResponse: optimisticResponse, | ||
| refetchQueries: refetchQueries, | ||
| awaitRefetchQueries: awaitRefetchQueries, | ||
| update: update, context: mutationContext, fetchPolicy: fetchPolicy, variables: mutateVariables }, mutateOptions)); | ||
| }; | ||
| MutationData.prototype.onMutationStart = function () { | ||
| if (!this.result.loading && !this.options.ignoreResults) { | ||
| this.updateResult({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined, | ||
| called: true | ||
| }); | ||
| } | ||
| }; | ||
| MutationData.prototype.onMutationCompleted = function (response, mutationId) { | ||
| var _a = this.options, onCompleted = _a.onCompleted, ignoreResults = _a.ignoreResults; | ||
| var data = response.data, errors = response.errors; | ||
| var error = errors && errors.length > 0 | ||
| ? new apolloClient.ApolloError({ graphQLErrors: errors }) | ||
| : undefined; | ||
| var callOncomplete = function () { | ||
| return onCompleted ? onCompleted(data) : null; | ||
| }; | ||
| if (this.isMostRecentMutation(mutationId) && !ignoreResults) { | ||
| this.updateResult({ | ||
| called: true, | ||
| loading: false, | ||
| data: data, | ||
| error: error | ||
| }); | ||
| } | ||
| callOncomplete(); | ||
| }; | ||
| MutationData.prototype.onMutationError = function (error, mutationId) { | ||
| var onError = this.options.onError; | ||
| var callOnError = function () { return (onError ? onError(error) : null); }; | ||
| if (this.isMostRecentMutation(mutationId)) { | ||
| this.updateResult({ | ||
| loading: false, | ||
| error: error, | ||
| data: undefined, | ||
| called: true | ||
| }); | ||
| } | ||
| callOnError(); | ||
| }; | ||
| MutationData.prototype.generateNewMutationId = function () { | ||
| this.mostRecentMutationId += 1; | ||
| return this.mostRecentMutationId; | ||
| }; | ||
| MutationData.prototype.isMostRecentMutation = function (mutationId) { | ||
| return this.mostRecentMutationId === mutationId; | ||
| }; | ||
| MutationData.prototype.updateResult = function (result) { | ||
| if (this.isMounted && | ||
| (!this.previousResult || !isEqual(this.previousResult, result))) { | ||
| this.setResult(result); | ||
| this.previousResult = result; | ||
| } | ||
| }; | ||
| return MutationData; | ||
| }(OperationData)); | ||
| function useMutation(mutation, options) { | ||
| var context = React.useContext(reactCommon.getApolloContext()); | ||
| var _a = React.useState({ called: false, loading: false }), result = _a[0], setResult = _a[1]; | ||
| var updatedOptions = options ? tslib.__assign({}, options, { mutation: mutation }) : { mutation: mutation }; | ||
| var mutationDataRef = React.useRef(); | ||
| function getMutationDataRef() { | ||
| if (!mutationDataRef.current) { | ||
| mutationDataRef.current = new MutationData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| result: result, | ||
| setResult: setResult | ||
| }); | ||
| } | ||
| return mutationDataRef.current; | ||
| } | ||
| var mutationData = getMutationDataRef(); | ||
| mutationData.options = updatedOptions; | ||
| mutationData.context = context; | ||
| React.useEffect(function () { | ||
| return mutationData.afterExecute(); | ||
| }); | ||
| return mutationData.execute(result); | ||
| } | ||
| var SubscriptionData = (function (_super) { | ||
| tslib.__extends(SubscriptionData, _super); | ||
| function SubscriptionData(_a) { | ||
| var options = _a.options, context = _a.context, setResult = _a.setResult; | ||
| var _this = _super.call(this, options, context) || this; | ||
| _this.currentObservable = {}; | ||
| _this.setResult = setResult; | ||
| _this.initialize(options); | ||
| return _this; | ||
| } | ||
| SubscriptionData.prototype.execute = function (result) { | ||
| var currentResult = result; | ||
| if (this.refreshClient().isNew) { | ||
| currentResult = this.getLoadingResult(); | ||
| } | ||
| var shouldResubscribe = this.options.shouldResubscribe; | ||
| if (typeof shouldResubscribe === 'function') { | ||
| shouldResubscribe = !!shouldResubscribe(this.options); | ||
| } | ||
| if (shouldResubscribe !== false && | ||
| this.previousOptions && | ||
| Object.keys(this.previousOptions).length > 0 && | ||
| (!isEqual(this.previousOptions.variables, this.options.variables) || | ||
| this.previousOptions.subscription !== this.options.subscription)) { | ||
| this.endSubscription(); | ||
| delete this.currentObservable.query; | ||
| currentResult = this.getLoadingResult(); | ||
| } | ||
| this.initialize(this.options); | ||
| this.startSubscription(); | ||
| this.previousOptions = this.options; | ||
| return tslib.__assign({}, currentResult, { variables: this.options.variables }); | ||
| }; | ||
| SubscriptionData.prototype.afterExecute = function () { | ||
| this.isMounted = true; | ||
| return this.unmount.bind(this); | ||
| }; | ||
| SubscriptionData.prototype.cleanup = function () { | ||
| this.endSubscription(); | ||
| delete this.currentObservable.query; | ||
| }; | ||
| SubscriptionData.prototype.initialize = function (options) { | ||
| if (this.currentObservable.query) | ||
| return; | ||
| this.currentObservable.query = this.refreshClient().client.subscribe({ | ||
| query: options.subscription, | ||
| variables: options.variables, | ||
| fetchPolicy: options.fetchPolicy | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.startSubscription = function () { | ||
| if (this.currentObservable.subscription) | ||
| return; | ||
| this.currentObservable.subscription = this.currentObservable.query.subscribe({ | ||
| next: this.updateCurrentData.bind(this), | ||
| error: this.updateError.bind(this), | ||
| complete: this.completeSubscription.bind(this) | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.getLoadingResult = function () { | ||
| return { | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }; | ||
| }; | ||
| SubscriptionData.prototype.updateResult = function (result) { | ||
| if (this.isMounted) { | ||
| this.setResult(result); | ||
| } | ||
| }; | ||
| SubscriptionData.prototype.updateCurrentData = function (result) { | ||
| var onSubscriptionData = this.options.onSubscriptionData; | ||
| if (onSubscriptionData) { | ||
| onSubscriptionData({ | ||
| client: this.refreshClient().client, | ||
| subscriptionData: result | ||
| }); | ||
| } | ||
| this.updateResult({ | ||
| data: result.data, | ||
| loading: false, | ||
| error: undefined | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.updateError = function (error) { | ||
| this.updateResult({ | ||
| error: error, | ||
| loading: false | ||
| }); | ||
| }; | ||
| SubscriptionData.prototype.completeSubscription = function () { | ||
| var onSubscriptionComplete = this.options.onSubscriptionComplete; | ||
| if (onSubscriptionComplete) | ||
| onSubscriptionComplete(); | ||
| this.endSubscription(); | ||
| }; | ||
| SubscriptionData.prototype.endSubscription = function () { | ||
| if (this.currentObservable.subscription) { | ||
| this.currentObservable.subscription.unsubscribe(); | ||
| delete this.currentObservable.subscription; | ||
| } | ||
| }; | ||
| return SubscriptionData; | ||
| }(OperationData)); | ||
| function useSubscription(subscription, options) { | ||
| var context = React.useContext(reactCommon.getApolloContext()); | ||
| var _a = React.useState({ | ||
| loading: true, | ||
| error: undefined, | ||
| data: undefined | ||
| }), result = _a[0], setResult = _a[1]; | ||
| var updatedOptions = options | ||
| ? tslib.__assign({}, options, { subscription: subscription }) : { subscription: subscription }; | ||
| var subscriptionDataRef = React.useRef(); | ||
| function getSubscriptionDataRef() { | ||
| if (!subscriptionDataRef.current) { | ||
| subscriptionDataRef.current = new SubscriptionData({ | ||
| options: updatedOptions, | ||
| context: context, | ||
| setResult: setResult | ||
| }); | ||
| } | ||
| return subscriptionDataRef.current; | ||
| } | ||
| var subscriptionData = getSubscriptionDataRef(); | ||
| subscriptionData.options = updatedOptions; | ||
| subscriptionData.context = context; | ||
| React.useEffect(function () { | ||
| return subscriptionData.afterExecute(); | ||
| }); | ||
| return subscriptionData.execute(result); | ||
| } | ||
| function makeDefaultQueryInfo() { | ||
| return { | ||
| seen: false, | ||
| observable: null | ||
| }; | ||
| } | ||
| var RenderPromises = (function () { | ||
| function RenderPromises() { | ||
| this.queryPromises = new Map(); | ||
| this.queryInfoTrie = new Map(); | ||
| } | ||
| RenderPromises.prototype.registerSSRObservable = function (observable, props) { | ||
| this.lookupQueryInfo(props).observable = observable; | ||
| }; | ||
| RenderPromises.prototype.getSSRObservable = function (props) { | ||
| return this.lookupQueryInfo(props).observable; | ||
| }; | ||
| RenderPromises.prototype.addQueryPromise = function (queryInstance, finish) { | ||
| var info = this.lookupQueryInfo(queryInstance.options); | ||
| if (!info.seen) { | ||
| this.queryPromises.set(queryInstance.options, new Promise(function (resolve) { | ||
| resolve(queryInstance.fetchData()); | ||
| })); | ||
| return null; | ||
| } | ||
| return finish(); | ||
| }; | ||
| RenderPromises.prototype.hasPromises = function () { | ||
| return this.queryPromises.size > 0; | ||
| }; | ||
| RenderPromises.prototype.consumeAndAwaitPromises = function () { | ||
| var _this = this; | ||
| var promises = []; | ||
| this.queryPromises.forEach(function (promise, queryInstance) { | ||
| _this.lookupQueryInfo(queryInstance).seen = true; | ||
| promises.push(promise); | ||
| }); | ||
| this.queryPromises.clear(); | ||
| return Promise.all(promises); | ||
| }; | ||
| RenderPromises.prototype.lookupQueryInfo = function (props) { | ||
| var queryInfoTrie = this.queryInfoTrie; | ||
| var query = props.query, variables = props.variables; | ||
| var varMap = queryInfoTrie.get(query) || new Map(); | ||
| if (!queryInfoTrie.has(query)) | ||
| queryInfoTrie.set(query, varMap); | ||
| var variablesString = JSON.stringify(variables); | ||
| var info = varMap.get(variablesString) || makeDefaultQueryInfo(); | ||
| if (!varMap.has(variablesString)) | ||
| varMap.set(variablesString, info); | ||
| return info; | ||
| }; | ||
| return RenderPromises; | ||
| }()); | ||
| function getDataFromTree(tree, context) { | ||
| if (context === void 0) { context = {}; } | ||
| return getMarkupFromTree({ | ||
| tree: tree, | ||
| context: context, | ||
| renderFunction: require('react-dom/server').renderToStaticMarkup | ||
| }); | ||
| } | ||
| function getMarkupFromTree(_a) { | ||
| var tree = _a.tree, _b = _a.context, context = _b === void 0 ? {} : _b, _c = _a.renderFunction, renderFunction = _c === void 0 ? require('react-dom/server').renderToStaticMarkup : _c; | ||
| var renderPromises = new RenderPromises(); | ||
| function process() { | ||
| var ApolloContext = reactCommon.getApolloContext(); | ||
| var html = renderFunction(React__default.createElement(ApolloContext.Provider, { value: tslib.__assign({}, context, { renderPromises: renderPromises }) }, tree)); | ||
| return renderPromises.hasPromises() | ||
| ? renderPromises.consumeAndAwaitPromises().then(process) | ||
| : html; | ||
| } | ||
| return Promise.resolve().then(process); | ||
| } | ||
| function renderToStringWithData(component) { | ||
| return getMarkupFromTree({ | ||
| tree: component, | ||
| renderFunction: require('react-dom/server').renderToString | ||
| }); | ||
| } | ||
| function Query(props) { | ||
| var result = useQuery(props.query, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| Query.propTypes = { | ||
| client: PropTypes.object, | ||
| children: PropTypes.func.isRequired, | ||
| fetchPolicy: PropTypes.string, | ||
| notifyOnNetworkStatusChange: PropTypes.bool, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| pollInterval: PropTypes.number, | ||
| query: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| ssr: PropTypes.bool, | ||
| partialRefetch: PropTypes.bool, | ||
| returnPartialData: PropTypes.bool | ||
| }; | ||
| function Mutation(props) { | ||
| var _a = useMutation(props.mutation, props), runMutation = _a[0], result = _a[1]; | ||
| return props.children ? props.children(runMutation, result) : null; | ||
| } | ||
| (function (Mutation) { | ||
| Mutation.propTypes = { | ||
| mutation: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| optimisticResponse: PropTypes.object, | ||
| refetchQueries: PropTypes.oneOfType([ | ||
| PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])), | ||
| PropTypes.func | ||
| ]), | ||
| awaitRefetchQueries: PropTypes.bool, | ||
| update: PropTypes.func, | ||
| children: PropTypes.func.isRequired, | ||
| onCompleted: PropTypes.func, | ||
| onError: PropTypes.func, | ||
| fetchPolicy: PropTypes.string | ||
| mutation: _propTypes.default.object.isRequired, | ||
| variables: _propTypes.default.object, | ||
| optimisticResponse: _propTypes.default.object, | ||
| refetchQueries: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])), _propTypes.default.func]), | ||
| awaitRefetchQueries: _propTypes.default.bool, | ||
| update: _propTypes.default.func, | ||
| children: _propTypes.default.func.isRequired, | ||
| onCompleted: _propTypes.default.func, | ||
| onError: _propTypes.default.func, | ||
| fetchPolicy: _propTypes.default.string | ||
| }; | ||
| })(Mutation || (_exports.Mutation = Mutation = {})); | ||
| function Subscription(props) { | ||
| var result = useSubscription(props.subscription, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| function Subscription(props) { | ||
| var result = (0, _reactHooks.useSubscription)(props.subscription, props); | ||
| return props.children && result ? props.children(result) : null; | ||
| } | ||
| (function (Subscription) { | ||
| Subscription.propTypes = { | ||
| subscription: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| children: PropTypes.func, | ||
| onSubscriptionData: PropTypes.func, | ||
| onSubscriptionComplete: PropTypes.func, | ||
| shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]) | ||
| subscription: _propTypes.default.object.isRequired, | ||
| variables: _propTypes.default.object, | ||
| children: _propTypes.default.func, | ||
| onSubscriptionData: _propTypes.default.func, | ||
| onSubscriptionComplete: _propTypes.default.func, | ||
| shouldResubscribe: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]) | ||
| }; | ||
| })(Subscription || (_exports.Subscription = Subscription = {})); | ||
| Object.defineProperty(exports, 'ApolloConsumer', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.ApolloConsumer; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, 'ApolloProvider', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.ApolloProvider; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, 'getApolloContext', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.getApolloContext; | ||
| } | ||
| }); | ||
| Object.defineProperty(exports, 'resetApolloContext', { | ||
| enumerable: true, | ||
| get: function () { | ||
| return reactCommon.resetApolloContext; | ||
| } | ||
| }); | ||
| exports.Mutation = Mutation; | ||
| exports.Query = Query; | ||
| exports.Subscription = Subscription; | ||
| exports.getDataFromTree = getDataFromTree; | ||
| exports.getMarkupFromTree = getMarkupFromTree; | ||
| exports.renderToStringWithData = renderToStringWithData; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| })); | ||
| }); |
@@ -7,3 +7,3 @@ /// <reference types="react" /> | ||
| export declare namespace Subscription { | ||
| var propTypes: { | ||
| const propTypes: { | ||
| subscription: PropTypes.Validator<object>; | ||
@@ -10,0 +10,0 @@ variables: PropTypes.Requireable<object>; |
@@ -7,10 +7,12 @@ import { useSubscription } from '@apollo/react-hooks'; | ||
| } | ||
| Subscription.propTypes = { | ||
| subscription: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| children: PropTypes.func, | ||
| onSubscriptionData: PropTypes.func, | ||
| onSubscriptionComplete: PropTypes.func, | ||
| shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]) | ||
| }; | ||
| (function (Subscription) { | ||
| Subscription.propTypes = { | ||
| subscription: PropTypes.object.isRequired, | ||
| variables: PropTypes.object, | ||
| children: PropTypes.func, | ||
| onSubscriptionData: PropTypes.func, | ||
| onSubscriptionComplete: PropTypes.func, | ||
| shouldResubscribe: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), | ||
| }; | ||
| })(Subscription || (Subscription = {})); | ||
| //# sourceMappingURL=Subscription.js.map |
| { | ||
| "name": "@apollo/react-components", | ||
| "description": "React Apollo Query, Mutation and Subscription components.", | ||
| "version": "0.1.0-beta.4", | ||
| "version": "0.1.0-beta.5", | ||
| "author": "opensource@apollographql.com", | ||
@@ -22,10 +22,14 @@ "keywords": [ | ||
| "scripts": { | ||
| "clean": "rm -Rf ./node_modules ./lib/* ./meta/bundlesize/* ./meta/coverage/*", | ||
| "clean": "rm -Rf ./lib/* ./meta/bundlesize/* ./meta/coverage/*", | ||
| "prepare": "npm run build", | ||
| "prebuild": "npm run clean", | ||
| "build": "npx -p typescript tsc -p ./config", | ||
| "build": "npx tsc -p ./config", | ||
| "postbuild": "npx rollup -c ./config/rollup.config.js", | ||
| "watch": "node ../../node_modules/tsc-watch/lib/tsc-watch.js --onSuccess \"npm run postbuild\" -p ./config", | ||
| "watch": "npx tsc-watch --onSuccess \"npm run postbuild\" -p ./config", | ||
| "predeploy": "npm run build", | ||
| "deploy": "npm publish --tag beta" | ||
| "deploy": "npm publish --tag beta", | ||
| "test": "npx jest --config ../../config/jest.config.js --testPathPattern packages/components", | ||
| "test:watch": "npx jest --config ../../config/jest.config.js --testPathPattern packages/components --watch", | ||
| "test:cjs": "npm run build && npx jest --config ../../config/jest.cjs.config.js --testPathPattern packages/components", | ||
| "test:umd": "npm run build && npx jest --config ../../config/jest.umd.config.js --testPathPattern packages/components" | ||
| }, | ||
@@ -38,8 +42,8 @@ "peerDependencies": { | ||
| "graphql": "^14.2.1", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6" | ||
| "react": "^16.8.3", | ||
| "react-dom": "^16.8.3" | ||
| }, | ||
| "dependencies": { | ||
| "@apollo/react-common": "^0.1.0-beta.5", | ||
| "@apollo/react-hooks": "^0.1.0-beta.7", | ||
| "@apollo/react-common": "^0.1.0-beta.6", | ||
| "@apollo/react-hooks": "^0.1.0-beta.8", | ||
| "hoist-non-react-statics": "^3.3.0", | ||
@@ -56,3 +60,9 @@ "prop-types": "^15.7.2", | ||
| }, | ||
| "gitHead": "dbdffdd7edc415f4813df0e6034ac68fe1d8cfa4" | ||
| "devDependencies": { | ||
| "jest": "^24.8.0", | ||
| "rollup": "^1.15.5", | ||
| "tsc-watch": "^2.2.1", | ||
| "typescript": "^3.5.2" | ||
| }, | ||
| "gitHead": "f0ad14e4304a9b58381b292fe8ad739a0ab4534b" | ||
| } |
@@ -1,3 +0,9 @@ | ||
| # React Apollo - Components | ||
| # <a href="https://www.apollographql.com/"><img src="https://user-images.githubusercontent.com/841294/53402609-b97a2180-39ba-11e9-8100-812bab86357c.png" height="100" alt="React Apollo"></a> | ||
| ## React Apollo - Components | ||
| [](https://badge.fury.io/js/%40apollo%2Freact-components) | ||
| [](https://circleci.com/gh/apollographql/react-apollo) | ||
| [](https://spectrum.chat/apollo) | ||
| React Apollo `Query`, `Mutation` and `Subscription` components. |
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
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
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
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
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by13.64%
25
- Number of lines in readme file
- increased by150%
10
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-76.59%
41259
- Dev dependency count
- increased byInfinity%
4
- Lines of code
- decreased by-85.69%
365
- Number of low quality alerts
- increased by50%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1