@apollo/client 4.0.0-alpha.8 → 4.0.0-rc.0

package/react/hooks/useQuery.d.ts

@@ -1,10 +1,10 @@
-import type { ApolloClient, ApolloQueryResult, DefaultContext, DocumentNode, ErrorLike, ErrorPolicy, FetchMoreQueryOptions, OperationVariables, QueryResult, RefetchWritePolicy, SubscribeToMoreFunction, TypedDocumentNode, UpdateQueryMapFn, WatchQueryFetchPolicy, WatchQueryOptions } from "@apollo/client";
-import { NetworkStatus, ObservableQuery } from "@apollo/client";
-import type { MaybeMasked, Unmasked } from "@apollo/client/masking";
-import type { NoInfer } from "@apollo/client/utilities";
+import type { ApolloClient, ApolloQueryResult, DataState, DefaultContext, DocumentNode, ErrorLike, ErrorPolicy, FetchMoreOptions, GetDataState, ObservableQuery, OperationVariables, QueryResult, RefetchWritePolicy, SubscribeToMoreFunction, TypedDocumentNode, UpdateQueryMapFn, WatchQueryFetchPolicy, WatchQueryOptions } from "@apollo/client";
+import { NetworkStatus } from "@apollo/client";
+import type { MaybeMasked } from "@apollo/client/masking";
+import type { NoInfer, VariablesOption } from "@apollo/client/utilities/internal";
 import type { NextFetchPolicyContext } from "../../core/watchQueryOptions.js";
 export declare namespace useQuery {
-    interface Options<TData = unknown, TVariables extends OperationVariables = OperationVariables> {
+    type Options<TData = unknown, TVariables extends OperationVariables = OperationVariables> = {
         /**
         * Specifies how the query interacts with the Apollo Client cache during execution (for example, whether it checks the cache for results before sending a request to the server).
         * 
@@ -42,16 +42,6 @@ export declare namespace useQuery {
         */
         refetchWritePolicy?: RefetchWritePolicy;
         /**
-        * An object containing all of the GraphQL variables your query requires to execute.
-        * 
-        * Each key in the object corresponds to a variable name, and that key's value corresponds to the variable value.
-        * 
-        * @docGroup
-        * 
-        * 1. Operation options
-        */
-        variables?: TVariables;
-        /**
         * Specifies how the query handles a response that returns both GraphQL errors and partial results.
         * 
         * For details, see [GraphQL error policies](https://www.apollographql.com/docs/react/data/error-handling/#graphql-error-policies).
@@ -76,7 +66,7 @@ export declare namespace useQuery {
         /**
         * If `true`, the in-progress query's associated component re-renders whenever the network status changes or a network error occurs.
         * 
-        * The default value is `false`.
+        * The default value is `true`.
         * 
         * @docGroup
         * 
@@ -137,8 +127,8 @@ export declare namespace useQuery {
         * 1. Operation options
         */
         skip?: boolean;
-    }
-    interface Result<TData = unknown, TVariables extends OperationVariables = OperationVariables> {
+    } & VariablesOption<TVariables>;
+    type Result<TData = unknown, TVariables extends OperationVariables = OperationVariables, TStates extends DataState<TData>["dataState"] = DataState<TData>["dataState"]> = {
         /**
         * The instance of Apollo Client that executed the query. Can be useful for manually executing followup queries or writing data to the cache.
         * 
@@ -152,16 +142,6 @@ export declare namespace useQuery {
         */
         observable: ObservableQuery<TData, TVariables>;
         /**
-        * An object containing the result of your GraphQL query after it completes.
-        * 
-        * This value might be `undefined` if a query results in one or more errors (depending on the query's `errorPolicy`).
-        * 
-        * @docGroup
-        * 
-        * 1. Operation data
-        */
-        data: MaybeMasked<TData> | undefined;
-        /**
         * An object containing the result from the most recent _previous_ execution of this query.
         * 
         * This value is `undefined` if this is the query's first execution.
@@ -258,7 +238,7 @@ export declare namespace useQuery {
         * 
         * 1. Operation data
         */
-        variables: TVariables | undefined;
+        variables: TVariables;
         /**
         * A function that helps you fetch the next set of results for a [paginated list field](https://www.apollographql.com/docs/react/pagination/core-api/).
         * 
@@ -267,51 +247,19 @@ export declare namespace useQuery {
         * 
         * 3. Helper functions
         */
-        fetchMore: <TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(fetchMoreOptions: FetchMoreQueryOptions<TFetchVars, TFetchData> & {
-            updateQuery?: (previousQueryResult: Unmasked<TData>, options: {
-                fetchMoreResult: Unmasked<TFetchData>;
-                variables: TFetchVars;
-            }) => Unmasked<TData>;
-        }) => Promise<QueryResult<MaybeMasked<TFetchData>>>;
-    }
+        fetchMore: <TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(fetchMoreOptions: FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<QueryResult<MaybeMasked<TFetchData>>>;
+    } & GetDataState<MaybeMasked<TData>, TStates>;
 }
-/**
- * A hook for executing queries in an Apollo application.
- *
- * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
- *
- * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, and `data` properties you can use to render your UI.
- *
- * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
- *
- * @example
- * ```jsx
- * import { gql, useQuery } from '@apollo/client';
- *
- * const GET_GREETING = gql`
- *   query GetGreeting($language: String!) {
- *     greeting(language: $language) {
- *       message
- *     }
- *   }
- * `;
- *
- * function Hello() {
- *   const { loading, error, data } = useQuery(GET_GREETING, {
- *     variables: { language: 'english' },
- *   });
- *   if (loading) return <p>Loading ...</p>;
- *   return <h1>Hello {data.greeting.message}!</h1>;
- * }
- * ```
- * @since 3.0.0
- * @param query - A GraphQL query document parsed into an AST by `gql`.
- * @param options - Options to control how the query is executed.
- * @returns Query result object
- */
-export declare function useQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>): useQuery.Result<TData, TVariables>;
+export declare function useQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
+    returnPartialData: true;
+}): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial">;
+export declare function useQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
+    returnPartialData: boolean;
+}): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial">;
+export declare function useQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
+    options?: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>
+] : [options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>]): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming">;
 export declare namespace useQuery {
     var ssrDisabledResult: ApolloQueryResult<any>;
-    var skipStandbyResult: ApolloQueryResult<any>;
 }
 //# sourceMappingURL=useQuery.d.ts.map

