@apollo/client 4.0.2 → 4.0.4

package/react/hooks-compiled/useQuery.d.ts

@@ -1,7 +1,9 @@
-import type { ApolloClient, DataState, DefaultContext, DocumentNode, ErrorLike, ErrorPolicy, GetDataState, InternalTypes, ObservableQuery, OperationVariables, RefetchWritePolicy, SubscribeToMoreFunction, TypedDocumentNode, UpdateQueryMapFn, WatchQueryFetchPolicy } from "@apollo/client";
+import type { DataState, DefaultContext, DocumentNode, ErrorLike, ErrorPolicy, GetDataState, InternalTypes, ObservableQuery, OperationVariables, RefetchWritePolicy, SubscribeToMoreFunction, TypedDocumentNode, UpdateQueryMapFn, WatchQueryFetchPolicy } from "@apollo/client";
+import type { ApolloClient } from "@apollo/client";
 import { NetworkStatus } from "@apollo/client";
 import type { MaybeMasked } from "@apollo/client/masking";
 import type { DocumentationTypes as UtilityDocumentationTypes, NoInfer, VariablesOption } from "@apollo/client/utilities/internal";
+import type { SkipToken } from "./constants.js";
 export declare namespace useQuery {
     namespace Base {
         interface Options<TData = unknown, TVariables extends OperationVariables = OperationVariables> {
@@ -119,7 +121,7 @@ export declare namespace useQuery {
         }
     }
     namespace Base {
-        interface Result<TData = unknown, TVariables extends OperationVariables = OperationVariables> {
+        interface Result<TData = unknown, TVariables extends OperationVariables = OperationVariables, TReturnVariables extends OperationVariables = TVariables> {
             /**
             * The instance of Apollo Client that executed the query.
             * Can be useful for manually executing followup queries or writing data to the cache.
@@ -213,7 +215,7 @@ export declare namespace useQuery {
             * 
             * @docGroup 1. Operation data
             */
-            variables: TVariables;
+            variables: TReturnVariables;
             /**
             * 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/).
             *      
@@ -223,7 +225,7 @@ export declare namespace useQuery {
             fetchMore: <TFetchData = TData, TFetchVars extends OperationVariables = TVariables>(fetchMoreOptions: ObservableQuery.FetchMoreOptions<TData, TVariables, TFetchData, TFetchVars>) => Promise<ApolloClient.QueryResult<MaybeMasked<TFetchData>>>;
         }
     }
-    type Result<TData = unknown, TVariables extends OperationVariables = OperationVariables, TStates extends DataState<TData>["dataState"] = DataState<TData>["dataState"]> = Base.Result<TData, TVariables> & GetDataState<MaybeMasked<TData>, TStates>;
+    type Result<TData = unknown, TVariables extends OperationVariables = OperationVariables, TStates extends DataState<TData>["dataState"] = DataState<TData>["dataState"], TReturnVariables extends OperationVariables = TVariables> = Base.Result<TData, TVariables, TReturnVariables> & GetDataState<MaybeMasked<TData>, TStates>;
     namespace DocumentationTypes {
         namespace useQuery {
             interface Result<TData = unknown, TVariables extends OperationVariables = OperationVariables> extends Base.Result<TData, TVariables>, UtilityDocumentationTypes.DataState<TData> {
@@ -345,6 +347,82 @@ export declare function useQuery<TData = unknown, TVariables extends OperationVa
 * @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: SkipToken): useQuery.Result<TData, TVariables, "empty", Record<string, never>>;
+/**
+* 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`, `dataState`, 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 } from "@apollo/client";
+* import { useQuery } from "@apollo/client/react";
+* 
+* 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>;
+* }
+* ```
+* 
+* @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: SkipToken | (useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
+    returnPartialData: true;
+})): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial", Partial<TVariables>>;
+/**
+* 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`, `dataState`, 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 } from "@apollo/client";
+* import { useQuery } from "@apollo/client/react";
+* 
+* 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>;
+* }
+* ```
+* 
+* @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>> & {
     returnPartialData: boolean;
 }): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial">;
@@ -384,9 +462,87 @@ export declare function useQuery<TData = unknown, TVariables extends OperationVa
 * @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: SkipToken | (useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
+    returnPartialData: boolean;
+})): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial", Partial<TVariables>>;
+/**
+* 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`, `dataState`, 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 } from "@apollo/client";
+* import { useQuery } from "@apollo/client/react";
+* 
+* 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>;
+* }
+* ```
+* 
+* @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]: {} extends TVariables ? [
     options?: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>
 ] : [options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>]): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming">;
+/**
+* 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`, `dataState`, 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 } from "@apollo/client";
+* import { useQuery } from "@apollo/client/react";
+* 
+* 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>;
+* }
+* ```
+* 
+* @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]: {} extends TVariables ? [
+    options?: SkipToken | useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>
+] : [options: SkipToken | useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>]): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming", Partial<TVariables>>;
 export declare namespace useQuery {
     var ssrDisabledResult: ObservableQuery.Result<any, "complete" | "streaming" | "partial" | "empty">;
 }

package/react/hooks-compiled/useQuery.js

@@ -17,7 +17,8 @@ import * as React from "react";
 import { asapScheduler, observeOn } from "rxjs";
 import { NetworkStatus } from "@apollo/client";
 import { maybeDeepFreeze, mergeOptions, } from "@apollo/client/utilities/internal";
-import { wrapHook } from "./internal/index.js";
+import { skipToken } from "./constants.js";
+import { useDeepMemo, wrapHook } from "./internal/index.js";
 import { useApolloClient } from "./useApolloClient.js";
 import { useSyncExternalStore } from "./useSyncExternalStore.js";
 const lastWatchOptions = Symbol();
@@ -25,10 +26,10 @@ 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);
+    useQuery_, useApolloClient(typeof options === "object" ? options.client : undefined))(query, options);
 }
 function useQuery_(query, t0) {
-    const $ = _c(46);
+    const $ = _c(38);
     let t1;
 
     if ($[0] !== t0) {
@@ -40,54 +41,25 @@ function useQuery_(query, t0) {
     }
 
     const options = t1;
-    const client = useApolloClient(options.client);
-    let opts;
-    let skip;
+    const client = useApolloClient(typeof options === "object" ? options.client : undefined);
+    let t2;
 
     if ($[2] !== options) {
-        const {
-            skip: t2,
-            ssr,
-            ...t3
-        } = options;
-        skip = t2;
-        opts = t3;
+        t2 = typeof options === "object" ? options : {};
         $[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;
+        $[3] = t2;
     } else {
-        watchQueryOptions = $[11];
+        t2 = $[3];
     }
 
-    let t2;
+    const {
+        ssr
+    } = t2;
+    const watchQueryOptions = useOptions(query, options, client.defaultOptions.watchQuery);
+    let t3;
 
-    if ($[12] !== client || $[13] !== query || $[14] !== watchQueryOptions) {
-        t2 = function createState(previous) {
+    if ($[4] !== client || $[5] !== query || $[6] !== watchQueryOptions) {
+        t3 = function createState(previous) {
             const observable = client.watchQuery(watchQueryOptions);
 
             return {
@@ -102,31 +74,31 @@ function useQuery_(query, t0) {
                 }
             };
         };
-        $[12] = client;
-        $[13] = query;
-        $[14] = watchQueryOptions;
-        $[15] = t2;
+        $[4] = client;
+        $[5] = query;
+        $[6] = watchQueryOptions;
+        $[7] = t3;
     } else {
-        t2 = $[15];
+        t3 = $[7];
     }
 
-    const createState = t2;
+    const createState = t3;
     let [state, setState] = React.useState(createState);
 
     if (client !== state.client || query !== state.query) {
-        const t3 = setState;
-        let t4;
-
-        if ($[16] !== createState || $[17] !== state) {
-            t4 = createState(state);
-            $[16] = createState;
-            $[17] = state;
-            $[18] = t4;
+        const t4 = setState;
+        let t5;
+
+        if ($[8] !== createState || $[9] !== state) {
+            t5 = createState(state);
+            $[8] = createState;
+            $[9] = state;
+            $[10] = t5;
         } else {
-            t4 = $[18];
+            t5 = $[10];
         }
 
-        t3(state = t4);
+        t4(state = t5);
     }
 
     const {
@@ -135,112 +107,112 @@ function useQuery_(query, t0) {
     } = state;
     useInitialFetchPolicyIfNecessary(watchQueryOptions, observable_0);
     useResubscribeIfNecessary(resultData, observable_0, watchQueryOptions);
-    const result = useResult(observable_0, resultData, options.ssr);
-    let t3;
+    const result = useResult(observable_0, resultData, ssr);
     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;
+    if ($[11] !== observable_0) {
+        t5 = observable_0.refetch.bind(observable_0);
+        $[11] = observable_0;
+        $[12] = t5;
     } else {
-        t5 = $[22];
+        t5 = $[12];
     }
 
     let t6;
 
-    if ($[23] !== observable_0) {
-        t6 = observable_0.updateQuery.bind(observable_0);
-        $[23] = observable_0;
-        $[24] = t6;
+    if ($[13] !== observable_0) {
+        t6 = observable_0.fetchMore.bind(observable_0);
+        $[13] = observable_0;
+        $[14] = t6;
     } else {
-        t6 = $[24];
+        t6 = $[14];
     }
 
     let t7;
 
-    if ($[25] !== observable_0) {
-        t7 = observable_0.startPolling.bind(observable_0);
-        $[25] = observable_0;
-        $[26] = t7;
+    if ($[15] !== observable_0) {
+        t7 = observable_0.updateQuery.bind(observable_0);
+        $[15] = observable_0;
+        $[16] = t7;
     } else {
-        t7 = $[26];
+        t7 = $[16];
     }
 
     let t8;
 
-    if ($[27] !== observable_0) {
-        t8 = observable_0.stopPolling.bind(observable_0);
-        $[27] = observable_0;
-        $[28] = t8;
+    if ($[17] !== observable_0) {
+        t8 = observable_0.startPolling.bind(observable_0);
+        $[17] = observable_0;
+        $[18] = t8;
     } else {
-        t8 = $[28];
+        t8 = $[18];
     }
 
     let t9;
 
-    if ($[29] !== observable_0) {
-        t9 = observable_0.subscribeToMore.bind(observable_0);
-        $[29] = observable_0;
-        $[30] = t9;
+    if ($[19] !== observable_0) {
+        t9 = observable_0.stopPolling.bind(observable_0);
+        $[19] = observable_0;
+        $[20] = t9;
     } else {
-        t9 = $[30];
+        t9 = $[20];
     }
 
     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
+    if ($[21] !== observable_0) {
+        t10 = observable_0.subscribeToMore.bind(observable_0);
+        $[21] = observable_0;
+        $[22] = t10;
+    } else {
+        t10 = $[22];
+    }
+
+    let t11;
+
+    if ($[23] !== t10 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7 || $[27] !== t8 || $[28] !== t9) {
+        t11 = {
+            refetch: t5,
+            fetchMore: t6,
+            updateQuery: t7,
+            startPolling: t8,
+            stopPolling: t9,
+            subscribeToMore: t10
         };
-        $[31] = t4;
-        $[32] = t5;
-        $[33] = t6;
-        $[34] = t7;
-        $[35] = t8;
-        $[36] = t9;
-        $[37] = t10;
+        $[23] = t10;
+        $[24] = t5;
+        $[25] = t6;
+        $[26] = t7;
+        $[27] = t8;
+        $[28] = t9;
+        $[29] = t11;
     } else {
-        t10 = $[37];
+        t11 = $[29];
     }
 
-    t3 = t10;
-    const obsQueryFields = t3;
+    t4 = t11;
+    const obsQueryFields = t4;
     const previousData = resultData.previousData;
-    let t11;
+    let t12;
     let rest;
 
-    if ($[38] !== result) {
+    if ($[30] !== result) {
         const {
             partial,
-            ...t12
+            ...t13
         } = result;
-        rest = t12;
-        $[38] = result;
-        $[39] = rest;
+        rest = t13;
+        $[30] = result;
+        $[31] = rest;
     } else {
-        rest = $[39];
+        rest = $[31];
     }
 
-    let t12;
+    let t13;
 
-    if ($[40] !== client || $[41] !== obsQueryFields || $[42] !== observable_0 || $[43] !== previousData || $[44] !== rest) {
-        t12 = {
+    if ($[32] !== client || $[33] !== obsQueryFields || $[34] !== observable_0 || $[35] !== previousData || $[36] !== rest) {
+        t13 = {
             ...rest,
             client,
             observable: observable_0,
@@ -248,18 +220,59 @@ function useQuery_(query, t0) {
             previousData,
             ...obsQueryFields
         };
-        $[40] = client;
-        $[41] = obsQueryFields;
-        $[42] = observable_0;
-        $[43] = previousData;
-        $[44] = rest;
-        $[45] = t12;
+        $[32] = client;
+        $[33] = obsQueryFields;
+        $[34] = observable_0;
+        $[35] = previousData;
+        $[36] = rest;
+        $[37] = t13;
     } else {
-        t12 = $[45];
+        t13 = $[37];
     }
 
-    t11 = t12;
-    return t11;
+    t12 = t13;
+    return t12;
+}
+const fromSkipToken = Symbol();
+function useOptions(query, options, defaultOptions) {
+    const $ = _c(5);
+    let t0;
+    let t1;
+
+    if ($[0] !== defaultOptions || $[1] !== options || $[2] !== query) {
+        t0 = () => {
+            if (options === skipToken) {
+                const opts = mergeOptions(defaultOptions, {
+                    query,
+                    fetchPolicy: "standby"
+                });
+                opts[fromSkipToken] = true;
+                return opts;
+            }
+
+            const watchQueryOptions = mergeOptions(defaultOptions, {
+                ...options,
+                query
+            });
+
+            if (options.skip) {
+                watchQueryOptions.initialFetchPolicy = options.initialFetchPolicy || options.fetchPolicy;
+                watchQueryOptions.fetchPolicy = "standby";
+            }
+
+            return watchQueryOptions;
+        };t1 = [query, options, defaultOptions];
+        $[0] = defaultOptions;
+        $[1] = options;
+        $[2] = query;
+        $[3] = t0;
+        $[4] = t1;
+    } else {
+        t0 = $[3];
+        t1 = $[4];
+    }
+
+    return useDeepMemo(t0, t1);
 }
 function useInitialFetchPolicyIfNecessary(watchQueryOptions, observable) {
     "use no memo";
@@ -316,6 +329,14 @@ observable, watchQueryOptions) {
     "use no memo";
     if (observable[lastWatchOptions] &&
         !equal(observable[lastWatchOptions], watchQueryOptions)) {
+        // If skipToken was used to generate options, we won't know the correct
+        // initialFetchPolicy until the hook is rerendered with real options, so we
+        // set it the next time we get real options
+        if (observable[lastWatchOptions][fromSkipToken] &&
+            !watchQueryOptions.initialFetchPolicy) {
+            watchQueryOptions.initialFetchPolicy =
+                watchQueryOptions.fetchPolicy;
+        }
         // Though it might be tempting to postpone this reobserve call to the
         // useEffect block, we need getCurrentResult to return an appropriate
         // loading:true result synchronously (later within the same call to