@apollo/client 4.0.0-rc.0 → 4.0.0-rc.10

package/core/ApolloClient.js

@@ -2,8 +2,9 @@ import { OperationTypeNode } from "graphql";
 import { map } from "rxjs";
 import { NotImplementedHandler } from "@apollo/client/incremental";
 import { execute } from "@apollo/client/link";
+import { DocumentTransform } from "@apollo/client/utilities";
 import { __DEV__ } from "@apollo/client/utilities/environment";
-import { checkDocument, compact, getApolloClientMemoryInternals, mergeOptions, } from "@apollo/client/utilities/internal";
+import { checkDocument, compact, getApolloClientMemoryInternals, mergeOptions, removeMaskedFragmentSpreads, } from "@apollo/client/utilities/internal";
 import { invariant } from "@apollo/client/utilities/invariant";
 import { version } from "../version.js";
 import { QueryManager } from "./QueryManager.js";
@@ -46,23 +47,24 @@ export class ApolloClient {
      * Constructs an instance of `ApolloClient`.
      *
      * @example
+     *
      * ```js
-     * import { ApolloClient, InMemoryCache } from '@apollo/client';
+     * import { ApolloClient, InMemoryCache } from "@apollo/client";
      *
      * const cache = new InMemoryCache();
      *
      * const client = new ApolloClient({
      *   // Provide required constructor fields
      *   cache: cache,
-     *   uri: 'http://localhost:4000/',
+     *   uri: "http://localhost:4000/",
      *
      *   // Provide some optional constructor fields
-     *   name: 'react-web-client',
-     *   version: '1.3',
+     *   name: "react-web-client",
+     *   version: "1.3",
      *   queryDeduplication: false,
      *   defaultOptions: {
      *     watchQuery: {
-     *       fetchPolicy: 'cache-and-network',
+     *       fetchPolicy: "cache-and-network",
      *     },
      *   },
      * });
@@ -70,31 +72,25 @@ export class ApolloClient {
      */
     constructor(options) {
         if (__DEV__) {
-            invariant(options.cache, 67);
-            invariant(options.link, 68);
+            invariant(options.cache, 65);
+            invariant(options.link, 66);
         }
-        const { cache, documentTransform, ssrMode = false, ssrForceFetchDelay = 0, 
-        // Expose the client instance as window.__APOLLO_CLIENT__ and call
-        // onBroadcast in queryManager.broadcastQueries to enable browser
-        // devtools, but disable them by default in production.
-        connectToDevTools, queryDeduplication = true, defaultOptions, defaultContext, assumeImmutableResults = cache.assumeImmutableResults, localState, devtools, dataMasking, link, incrementalHandler = new NotImplementedHandler(), } = options;
+        const { cache, documentTransform, ssrMode = false, ssrForceFetchDelay = 0, queryDeduplication = true, defaultOptions, defaultContext, assumeImmutableResults = cache.assumeImmutableResults, localState, devtools, dataMasking, link, incrementalHandler = new NotImplementedHandler(), } = options;
         this.link = link;
         this.cache = cache;
         this.queryDeduplication = queryDeduplication;
         this.defaultOptions = defaultOptions || {};
         this.devtoolsConfig = {
             ...devtools,
-            enabled: devtools?.enabled ?? connectToDevTools,
+            enabled: devtools?.enabled ?? __DEV__,
         };
-        if (this.devtoolsConfig.enabled === undefined) {
-            this.devtoolsConfig.enabled = __DEV__;
-        }
         this.watchQuery = this.watchQuery.bind(this);
         this.query = this.query.bind(this);
         this.mutate = this.mutate.bind(this);
         this.watchFragment = this.watchFragment.bind(this);
         this.resetStore = this.resetStore.bind(this);
-        this.reFetchObservableQueries = this.reFetchObservableQueries.bind(this);
+        this.reFetchObservableQueries = this.refetchObservableQueries =
+            this.refetchObservableQueries.bind(this);
         this.version = version;
         this.queryManager = new QueryManager({
             client: this,
@@ -188,6 +184,12 @@ export class ApolloClient {
     /**
      * Call this method to terminate any active client processes, making it safe
      * to dispose of this `ApolloClient` instance.
+     *
+     * This method performs aggressive cleanup to prevent memory leaks:
+     *
+     * - Unsubscribes all active `ObservableQuery` instances by emitting a `completed` event
+     * - Rejects all currently running queries with "QueryManager stopped while query was in flight"
+     * - Removes all queryRefs from the suspense cache
      */
     stop() {
         this.queryManager.stop();
@@ -202,11 +204,11 @@ export class ApolloClient {
      *
      * For example, suppose you call watchQuery on a GraphQL query that fetches a person's
      * first and last name and this person has a particular object identifier, provided by
-     * dataIdFromObject. Later, a different query fetches that same person's
+     * `cache.identify`. Later, a different query fetches that same person's
      * first and last name and the first name has now changed. Then, any observers associated
      * with the results of the first query will be updated with a new result object.
      *
-     * Note that if the cache does not change, the subscriber will *not* be notified.
+     * Note that if the cache does not change, the subscriber will _not_ be notified.
      *
      * See [here](https://medium.com/apollo-stack/the-concepts-of-graphql-bc68bd819be3#.3mb0cbcmc) for
      * a description of store reactivity.
@@ -231,13 +233,13 @@ export class ApolloClient {
             options = mergeOptions(this.defaultOptions.query, options);
         }
         if (__DEV__) {
-            invariant(options.fetchPolicy !== "cache-and-network", 69);
-            invariant(options.fetchPolicy !== "standby", 70);
-            invariant(options.query, 71);
-            invariant(options.query.kind === "Document", 72);
-            invariant(!options.returnPartialData, 73);
-            invariant(!options.pollInterval, 74);
-            invariant(!options.notifyOnNetworkStatusChange, 75);
+            invariant(options.fetchPolicy !== "cache-and-network", 67);
+            invariant(options.fetchPolicy !== "standby", 68);
+            invariant(options.query, 69);
+            invariant(options.query.kind === "Document", 70);
+            invariant(!options.returnPartialData, 71);
+            invariant(!options.pollInterval, 72);
+            invariant(!options.notifyOnNetworkStatusChange, 73);
         }
         return this.queryManager.query(options);
     }
@@ -255,9 +257,9 @@ export class ApolloClient {
             errorPolicy: "none",
         }, this.defaultOptions.mutate), options);
         if (__DEV__) {
-            invariant(optionsWithDefaults.mutation, 76);
+            invariant(optionsWithDefaults.mutation, 74);
             invariant(optionsWithDefaults.fetchPolicy === "network-only" ||
-                optionsWithDefaults.fetchPolicy === "no-cache", 77);
+                optionsWithDefaults.fetchPolicy === "no-cache", 75);
         }
         checkDocument(optionsWithDefaults.mutation, OperationTypeNode.MUTATION);
         return this.queryManager.mutate(optionsWithDefaults);
@@ -280,17 +282,8 @@ export class ApolloClient {
         })));
         return Object.assign(mapped, { restart: observable.restart });
     }
-    /**
-     * Tries to read some data from the store in the shape of the provided
-     * GraphQL query without making a network request. This method will start at
-     * the root query. To start at a specific id returned by `dataIdFromObject`
-     * use `readFragment`.
-     *
-     * @param optimistic - Set to `true` to allow `readQuery` to return
-     * optimistic results. Is `false` by default.
-     */
     readQuery(options, optimistic = false) {
-        return this.cache.readQuery(options, optimistic);
+        return this.cache.readQuery({ ...options, query: this.transform(options.query) }, optimistic);
     }
     /**
      * Watches the cache store of the fragment according to the options specified
@@ -309,32 +302,37 @@ export class ApolloClient {
      * to optimistic updates.
      */
     watchFragment(options) {
-        return this.cache.watchFragment({
+        const dataMasking = this.queryManager.dataMasking;
+        return this.cache
+            .watchFragment({
             ...options,
-            [Symbol.for("apollo.dataMasking")]: this.queryManager.dataMasking,
-        });
+            fragment: this.transform(options.fragment, dataMasking),
+        })
+            .pipe(map((result) => {
+            // The transform will remove fragment spreads from the fragment
+            // document when dataMasking is enabled. The `maskFragment` function
+            // remains to apply warnings to fragments marked as
+            // `@unmask(mode: "migrate")`. Since these warnings are only applied
+            // in dev, we can skip the masking algorithm entirely for production.
+            if (__DEV__) {
+                if (dataMasking) {
+                    const data = this.queryManager.maskFragment({
+                        ...options,
+                        data: result.data,
+                    });
+                    return { ...result, data };
+                }
+            }
+            return result;
+        }));
     }
-    /**
-     * Tries to read some data from the store in the shape of the provided
-     * GraphQL fragment without making a network request. This method will read a
-     * GraphQL fragment from any arbitrary id that is currently cached, unlike
-     * `readQuery` which will only read from the root query.
-     *
-     * You must pass in a GraphQL document with a single fragment or a document
-     * with multiple fragments that represent what you are reading. If you pass
-     * in a document with multiple fragments then you must also specify a
-     * `fragmentName`.
-     *
-     * @param optimistic - Set to `true` to allow `readFragment` to return
-     * optimistic results. Is `false` by default.
-     */
     readFragment(options, optimistic = false) {
-        return this.cache.readFragment(options, optimistic);
+        return this.cache.readFragment({ ...options, fragment: this.transform(options.fragment) }, optimistic);
     }
     /**
      * Writes some data in the shape of the provided GraphQL query directly to
      * the store. This method will start at the root query. To start at a
-     * specific id returned by `dataIdFromObject` then use `writeFragment`.
+     * specific id returned by `cache.identify` then use `writeFragment`.
      */
     writeQuery(options) {
         const ref = this.cache.writeQuery(options);
@@ -364,8 +362,8 @@ export class ApolloClient {
     __actionHookForDevTools(cb) {
         this.devToolsHookCb = cb;
     }
-    __requestRaw(payload) {
-        return execute(this.link, payload, { client: this });
+    __requestRaw(request) {
+        return execute(this.link, request, { client: this });
     }
     /**
      * Resets your entire store by clearing out your cache and then re-executing
@@ -377,7 +375,7 @@ export class ApolloClient {
      * user session, and you now want to make sure that any references to data you
      * might have fetched while the user session was active is gone.
      *
-     * It is important to remember that `resetStore()` *will* refetch any active
+     * It is important to remember that `resetStore()` _will_ refetch any active
      * queries. This means that any components that might be mounted will execute
      * their queries again using your network interface. If you do not want to
      * re-execute any queries then you should make sure to stop watching any
@@ -389,7 +387,7 @@ export class ApolloClient {
             discardWatches: false,
         }))
             .then(() => Promise.all(this.resetStoreCallbacks.map((fn) => fn())))
-            .then(() => this.reFetchObservableQueries());
+            .then(() => this.refetchObservableQueries());
     }
     /**
      * Remove all data from the store. Unlike `resetStore`, `clearStore` will
@@ -429,22 +427,41 @@ export class ApolloClient {
      *
      * `reFetchObservableQueries()` is useful if you want to bring the client back to proper state in case of a network outage
      *
-     * It is important to remember that `reFetchObservableQueries()` *will* refetch any active
+     * It is important to remember that `reFetchObservableQueries()` _will_ refetch any active
+     * queries. This means that any components that might be mounted will execute
+     * their queries again using your network interface. If you do not want to
+     * re-execute any queries then you should make sure to stop watching any
+     * active queries.
+     * Takes optional parameter `includeStandby` which will include queries in standby-mode when refetching.
+     *
+     * Note: `cache-only` queries are not refetched by this function.
+     *
+     * @deprecated Please use `refetchObservableQueries` instead.
+     */
+    reFetchObservableQueries;
+    /**
+     * Refetches all of your active queries.
+     *
+     * `refetchObservableQueries()` is useful if you want to bring the client back to proper state in case of a network outage
+     *
+     * It is important to remember that `refetchObservableQueries()` _will_ refetch any active
      * queries. This means that any components that might be mounted will execute
      * their queries again using your network interface. If you do not want to
      * re-execute any queries then you should make sure to stop watching any
      * active queries.
      * Takes optional parameter `includeStandby` which will include queries in standby-mode when refetching.
+     *
+     * Note: `cache-only` queries are not refetched by this function.
      */
-    reFetchObservableQueries(includeStandby) {
+    refetchObservableQueries(includeStandby) {
         return this.queryManager.refetchObservableQueries(includeStandby);
     }
     /**
-     * Refetches specified active queries. Similar to "reFetchObservableQueries()" but with a specific list of queries.
+     * Refetches specified active queries. Similar to "refetchObservableQueries()" but with a specific list of queries.
      *
      * `refetchQueries()` is useful for use cases to imperatively refresh a selection of queries.
      *
-     * It is important to remember that `refetchQueries()` *will* refetch specified active
+     * It is important to remember that `refetchQueries()` _will_ refetch specified active
      * queries. This means that any components that might be mounted will execute
      * their queries again using your network interface. If you do not want to
      * re-execute any queries then you should make sure to stop watching any
@@ -467,13 +484,12 @@ export class ApolloClient {
         // result.queries and result.results instead, you shouldn't have to worry
         // about preventing uncaught rejections for the Promise.all result.
         result.catch((error) => {
-            __DEV__ && invariant.debug(78, error);
+            __DEV__ && invariant.debug(76, error);
         });
         return result;
     }
     /**
-     * Get all currently active `ObservableQuery` objects, in a `Map` keyed by
-     * query ID strings.
+     * Get all currently active `ObservableQuery` objects, in a `Set`.
      *
      * An "active" query is one that has observers and a `fetchPolicy` other than
      * "standby" or "cache-only".
@@ -481,6 +497,9 @@ export class ApolloClient {
      * You can include all `ObservableQuery` objects (including the inactive ones)
      * by passing "all" instead of "active", or you can include just a subset of
      * active queries by passing an array of query names or DocumentNode objects.
+     *
+     * Note: This method only returns queries that have active subscribers. Queries
+     * without subscribers are not tracked by the client.
      */
     getObservableQueries(include = "active") {
         return this.queryManager.getObservableQueries(include);
@@ -510,6 +529,13 @@ export class ApolloClient {
     get defaultContext() {
         return this.queryManager.defaultContext;
     }
+    maskedFragmentTransform = new DocumentTransform(removeMaskedFragmentSpreads);
+    transform(document, dataMasking = false) {
+        const transformed = this.queryManager.transform(document);
+        return dataMasking ?
+            this.maskedFragmentTransform.transformDocument(transformed)
+            : transformed;
+    }
     /**
      * @experimental
      * This is not a stable API - it is used in development builds to expose
@@ -518,75 +544,78 @@ export class ApolloClient {
      * For more details, see [Memory Management](https://www.apollographql.com/docs/react/caching/memory-management/#measuring-cache-usage)
      *
      * @example
+     *
      * ```ts
-     * console.log(client.getMemoryInternals())
+     * console.log(client.getMemoryInternals());
      * ```
+     *
      * Logs output in the following JSON format:
      * @example
+     *
      * ```json
-     *{
-     *  limits:     {
-     *    canonicalStringify: 1000,
-     *    print: 2000,
-     *    'documentTransform.cache': 2000,
-     *    'queryManager.getDocumentInfo': 2000,
-     *    'PersistedQueryLink.persistedQueryHashes': 2000,
-     *    'fragmentRegistry.transform': 2000,
-     *    'fragmentRegistry.lookup': 1000,
-     *    'fragmentRegistry.findFragmentSpreads': 4000,
-     *    'cache.fragmentQueryDocuments': 1000,
-     *    'removeTypenameFromVariables.getVariableDefinitions': 2000,
-     *    'inMemoryCache.maybeBroadcastWatch': 5000,
-     *    'inMemoryCache.executeSelectionSet': 10000,
-     *    'inMemoryCache.executeSubSelectedArray': 5000
-     *  },
-     *  sizes: {
-     *    canonicalStringify: 4,
-     *    print: 14,
-     *    addTypenameDocumentTransform: [
-     *      {
-     *        cache: 14,
-     *      },
-     *    ],
-     *    queryManager: {
-     *      getDocumentInfo: 14,
-     *      documentTransforms: [
-     *        {
-     *          cache: 14,
-     *        },
-     *        {
-     *          cache: 14,
-     *        },
-     *      ],
-     *    },
-     *    fragmentRegistry: {
-     *      findFragmentSpreads: 34,
-     *      lookup: 20,
-     *      transform: 14,
-     *    },
-     *    cache: {
-     *      fragmentQueryDocuments: 22,
-     *    },
-     *    inMemoryCache: {
-     *      executeSelectionSet: 4345,
-     *      executeSubSelectedArray: 1206,
-     *      maybeBroadcastWatch: 32,
-     *    },
-     *    links: [
-     *      {
-     *        PersistedQueryLink: {
-     *          persistedQueryHashes: 14,
-     *        },
-     *      },
-     *      {
-     *        removeTypenameFromVariables: {
-     *          getVariableDefinitions: 14,
-     *        },
-     *      },
-     *    ],
-     *  },
+     * {
+     *   "limits": {
+     *     "canonicalStringify": 1000,
+     *     "print": 2000,
+     *     "documentTransform.cache": 2000,
+     *     "queryManager.getDocumentInfo": 2000,
+     *     "PersistedQueryLink.persistedQueryHashes": 2000,
+     *     "fragmentRegistry.transform": 2000,
+     *     "fragmentRegistry.lookup": 1000,
+     *     "fragmentRegistry.findFragmentSpreads": 4000,
+     *     "cache.fragmentQueryDocuments": 1000,
+     *     "removeTypenameFromVariables.getVariableDefinitions": 2000,
+     *     "inMemoryCache.maybeBroadcastWatch": 5000,
+     *     "inMemoryCache.executeSelectionSet": 10000,
+     *     "inMemoryCache.executeSubSelectedArray": 5000
+     *   },
+     *   "sizes": {
+     *     "canonicalStringify": 4,
+     *     "print": 14,
+     *     "addTypenameDocumentTransform": [
+     *       {
+     *         "cache": 14
+     *       }
+     *     ],
+     *     "queryManager": {
+     *       "getDocumentInfo": 14,
+     *       "documentTransforms": [
+     *         {
+     *           "cache": 14
+     *         },
+     *         {
+     *           "cache": 14
+     *         }
+     *       ]
+     *     },
+     *     "fragmentRegistry": {
+     *       "findFragmentSpreads": 34,
+     *       "lookup": 20,
+     *       "transform": 14
+     *     },
+     *     "cache": {
+     *       "fragmentQueryDocuments": 22
+     *     },
+     *     "inMemoryCache": {
+     *       "executeSelectionSet": 4345,
+     *       "executeSubSelectedArray": 1206,
+     *       "maybeBroadcastWatch": 32
+     *     },
+     *     "links": [
+     *       {
+     *         "PersistedQueryLink": {
+     *           "persistedQueryHashes": 14
+     *         }
+     *       },
+     *       {
+     *         "removeTypenameFromVariables": {
+     *           "getVariableDefinitions": 14
+     *         }
+     *       }
+     *     ]
+     *   }
      * }
-     *```
+     * ```
      */
     getMemoryInternals;
 }