@apollo/client 3.5.0 → 3.6.0-beta.1

package/README.md

@@ -31,7 +31,7 @@ Learn how to use Apollo Client with self-paced hands-on training on Odyssey, Apo
 [Apollo](https://apollographql.com/) builds open-source software and a graph platform to unify GraphQL across your apps and services. We help you ship faster with:
 
 * [Apollo Studio](https://www.apollographql.com/studio/develop/) – A free, end-to-end platform for managing your GraphQL lifecycle. Track your GraphQL schemas in a hosted registry to create a source of truth for everything in your graph. Studio provides an IDE (Apollo Explorer) so you can explore data, collaborate on queries, observe usage, and safely make schema changes.
-* [Apollo Federation](https://www.apollographql.com/apollo-federation) – The industry-standard open architecture for building a distributed graph. Use Apollo’s open-source gateway to compose a unified graph from multiple subgraphs, determine a query plan, and route requests across your services.
+* [Apollo Federation](https://www.apollographql.com/apollo-federation) – The industry-standard open architecture for building a distributed graph. Use Apollo’s gateway to compose a unified graph from multiple subgraphs, determine a query plan, and route requests across your services.
 * [Apollo Client](https://www.apollographql.com/apollo-client/) – The most popular GraphQL client for the web. Apollo also builds and maintains [Apollo iOS](https://github.com/apollographql/apollo-ios) and [Apollo Android](https://github.com/apollographql/apollo-android).
 * [Apollo Server](https://www.apollographql.com/docs/apollo-server/) – A production-ready JavaScript GraphQL server that connects to any microservice, API, or database. Compatible with all popular JavaScript frameworks and deployable in serverless environments.
 

package/apollo-client.cjs

@@ -13,6 +13,7 @@ var context = require('@wry/context');
 var trie = require('@wry/trie');
 var graphqlTag = require('graphql-tag');
 var React = require('react');
+var shim = require('use-sync-external-store/shim');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -1291,7 +1292,7 @@ var concat = ApolloLink.concat;
 
 var execute = ApolloLink.execute;
 
-var version = '3.5.0';
+var version = '3.6.0-beta.1';
 
 var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
 function parseAndCheckHttpResponse(operations) {
@@ -6045,6 +6046,12 @@ function useQuery(query, options) {
     var context = React.useContext(getApolloContext());
     var client = useApolloClient(options === null || options === void 0 ? void 0 : options.client);
     verifyDocumentType(query, exports.DocumentType.Query);
+    var ref = React.useRef({
+        client: client,
+        query: query,
+        options: options,
+        watchQueryOptions: createWatchQueryOptions(query, options),
+    });
     var _b = React.useState(function () {
         var watchQueryOptions = createWatchQueryOptions(query, options);
         var obsQuery = null;
@@ -6084,114 +6091,96 @@ function useQuery(query, options) {
         }
         return obsQuery;
     }), obsQuery = _b[0], setObsQuery = _b[1];
-    var _c = React.useState(function () {
-        var _a, _b;
-        var result = obsQuery.getCurrentResult();
-        if (!result.loading && options) {
-            if (result.error) {
-                (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, result.error);
-            }
-            else if (result.data) {
-                (_b = options.onCompleted) === null || _b === void 0 ? void 0 : _b.call(options, result.data);
-            }
-        }
-        return result;
-    }), result = _c[0], setResult = _c[1];
-    var ref = React.useRef({
-        client: client,
-        query: query,
-        options: options,
-        result: result,
-        previousData: void 0,
-        watchQueryOptions: createWatchQueryOptions(query, options),
-    });
     React.useEffect(function () {
-        var _a, _b;
         var watchQueryOptions = createWatchQueryOptions(query, options);
-        var nextResult;
         if (ref.current.client !== client || !equality.equal(ref.current.query, query)) {
             var obsQuery_1 = client.watchQuery(watchQueryOptions);
             setObsQuery(obsQuery_1);
-            nextResult = obsQuery_1.getCurrentResult();
         }
         else if (!equality.equal(ref.current.watchQueryOptions, watchQueryOptions)) {
-            obsQuery.setOptions(watchQueryOptions).catch(function () { });
-            nextResult = obsQuery.getCurrentResult();
-            ref.current.watchQueryOptions = watchQueryOptions;
-        }
-        if (nextResult) {
-            var previousResult = ref.current.result;
-            if (previousResult.data) {
-                ref.current.previousData = previousResult.data;
-            }
-            setResult(ref.current.result = nextResult);
-            if (!nextResult.loading && options) {
-                if (!result.loading) {
-                    if (result.error) {
-                        (_a = options.onError) === null || _a === void 0 ? void 0 : _a.call(options, result.error);
-                    }
-                    else if (result.data) {
-                        (_b = options.onCompleted) === null || _b === void 0 ? void 0 : _b.call(options, result.data);
-                    }
-                }
-            }
+            obsQuery.setOptions(watchQueryOptions);
+            setObsQuery(obsQuery);
         }
-        Object.assign(ref.current, { client: client, query: query, options: options });
+        Object.assign(ref.current, {
+            client: client,
+            query: query,
+            options: options,
+            watchQueryOptions: watchQueryOptions,
+        });
     }, [obsQuery, client, query, options]);
-    React.useEffect(function () {
-        if (context.renderPromises) {
-            return;
-        }
-        var subscription = obsQuery.subscribe(onNext, onError);
-        function onNext() {
-            var _a, _b;
-            var previousResult = ref.current.result;
-            var result = obsQuery.getCurrentResult();
-            if (previousResult &&
-                previousResult.loading === result.loading &&
-                previousResult.networkStatus === result.networkStatus &&
-                equality.equal(previousResult.data, result.data)) {
-                return;
-            }
-            if (previousResult.data) {
-                ref.current.previousData = previousResult.data;
-            }
-            setResult(ref.current.result = result);
-            if (!result.loading) {
-                (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onCompleted) === null || _b === void 0 ? void 0 : _b.call(_a, result.data);
-            }
-        }
-        function onError(error) {
-            var _a, _b;
-            var last = obsQuery["last"];
-            subscription.unsubscribe();
-            try {
+    var _c = React.useMemo(function () {
+        var previousResult;
+        var subscribe = function (forceUpdate) {
+            var subscription = obsQuery.subscribe(forceUpdate, onError);
+            function onError(error) {
+                forceUpdate();
+                subscription.unsubscribe();
+                var last = obsQuery["last"];
                 obsQuery.resetLastResults();
-                subscription = obsQuery.subscribe(onNext, onError);
-            }
-            finally {
+                obsQuery.subscribe(forceUpdate, onError);
                 obsQuery["last"] = last;
+                if (!error.hasOwnProperty('graphQLErrors')) {
+                    throw error;
+                }
             }
-            if (!error.hasOwnProperty('graphQLErrors')) {
-                throw error;
+            return function () {
+                subscription.unsubscribe();
+            };
+        };
+        var getSnapshot = function () {
+            var result = obsQuery.getCurrentResult();
+            if (result.errors && result.errors.length) {
+                result = tslib.__assign(tslib.__assign({}, result), { error: result.error || new ApolloError({ graphQLErrors: result.errors }) });
+            }
+            if (!previousResult ||
+                previousResult.loading !== result.loading ||
+                previousResult.networkStatus !== result.networkStatus ||
+                !equality.equal(previousResult.data, result.data) ||
+                !equality.equal(previousResult.error, result.error)) {
+                if (previousResult) {
+                    result = tslib.__assign(tslib.__assign({}, result), { previousData: previousResult.data || previousResult.previousData });
+                }
+                previousResult = result;
             }
-            var previousResult = ref.current.result;
-            if ((previousResult && previousResult.loading) ||
-                !equality.equal(error, previousResult.error)) {
-                setResult(ref.current.result = {
-                    data: previousResult.data,
-                    error: error,
-                    loading: false,
-                    networkStatus: exports.NetworkStatus.error,
-                });
-                (_b = (_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a, error);
+            return previousResult;
+        };
+        return [subscribe, getSnapshot];
+    }, [obsQuery]), subscribe = _c[0], getSnapshot = _c[1];
+    var obsQueryMethods = React.useMemo(function () { return ({
+        refetch: obsQuery.refetch.bind(obsQuery),
+        fetchMore: obsQuery.fetchMore.bind(obsQuery),
+        updateQuery: obsQuery.updateQuery.bind(obsQuery),
+        startPolling: obsQuery.startPolling.bind(obsQuery),
+        stopPolling: obsQuery.stopPolling.bind(obsQuery),
+        subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
+    }); }, [obsQuery]);
+    var result = shim.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+    React.useEffect(function () {
+        var _a, _b, _c, _d, _e, _f;
+        if (((_a = ref.current.options) === null || _a === void 0 ? void 0 : _a.skip) ||
+            ((_b = ref.current.options) === null || _b === void 0 ? void 0 : _b.fetchPolicy) === 'standby') {
+            return;
+        }
+        if (!result.loading) {
+            if (result.error) {
+                (_d = (_c = ref.current.options) === null || _c === void 0 ? void 0 : _c.onError) === null || _d === void 0 ? void 0 : _d.call(_c, result.error);
+            }
+            else if (result.data) {
+                (_f = (_e = ref.current.options) === null || _e === void 0 ? void 0 : _e.onCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, result.data);
             }
         }
-        return function () { return subscription.unsubscribe(); };
-    }, [obsQuery, context.renderPromises, client.disableNetworkFetches]);
+    }, [result]);
     var partial;
     (_a = result, partial = _a.partial, result = tslib.__rest(_a, ["partial"]));
-    {
+    if ((options === null || options === void 0 ? void 0 : options.skip) || (options === null || options === void 0 ? void 0 : options.fetchPolicy) === 'standby') {
+        result = {
+            loading: false,
+            data: void 0,
+            error: void 0,
+            networkStatus: exports.NetworkStatus.ready,
+        };
+    }
+    else {
         if (partial &&
             (options === null || options === void 0 ? void 0 : options.partialRefetch) &&
             !result.loading &&
@@ -6200,42 +6189,12 @@ function useQuery(query, options) {
             result = tslib.__assign(tslib.__assign({}, result), { loading: true, networkStatus: exports.NetworkStatus.refetch });
             obsQuery.refetch();
         }
-        if (context.renderPromises &&
-            (options === null || options === void 0 ? void 0 : options.ssr) !== false &&
-            !(options === null || options === void 0 ? void 0 : options.skip) &&
-            result.loading) {
-            obsQuery.setOptions(createWatchQueryOptions(query, options)).catch(function () { });
+        if (context.renderPromises && (options === null || options === void 0 ? void 0 : options.ssr) !== false && result.loading) {
+            obsQuery.setOptions(createWatchQueryOptions(query, options))
+                .catch(function () { });
         }
     }
-    if ((context.renderPromises || client.disableNetworkFetches) &&
-        (options === null || options === void 0 ? void 0 : options.ssr) === false) {
-        result = ref.current.result = {
-            loading: true,
-            data: void 0,
-            error: void 0,
-            networkStatus: exports.NetworkStatus.loading,
-        };
-    }
-    else if ((options === null || options === void 0 ? void 0 : options.skip) || (options === null || options === void 0 ? void 0 : options.fetchPolicy) === 'standby') {
-        result = {
-            loading: false,
-            data: void 0,
-            error: void 0,
-            networkStatus: exports.NetworkStatus.ready,
-        };
-    }
-    if (result.errors && result.errors.length) {
-        result = tslib.__assign(tslib.__assign({}, result), { error: result.error || new ApolloError({ graphQLErrors: result.errors }) });
-    }
-    var obsQueryFields = React.useMemo(function () { return ({
-        refetch: obsQuery.refetch.bind(obsQuery),
-        fetchMore: obsQuery.fetchMore.bind(obsQuery),
-        updateQuery: obsQuery.updateQuery.bind(obsQuery),
-        startPolling: obsQuery.startPolling.bind(obsQuery),
-        stopPolling: obsQuery.stopPolling.bind(obsQuery),
-        subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery),
-    }); }, [obsQuery]);
-    return tslib.__assign(tslib.__assign(tslib.__assign({}, obsQueryFields), { variables: obsQuery.variables, client: client, called: true, previousData: ref.current.previousData }), result);
+    return tslib.__assign(tslib.__assign(tslib.__assign({}, obsQueryMethods), { variables: obsQuery.variables, client: client, called: true }), result);
 }
 function createWatchQueryOptions(query, options) {
     var _a;
@@ -6323,63 +6282,79 @@ function useMutation(mutation, options) {
         result: result,
         mutationId: 0,
         isMounted: true,
+        execute: null,
+        client: client,
+        mutation: mutation,
+        options: options,
     });
-    var execute = React.useCallback(function (executeOptions) {
-        if (executeOptions === void 0) { executeOptions = {}; }
-        var baseOptions = tslib.__assign(tslib.__assign({}, options), { mutation: mutation });
-        if (!ref.current.result.loading && !baseOptions.ignoreResults) {
-            setResult(ref.current.result = {
-                loading: true,
-                error: void 0,
-                data: void 0,
-                called: true,
-                client: client,
-            });
-        }
-        var mutationId = ++ref.current.mutationId;
-        var clientOptions = mergeOptions(baseOptions, executeOptions);
-        return client.mutate(clientOptions).then(function (response) {
-            var _a;
-            var data = response.data, errors = response.errors;
-            var error = errors && errors.length > 0
-                ? new ApolloError({ graphQLErrors: errors })
-                : void 0;
-            if (mutationId === ref.current.mutationId &&
-                !baseOptions.ignoreResults) {
-                var result_1 = {
-                    called: true,
-                    loading: false,
-                    data: data,
-                    error: error,
-                    client: client,
-                };
-                if (ref.current.isMounted && !equality.equal(ref.current.result, result_1)) {
-                    setResult(ref.current.result = result_1);
-                }
-            }
-            (_a = baseOptions.onCompleted) === null || _a === void 0 ? void 0 : _a.call(baseOptions, response.data);
-            return response;
-        }).catch(function (error) {
-            if (mutationId === ref.current.mutationId &&
-                ref.current.isMounted) {
-                var result_2 = {
-                    loading: false,
-                    error: error,
+    var execute = React.useMemo(function () {
+        if (ref.current.execute != null &&
+            ref.current.client === client &&
+            equality.equal(options, ref.current.options) &&
+            equality.equal(mutation, ref.current.mutation)) {
+            return ref.current.execute;
+        }
+        ref.current.client = client;
+        ref.current.options = options;
+        ref.current.mutation = mutation;
+        ref.current.execute = function (executeOptions) {
+            if (executeOptions === void 0) { executeOptions = {}; }
+            var baseOptions = tslib.__assign(tslib.__assign({}, options), { mutation: mutation });
+            if (!ref.current.result.loading && !baseOptions.ignoreResults) {
+                setResult(ref.current.result = {
+                    loading: true,
+                    error: void 0,
                     data: void 0,
                     called: true,
                     client: client,
-                };
-                if (!equality.equal(ref.current.result, result_2)) {
-                    setResult(ref.current.result = result_2);
-                }
-            }
-            if (baseOptions.onError) {
-                baseOptions.onError(error);
-                return { data: void 0, errors: error };
+                });
             }
-            throw error;
-        });
-    }, [client, options, mutation]);
+            var mutationId = ++ref.current.mutationId;
+            var clientOptions = mergeOptions(baseOptions, executeOptions);
+            return client.mutate(clientOptions).then(function (response) {
+                var _a;
+                var data = response.data, errors = response.errors;
+                var error = errors && errors.length > 0
+                    ? new ApolloError({ graphQLErrors: errors })
+                    : void 0;
+                if (mutationId === ref.current.mutationId &&
+                    !baseOptions.ignoreResults) {
+                    var result_1 = {
+                        called: true,
+                        loading: false,
+                        data: data,
+                        error: error,
+                        client: client,
+                    };
+                    if (ref.current.isMounted && !equality.equal(ref.current.result, result_1)) {
+                        setResult(ref.current.result = result_1);
+                    }
+                }
+                (_a = baseOptions.onCompleted) === null || _a === void 0 ? void 0 : _a.call(baseOptions, response.data);
+                return response;
+            }).catch(function (error) {
+                if (mutationId === ref.current.mutationId &&
+                    ref.current.isMounted) {
+                    var result_2 = {
+                        loading: false,
+                        error: error,
+                        data: void 0,
+                        called: true,
+                        client: client,
+                    };
+                    if (!equality.equal(ref.current.result, result_2)) {
+                        setResult(ref.current.result = result_2);
+                    }
+                }
+                if (baseOptions.onError) {
+                    baseOptions.onError(error);
+                    return { data: void 0, errors: error };
+                }
+                throw error;
+            });
+        };
+        return ref.current.execute;
+    }, [client, mutation, options]);
     var reset = React.useCallback(function () {
         setResult({ called: false, loading: false, client: client });
     }, []);