package/react/hooks/useQuery.js

@@ -1,3 +1,4 @@
+import { c as _c } from "react-compiler-runtime";
 /**
  * Function parameters in this file try to follow a common order for the sake of
  * readability and consistency. The order is as follows:
@@ -14,8 +15,8 @@
 import { equal } from "@wry/equality";
 import * as React from "react";
 import { asapScheduler, observeOn } from "rxjs";
-import { NetworkStatus, ObservableQuery } from "@apollo/client";
-import { maybeDeepFreeze, mergeOptions } from "@apollo/client/utilities";
+import { NetworkStatus } from "@apollo/client";
+import { maybeDeepFreeze, mergeOptions, } from "@apollo/client/utilities/internal";
 import { wrapHook } from "./internal/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
@@ -54,89 +55,244 @@ const lastWatchOptions = Symbol();
  * @param options - Options to control how the query is executed.
  * @returns Query result object
  */
-export function useQuery(query, options = {}) {
+export function useQuery(query, ...[options]) {
     "use no memo";
     return wrapHook("useQuery", 
     // eslint-disable-next-line react-compiler/react-compiler
     useQuery_, useApolloClient(options && options.client))(query, options);
 }
-function useQuery_(query, options) {
+function useQuery_(query, t0) {
+    const $ = _c(46);
+    let t1;
+
+    if ($[0] !== t0) {
+        t1 = t0 === undefined ? {} : t0;
+        $[0] = t0;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+
+    const options = t1;
     const client = useApolloClient(options.client);
-    const { skip, ssr, ...opts } = options;
-    const watchQueryOptions = mergeOptions(client.defaultOptions.watchQuery, { ...opts, query });
-    if (skip) {
-        // When skipping, we set watchQueryOptions.fetchPolicy initially to
-        // "standby", but we also need/want to preserve the initial non-standby
-        // fetchPolicy that would have been used if not skipping.
-        watchQueryOptions.initialFetchPolicy =
-            options.initialFetchPolicy || options.fetchPolicy;
-        watchQueryOptions.fetchPolicy = "standby";
-    }
-    function createState(previous) {
-        const observable = ObservableQuery["inactiveOnCreation"].withValue(true, () => client.watchQuery(watchQueryOptions));
-        return {
-            client,
-            query,
-            observable,
-            resultData: {
-                current: observable.getCurrentResult(),
-                // Reuse previousData from previous InternalState (if any) to provide
-                // continuity of previousData even if/when the query or client changes.
-                previousData: previous?.resultData.current.data,
-            },
+    let opts;
+    let skip;
+
+    if ($[2] !== options) {
+        const {
+            skip: t2,
+            ssr,
+            ...t3
+        } = options;
+        skip = t2;
+        opts = t3;
+        $[2] = options;
+        $[3] = opts;
+        $[4] = skip;
+    } else {
+        opts = $[3];
+        skip = $[4];
+    }
+
+    let watchQueryOptions;
+
+    if ($[5] !== client.defaultOptions.watchQuery || $[6] !== options.fetchPolicy || $[7] !== options.initialFetchPolicy || $[8] !== opts || $[9] !== query || $[10] !== skip) {
+        watchQueryOptions = mergeOptions(client.defaultOptions.watchQuery, {
+            ...opts,
+            query
+        });
+
+        if (skip) {
+            watchQueryOptions.initialFetchPolicy = options.initialFetchPolicy || options.fetchPolicy;
+            watchQueryOptions.fetchPolicy = "standby";
+        }
+
+        $[5] = client.defaultOptions.watchQuery;
+        $[6] = options.fetchPolicy;
+        $[7] = options.initialFetchPolicy;
+        $[8] = opts;
+        $[9] = query;
+        $[10] = skip;
+        $[11] = watchQueryOptions;
+    } else {
+        watchQueryOptions = $[11];
+    }
+
+    let t2;
+
+    if ($[12] !== client || $[13] !== query || $[14] !== watchQueryOptions) {
+        t2 = function createState(previous) {
+            const observable = client.watchQuery(watchQueryOptions);
+
+            return {
+                client,
+                query,
+                observable,
+
+                resultData: {
+                    current: observable.getCurrentResult(),
+                    previousData: previous?.resultData.current.data
+                }
+            };
         };
+        $[12] = client;
+        $[13] = query;
+        $[14] = watchQueryOptions;
+        $[15] = t2;
+    } else {
+        t2 = $[15];
     }
+
+    const createState = t2;
     let [state, setState] = React.useState(createState);
+
     if (client !== state.client || query !== state.query) {
-        // If the client or query have changed, we need to create a new InternalState.
-        // This will trigger a re-render with the new state, but it will also continue
-        // to run the current render function to completion.
-        // Since we sometimes trigger some side-effects in the render function, we
-        // re-assign `state` to the new state to ensure that those side-effects are
-        // triggered with the new state.
-        setState((state = createState(state)));
-    }
-    const { observable, resultData } = state;
-    useInitialFetchPolicyIfNecessary(watchQueryOptions, observable);
-    useResubscribeIfNecessary(resultData, // might get mutated during render
-    observable, // might get mutated during render
-    watchQueryOptions);
-    const ssrDisabledOverride = useSyncExternalStore(() => () => { }, () => void 0, () => (ssr === false ? useQuery.ssrDisabledResult : void 0));
-    const resultOverride = skip || watchQueryOptions.fetchPolicy === "standby" ?
-        // When skipping a query (ie. we're not querying for data but still want to
-        // render children), make sure the `data` is cleared out and `loading` is
-        // set to `false` (since we aren't loading anything).
-        //
-        // NOTE: We no longer think this is the correct behavior. Skipping should
-        // not automatically set `data` to `undefined`, but instead leave the
-        // previous data in place. In other words, skipping should not mandate that
-        // previously received data is all of a sudden removed. Unfortunately,
-        // changing this is breaking, so we'll have to wait until Apollo Client 4.0
-        // to address this.
-        useQuery.skipStandbyResult
-        : ssrDisabledOverride;
-    const result = useResultSubscription(observable, resultData, resultOverride);
-    const obsQueryFields = React.useMemo(() => ({
-        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),
-    }), [observable]);
+        const t3 = setState;
+        let t4;
+
+        if ($[16] !== createState || $[17] !== state) {
+            t4 = createState(state);
+            $[16] = createState;
+            $[17] = state;
+            $[18] = t4;
+        } else {
+            t4 = $[18];
+        }
+
+        t3(state = t4);
+    }
+
+    const {
+        observable: observable_0,
+        resultData
+    } = state;
+    useInitialFetchPolicyIfNecessary(watchQueryOptions, observable_0);
+    useResubscribeIfNecessary(resultData, observable_0, watchQueryOptions);
+    const result = useResult(observable_0, resultData, options.ssr);
+    let t3;
+    let t4;
+
+    if ($[19] !== observable_0) {
+        t4 = observable_0.refetch.bind(observable_0);
+        $[19] = observable_0;
+        $[20] = t4;
+    } else {
+        t4 = $[20];
+    }
+
+    let t5;
+
+    if ($[21] !== observable_0) {
+        t5 = observable_0.fetchMore.bind(observable_0);
+        $[21] = observable_0;
+        $[22] = t5;
+    } else {
+        t5 = $[22];
+    }
+
+    let t6;
+
+    if ($[23] !== observable_0) {
+        t6 = observable_0.updateQuery.bind(observable_0);
+        $[23] = observable_0;
+        $[24] = t6;
+    } else {
+        t6 = $[24];
+    }
+
+    let t7;
+
+    if ($[25] !== observable_0) {
+        t7 = observable_0.startPolling.bind(observable_0);
+        $[25] = observable_0;
+        $[26] = t7;
+    } else {
+        t7 = $[26];
+    }
+
+    let t8;
+
+    if ($[27] !== observable_0) {
+        t8 = observable_0.stopPolling.bind(observable_0);
+        $[27] = observable_0;
+        $[28] = t8;
+    } else {
+        t8 = $[28];
+    }
+
+    let t9;
+
+    if ($[29] !== observable_0) {
+        t9 = observable_0.subscribeToMore.bind(observable_0);
+        $[29] = observable_0;
+        $[30] = t9;
+    } else {
+        t9 = $[30];
+    }
+
+    let t10;
+
+    if ($[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
+        t10 = {
+            refetch: t4,
+            fetchMore: t5,
+            updateQuery: t6,
+            startPolling: t7,
+            stopPolling: t8,
+            subscribeToMore: t9
+        };
+        $[31] = t4;
+        $[32] = t5;
+        $[33] = t6;
+        $[34] = t7;
+        $[35] = t8;
+        $[36] = t9;
+        $[37] = t10;
+    } else {
+        t10 = $[37];
+    }
+
+    t3 = t10;
+    const obsQueryFields = t3;
     const previousData = resultData.previousData;
-    return React.useMemo(() => {
-        const { data, partial, ...rest } = result;
-        return {
-            data, // Ensure always defined, even if result.data is missing.
+    let t11;
+    let rest;
+
+    if ($[38] !== result) {
+        const {
+            partial,
+            ...t12
+        } = result;
+        rest = t12;
+        $[38] = result;
+        $[39] = rest;
+    } else {
+        rest = $[39];
+    }
+
+    let t12;
+
+    if ($[40] !== client || $[41] !== obsQueryFields || $[42] !== observable_0 || $[43] !== previousData || $[44] !== rest) {
+        t12 = {
             ...rest,
-            client: client,
-            observable: observable,
-            variables: observable.variables,
+            client,
+            observable: observable_0,
+            variables: observable_0.variables,
             previousData,
-            ...obsQueryFields,
+            ...obsQueryFields
         };
-    }, [result, client, observable, previousData, obsQueryFields]);
+        $[40] = client;
+        $[41] = obsQueryFields;
+        $[42] = observable_0;
+        $[43] = previousData;
+        $[44] = rest;
+        $[45] = t12;
+    } else {
+        t12 = $[45];
+    }
+
+    t11 = t12;
+    return t11;
 }
 function useInitialFetchPolicyIfNecessary(watchQueryOptions, observable) {
     "use no memo";
@@ -144,7 +300,7 @@ function useInitialFetchPolicyIfNecessary(watchQueryOptions, observable) {
         watchQueryOptions.fetchPolicy = observable.options.initialFetchPolicy;
     }
 }
-function useResultSubscription(observable, resultData, resultOverride) {
+function useResult(observable, resultData, ssr) {
     "use no memo";
     return useSyncExternalStore(React.useCallback((handleStoreChange) => {
         const subscription = observable
@@ -156,20 +312,14 @@ function useResultSubscription(observable, resultData, resultOverride) {
             // new value.
             .pipe(observeOn(asapScheduler))
             .subscribe((result) => {
-            const previousResult = resultData.current;
+            const previous = resultData.current;
             // Make sure we're not attempting to re-render similar results
-            // TODO: Eventually move this check inside ObservableQuery. We should
-            // probably not emit a new result if the result is the same.
-            if (previousResult &&
-                previousResult.loading === result.loading &&
-                previousResult.networkStatus === result.networkStatus &&
-                equal(previousResult.data, result.data) &&
-                equal(previousResult.error, result.error)) {
+            if (equal(previous, result)) {
                 return;
             }
-            if (previousResult && previousResult.data) {
+            if (previous.data && !equal(previous.data, result.data)) {
                 // eslint-disable-next-line react-compiler/react-compiler
-                resultData.previousData = previousResult.data;
+                resultData.previousData = previous.data;
             }
             resultData.current = result;
             handleStoreChange();
@@ -181,7 +331,7 @@ function useResultSubscription(observable, resultData, resultOverride) {
         return () => {
             setTimeout(() => subscription.unsubscribe());
         };
-    }, [observable, resultData]), () => resultOverride || resultData.current, () => resultOverride || resultData.current);
+    }, [observable, resultData]), () => resultData.current, () => (ssr === false ? useQuery.ssrDisabledResult : resultData.current));
 }
 // this hook is not compatible with any rules of React, and there's no good way to rewrite it.
 // it should stay a separate hook that will not be optimized by the compiler
@@ -201,28 +351,37 @@ observable, watchQueryOptions) {
         // subscriptions, though it does feel less than ideal that reobserve
         // (potentially) kicks off a network request (for example, when the
         // variables have changed), which is technically a side-effect.
-        observable.reobserve(watchQueryOptions);
+        if (shouldReobserve(observable[lastWatchOptions], watchQueryOptions)) {
+            observable.reobserve(watchQueryOptions);
+        }
+        else {
+            observable.applyOptions(watchQueryOptions);
+        }
         // Make sure getCurrentResult returns a fresh ApolloQueryResult<TData>,
         // but save the current data as this.previousData, just like setResult
         // usually does.
-        resultData.previousData =
-            resultData.current.data || resultData.previousData;
-        resultData.current = observable.getCurrentResult();
+        const result = observable.getCurrentResult();
+        if (!equal(result.data, resultData.current.data)) {
+            resultData.previousData = (resultData.current.data ||
+                resultData.previousData);
+        }
+        resultData.current = result;
     }
     observable[lastWatchOptions] = watchQueryOptions;
 }
+function shouldReobserve(previousOptions, options) {
+    return (previousOptions.query !== options.query ||
+        !equal(previousOptions.variables, options.variables) ||
+        (previousOptions.fetchPolicy !== options.fetchPolicy &&
+            (options.fetchPolicy === "standby" ||
+                previousOptions.fetchPolicy === "standby")));
+}
 useQuery.ssrDisabledResult = maybeDeepFreeze({
     loading: true,
     data: void 0,
+    dataState: "empty",
     error: void 0,
     networkStatus: NetworkStatus.loading,
     partial: true,
 });
-useQuery.skipStandbyResult = maybeDeepFreeze({
-    loading: false,
-    data: void 0,
-    error: void 0,
-    networkStatus: NetworkStatus.ready,
-    partial: true,
-});
 //# sourceMappingURL=useQuery.js.map