@depup/apollo__client 4.1.6-depup.0

package/react/hooks-compiled/useSubscription.js

@@ -0,0 +1,366 @@
+import { c as _c } from "@apollo/client/react/internal/compiler-runtime";
+import { equal } from "@wry/equality";
+import * as React from "react";
+import { invariant } from "@apollo/client/utilities/invariant";
+import { useDeepMemo } from "./internal/useDeepMemo.js";
+import { useIsomorphicLayoutEffect } from "./internal/useIsomorphicLayoutEffect.js";
+import { useApolloClient } from "./useApolloClient.js";
+import { useSyncExternalStore } from "./useSyncExternalStore.js";
+/**
+ * > Refer to the [Subscriptions](https://www.apollographql.com/docs/react/data/subscriptions/) section for a more in-depth overview of `useSubscription`.
+ *
+ * @example
+ *
+ * ```jsx
+ * const COMMENTS_SUBSCRIPTION = gql`
+ *   subscription OnCommentAdded($repoFullName: String!) {
+ *     commentAdded(repoFullName: $repoFullName) {
+ *       id
+ *       content
+ *     }
+ *   }
+ * `;
+ *
+ * function DontReadTheComments({ repoFullName }) {
+ *   const {
+ *     data: { commentAdded },
+ *     loading,
+ *   } = useSubscription(COMMENTS_SUBSCRIPTION, { variables: { repoFullName } });
+ *   return <h4>New comment: {!loading && commentAdded.content}</h4>;
+ * }
+ * ```
+ *
+ * @remarks
+ *
+ * #### Consider using `onData` instead of `useEffect`
+ *
+ * If you want to react to incoming data, please use the `onData` option instead of `useEffect`.
+ * State updates you make inside a `useEffect` hook might cause additional rerenders, and `useEffect` is mostly meant for side effects of rendering, not as an event handler.
+ * State updates made in an event handler like `onData` might - depending on the React version - be batched and cause only a single rerender.
+ *
+ * Consider the following component:
+ *
+ * ```jsx
+ * export function Subscriptions() {
+ *   const { data, error, loading } = useSubscription(query);
+ *   const [accumulatedData, setAccumulatedData] = useState([]);
+ *
+ *   useEffect(() => {
+ *     setAccumulatedData((prev) => [...prev, data]);
+ *   }, [data]);
+ *
+ *   return (
+ *     <>
+ *       {loading && <p>Loading...</p>}
+ *       {JSON.stringify(accumulatedData, undefined, 2)}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * Instead of using `useEffect` here, we can re-write this component to use the `onData` callback function accepted in `useSubscription`'s `options` object:
+ *
+ * ```jsx
+ * export function Subscriptions() {
+ *   const [accumulatedData, setAccumulatedData] = useState([]);
+ *   const { data, error, loading } = useSubscription(query, {
+ *     onData({ data }) {
+ *       setAccumulatedData((prev) => [...prev, data]);
+ *     },
+ *   });
+ *
+ *   return (
+ *     <>
+ *       {loading && <p>Loading...</p>}
+ *       {JSON.stringify(accumulatedData, undefined, 2)}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * > ⚠️ **Note:** The `useSubscription` option `onData` is available in Apollo Client >= 3.7. In previous versions, the equivalent option is named `onSubscriptionData`.
+ *
+ * Now, the first message will be added to the `accumulatedData` array since `onData` is called _before_ the component re-renders. React 18 automatic batching is still in effect and results in a single re-render, but with `onData` we can guarantee each message received after the component mounts is added to `accumulatedData`.
+ *
+ * @param subscription - A GraphQL subscription document parsed into an AST by `gql`.
+ * @param options - Options to control how the subscription is executed.
+ * @returns Query result object
+ */
+export function useSubscription(subscription, ...t0) {
+    const $ = _c(36);
+    const [t1] = t0;
+    let t2;
+
+    if ($[0] !== t1) {
+        t2 = t1 === undefined ? {} : t1;
+        $[0] = t1;
+        $[1] = t2;
+    } else {
+        t2 = $[1];
+    }
+
+    const options = t2;
+    const client = useApolloClient(options.client);
+    const {
+        skip,
+        fetchPolicy,
+        errorPolicy,
+        shouldResubscribe,
+        context,
+        extensions,
+        ignoreResults
+    } = options;
+    let t3;
+    let t4;
+
+    if ($[2] !== options.variables) {
+        t3 = () => options.variables;t4 = [options.variables];
+        $[2] = options.variables;
+        $[3] = t3;
+        $[4] = t4;
+    } else {
+        t3 = $[3];
+        t4 = $[4];
+    }
+
+    const variables = useDeepMemo(t3, t4);
+    let t5;
+
+    if ($[5] !== client || $[6] !== context || $[7] !== errorPolicy || $[8] !== extensions || $[9] !== fetchPolicy || $[10] !== subscription || $[11] !== variables) {
+        t5 = () => createSubscription(
+            client,
+            subscription,
+            variables,
+            fetchPolicy,
+            errorPolicy,
+            context,
+            extensions
+        );
+        $[5] = client;
+        $[6] = context;
+        $[7] = errorPolicy;
+        $[8] = extensions;
+        $[9] = fetchPolicy;
+        $[10] = subscription;
+        $[11] = variables;
+        $[12] = t5;
+    } else {
+        t5 = $[12];
+    }
+
+    const recreate = t5;
+    const [t6, setObservable] = React.useState(options.skip ? null : recreate);
+    let observable = t6;
+    const recreateRef = React.useRef(recreate);
+    let t7;
+
+    if ($[13] !== recreate) {
+        t7 = () => {
+            recreateRef.current = recreate;
+        };
+        $[13] = recreate;
+        $[14] = t7;
+    } else {
+        t7 = $[14];
+    }
+
+    useIsomorphicLayoutEffect(t7);
+    if (skip) {
+        if (observable) {
+            setObservable(observable = null);
+        }
+    } else {
+        if (!observable || (client !== observable.__.client || subscription !== observable.__.query || fetchPolicy !== observable.__.fetchPolicy || errorPolicy !== observable.__.errorPolicy || !equal(variables, observable.__.variables)) && (typeof shouldResubscribe === "function" ? !!shouldResubscribe(options) : shouldResubscribe) !== false) {
+            setObservable(observable = recreate());
+        }
+    }
+    const optionsRef = React.useRef(options);
+    let t8;
+
+    if ($[15] !== options) {
+        t8 = () => {
+            optionsRef.current = options;
+        };
+        $[15] = options;
+        $[16] = t8;
+    } else {
+        t8 = $[16];
+    }
+
+    React.useEffect(t8);
+    const fallbackLoading = !skip && !ignoreResults;
+    let t9;
+
+    if ($[17] !== fallbackLoading) {
+        t9 = {
+            loading: fallbackLoading,
+            error: void 0,
+            data: void 0
+        };
+        $[17] = fallbackLoading;
+        $[18] = t9;
+    } else {
+        t9 = $[18];
+    }
+
+    const fallbackResult = t9;
+    const ignoreResultsRef = React.useRef(ignoreResults);
+    let t10;
+
+    if ($[19] !== ignoreResults) {
+        t10 = () => {
+            ignoreResultsRef.current = ignoreResults;
+        };
+        $[19] = ignoreResults;
+        $[20] = t10;
+    } else {
+        t10 = $[20];
+    }
+
+    useIsomorphicLayoutEffect(t10);
+    let t11;
+
+    if ($[21] !== observable) {
+        t11 = update => {
+            if (!observable) {
+                return _temp;
+            }
+            let subscriptionStopped = false;
+            const client_0 = observable.__.client;
+            const subscription_0 = observable.subscribe({
+                next(value) {
+                    if (subscriptionStopped) {
+                        return;
+                    }
+                    const result = {
+                        loading: false,
+                        data: value.data,
+                        error: value.error
+                    };
+                    observable.__.setResult(result);
+                    if (!ignoreResultsRef.current) {
+                        update();
+                    }
+                    if (result.error) {
+                        optionsRef.current.onError?.(result.error);
+                    } else {
+                        if (optionsRef.current.onData) {
+                            optionsRef.current.onData({
+                                client: client_0,
+                                data: result
+                            });
+                        }
+                    }
+                },
+
+                complete() {
+                    observable.__.completed = true;
+                    if (!subscriptionStopped && optionsRef.current.onComplete) {
+                        optionsRef.current.onComplete();
+                    }
+                }
+            });
+
+            return () => {
+                subscriptionStopped = true;
+                setTimeout(() => subscription_0.unsubscribe());
+            };
+        };
+        $[21] = observable;
+        $[22] = t11;
+    } else {
+        t11 = $[22];
+    }
+
+    observable;
+    let t12;
+
+    if ($[23] !== fallbackResult || $[24] !== ignoreResults || $[25] !== observable || $[26] !== skip) {
+        t12 = () => observable && !skip && !ignoreResults ? observable.__.result : fallbackResult;
+        $[23] = fallbackResult;
+        $[24] = ignoreResults;
+        $[25] = observable;
+        $[26] = skip;
+        $[27] = t12;
+    } else {
+        t12 = $[27];
+    }
+
+    let t13;
+
+    if ($[28] !== fallbackResult) {
+        t13 = () => fallbackResult;
+        $[28] = fallbackResult;
+        $[29] = t13;
+    } else {
+        t13 = $[29];
+    }
+
+    const ret = useSyncExternalStore(t11, t12, t13);
+    let t14;
+
+    if ($[30] !== observable || $[31] !== setObservable) {
+        t14 = () => {
+            invariant(!optionsRef.current.skip, 33);
+            if (observable?.__.completed) {
+                setObservable(recreateRef.current());
+            } else {
+                observable?.restart();
+            }
+        };
+        $[30] = observable;
+        $[31] = setObservable;
+        $[32] = t14;
+    } else {
+        t14 = $[32];
+    }
+
+    observable;
+    const restart = t14;
+    let t15;
+
+    if ($[33] !== restart || $[34] !== ret) {
+        t15 = {
+            ...ret,
+            restart
+        };
+        $[33] = restart;
+        $[34] = ret;
+        $[35] = t15;
+    } else {
+        t15 = $[35];
+    }
+
+    return t15;
+}
+function _temp() {}
+function createSubscription(client, query, variables, fetchPolicy, errorPolicy, context, extensions) {
+    const options = {
+        query,
+        variables,
+        fetchPolicy,
+        errorPolicy,
+        context,
+        extensions,
+    };
+    const __ = {
+        ...options,
+        client,
+        completed: false,
+        result: {
+            loading: true,
+            data: void 0,
+            error: void 0,
+        },
+        setResult(result) {
+            __.result = result;
+        },
+    };
+    return Object.assign(client.subscribe(options), {
+        /**
+         * A tracking object to store details about the observable and the latest result of the subscription.
+         */
+        __,
+    });
+}
+//# sourceMappingURL=useSubscription.js.map

package/react/hooks-compiled/useSubscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubscription.js","sources":["../../../src/react/hooks/useSubscription.ts"],"sourcesContent":["import type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport { equal } from \"@wry/equality\";\nimport type { DocumentNode } from \"graphql\";\nimport * as React from \"react\";\n\nimport type {\n  ApolloClient,\n  DefaultContext,\n  ErrorLike,\n  ErrorPolicy,\n  FetchPolicy,\n  OperationVariables,\n} from \"@apollo/client\";\nimport type { MaybeMasked } from \"@apollo/client/masking\";\nimport type { DocumentationTypes as UtilityDocumentationTypes } from \"@apollo/client/utilities/internal\";\nimport type {\n  NoInfer,\n  VariablesOption,\n} from \"@apollo/client/utilities/internal\";\nimport { invariant } from \"@apollo/client/utilities/invariant\";\n\nimport { useDeepMemo } from \"./internal/useDeepMemo.js\";\nimport { useIsomorphicLayoutEffect } from \"./internal/useIsomorphicLayoutEffect.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\nimport { useSyncExternalStore } from \"./useSyncExternalStore.js\";\n\nexport declare namespace useSubscription {\n  import _self = useSubscription;\n  export namespace Base {\n    export interface Options<\n      TData = unknown,\n      TVariables extends OperationVariables = OperationVariables,\n    > {\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#fetchPolicy:member} */\n      fetchPolicy?: FetchPolicy;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#errorPolicy:member} */\n      errorPolicy?: ErrorPolicy;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#shouldResubscribe:member} */\n      shouldResubscribe?:\n        | boolean\n        | ((options: Options<TData, TVariables>) => boolean);\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#client:member} */\n      client?: ApolloClient;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#skip:member} */\n      skip?: boolean;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#context:member} */\n      context?: DefaultContext;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#extensions:member} */\n      extensions?: Record<string, any>;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#onComplete:member} */\n      onComplete?: () => void;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#onData:member} */\n      onData?: (options: OnDataOptions<TData>) => any;\n\n      /** {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#onError:member} */\n      onError?: (error: ErrorLike) => void;\n\n      /**\n       * {@inheritDoc @apollo/client!SubscriptionOptionsDocumentation#ignoreResults:member}\n       * @defaultValue `false`\n       */\n      ignoreResults?: boolean;\n    }\n  }\n\n  export type Options<\n    TData = unknown,\n    TVariables extends OperationVariables = OperationVariables,\n  > = Base.Options<TData, TVariables> & VariablesOption<TVariables>;\n\n  export namespace DocumentationTypes {\n    namespace useSubscription {\n      export interface Options<\n        TData = unknown,\n        TVariables extends OperationVariables = OperationVariables,\n      > extends Base.Options<TData, TVariables>,\n          UtilityDocumentationTypes.VariableOptions<TVariables> {}\n    }\n  }\n\n  export interface Result<TData = unknown> {\n    /** {@inheritDoc @apollo/client!SubscriptionResultDocumentation#loading:member} */\n    loading: boolean;\n\n    /** {@inheritDoc @apollo/client!SubscriptionResultDocumentation#data:member} */\n    data?: MaybeMasked<TData>;\n\n    /** {@inheritDoc @apollo/client!SubscriptionResultDocumentation#error:member} */\n    error?: ErrorLike;\n\n    /**\n     * A function that when called will disconnect and reconnect the connection\n     * to the subscription. If the subscription is deduplicated, this will\n     * restart the connection for all deduplicated subscriptions.\n     */\n    restart: () => void;\n  }\n\n  export namespace DocumentationTypes {\n    namespace useSubscription {\n      export interface Result<TData = unknown> extends _self.Result<TData> {}\n    }\n  }\n\n  export namespace DocumentationTypes {\n    /** {@inheritDoc @apollo/client/react!useSubscription:function(1)} */\n    export function useSubscription<\n      TData = unknown,\n      TVariables extends OperationVariables = OperationVariables,\n    >(\n      options?: useSubscription.Options<TData, TVariables>\n    ): useSubscription.Result<TData>;\n  }\n\n  export type OnDataResult<TData = unknown> = Omit<Result<TData>, \"restart\">;\n\n  export interface OnDataOptions<TData = unknown> {\n    client: ApolloClient;\n    data: OnDataResult<TData>;\n  }\n\n  export interface OnSubscriptionDataOptions<TData = unknown> {\n    client: ApolloClient;\n    subscriptionData: OnDataResult<TData>;\n  }\n}\n\n/**\n * > Refer to the [Subscriptions](https://www.apollographql.com/docs/react/data/subscriptions/) section for a more in-depth overview of `useSubscription`.\n *\n * @example\n *\n * ```jsx\n * const COMMENTS_SUBSCRIPTION = gql`\n *   subscription OnCommentAdded($repoFullName: String!) {\n *     commentAdded(repoFullName: $repoFullName) {\n *       id\n *       content\n *     }\n *   }\n * `;\n *\n * function DontReadTheComments({ repoFullName }) {\n *   const {\n *     data: { commentAdded },\n *     loading,\n *   } = useSubscription(COMMENTS_SUBSCRIPTION, { variables: { repoFullName } });\n *   return <h4>New comment: {!loading && commentAdded.content}</h4>;\n * }\n * ```\n *\n * @remarks\n *\n * #### Consider using `onData` instead of `useEffect`\n *\n * If you want to react to incoming data, please use the `onData` option instead of `useEffect`.\n * State updates you make inside a `useEffect` hook might cause additional rerenders, and `useEffect` is mostly meant for side effects of rendering, not as an event handler.\n * State updates made in an event handler like `onData` might - depending on the React version - be batched and cause only a single rerender.\n *\n * Consider the following component:\n *\n * ```jsx\n * export function Subscriptions() {\n *   const { data, error, loading } = useSubscription(query);\n *   const [accumulatedData, setAccumulatedData] = useState([]);\n *\n *   useEffect(() => {\n *     setAccumulatedData((prev) => [...prev, data]);\n *   }, [data]);\n *\n *   return (\n *     <>\n *       {loading && <p>Loading...</p>}\n *       {JSON.stringify(accumulatedData, undefined, 2)}\n *     </>\n *   );\n * }\n * ```\n *\n * Instead of using `useEffect` here, we can re-write this component to use the `onData` callback function accepted in `useSubscription`'s `options` object:\n *\n * ```jsx\n * export function Subscriptions() {\n *   const [accumulatedData, setAccumulatedData] = useState([]);\n *   const { data, error, loading } = useSubscription(query, {\n *     onData({ data }) {\n *       setAccumulatedData((prev) => [...prev, data]);\n *     },\n *   });\n *\n *   return (\n *     <>\n *       {loading && <p>Loading...</p>}\n *       {JSON.stringify(accumulatedData, undefined, 2)}\n *     </>\n *   );\n * }\n * ```\n *\n * > ⚠️ **Note:** The `useSubscription` option `onData` is available in Apollo Client >= 3.7. In previous versions, the equivalent option is named `onSubscriptionData`.\n *\n * Now, the first message will be added to the `accumulatedData` array since `onData` is called _before_ the component re-renders. React 18 automatic batching is still in effect and results in a single re-render, but with `onData` we can guarantee each message received after the component mounts is added to `accumulatedData`.\n *\n * @param subscription - A GraphQL subscription document parsed into an AST by `gql`.\n * @param options - Options to control how the subscription is executed.\n * @returns Query result object\n */\nexport function useSubscription<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  subscription: DocumentNode | TypedDocumentNode<TData, TVariables>,\n  ...[options = {} as useSubscription.Options<TData, TVariables>]: {} extends (\n    TVariables\n  ) ?\n    [options?: useSubscription.Options<NoInfer<TData>, NoInfer<TVariables>>]\n  : [options: useSubscription.Options<NoInfer<TData>, NoInfer<TVariables>>]\n): useSubscription.Result<TData> {\n  const client = useApolloClient(options.client);\n\n  const {\n    skip,\n    fetchPolicy,\n    errorPolicy,\n    shouldResubscribe,\n    context,\n    extensions,\n    ignoreResults,\n  } = options;\n  const variables = useDeepMemo(() => options.variables, [options.variables]);\n\n  const recreate = () =>\n    createSubscription(\n      client,\n      subscription,\n      variables,\n      fetchPolicy,\n      errorPolicy,\n      context,\n      extensions\n    );\n\n  let [observable, setObservable] = React.useState(\n    options.skip ? null : recreate\n  );\n\n  const recreateRef = React.useRef(recreate);\n  useIsomorphicLayoutEffect(() => {\n    recreateRef.current = recreate;\n  });\n\n  if (skip) {\n    if (observable) {\n      setObservable((observable = null));\n    }\n  } else if (\n    !observable ||\n    ((client !== observable.__.client ||\n      subscription !== observable.__.query ||\n      fetchPolicy !== observable.__.fetchPolicy ||\n      errorPolicy !== observable.__.errorPolicy ||\n      !equal(variables, observable.__.variables)) &&\n      (typeof shouldResubscribe === \"function\" ?\n        !!shouldResubscribe(options!)\n      : shouldResubscribe) !== false)\n  ) {\n    setObservable((observable = recreate()));\n  }\n\n  const optionsRef = React.useRef(options);\n  React.useEffect(() => {\n    optionsRef.current = options;\n  });\n\n  const fallbackLoading = !skip && !ignoreResults;\n  const fallbackResult = React.useMemo(\n    () => ({\n      loading: fallbackLoading,\n      error: void 0,\n      data: void 0,\n    }),\n    [fallbackLoading]\n  );\n\n  const ignoreResultsRef = React.useRef(ignoreResults);\n  useIsomorphicLayoutEffect(() => {\n    // We cannot reference `ignoreResults` directly in the effect below\n    // it would add a dependency to the `useEffect` deps array, which means the\n    // subscription would be recreated if `ignoreResults` changes\n    // As a result, on resubscription, the last result would be re-delivered,\n    // rendering the component one additional time, and re-triggering `onData`.\n    // The same applies to `fetchPolicy`, which results in a new `observable`\n    // being created. We cannot really avoid it in that case, but we can at least\n    // avoid it for `ignoreResults`.\n    ignoreResultsRef.current = ignoreResults;\n  });\n\n  const ret = useSyncExternalStore(\n    React.useCallback(\n      (update) => {\n        if (!observable) {\n          return () => {};\n        }\n\n        let subscriptionStopped = false;\n        const client = observable.__.client;\n        const subscription = observable.subscribe({\n          next(value) {\n            if (subscriptionStopped) {\n              return;\n            }\n\n            const result = {\n              loading: false,\n              data: value.data,\n              error: value.error,\n            };\n\n            observable.__.setResult(result);\n            if (!ignoreResultsRef.current) update();\n\n            if (result.error) {\n              optionsRef.current.onError?.(result.error);\n            } else if (optionsRef.current.onData) {\n              optionsRef.current.onData({\n                client,\n                data: result,\n              });\n            }\n          },\n          complete() {\n            observable.__.completed = true;\n            if (!subscriptionStopped && optionsRef.current.onComplete) {\n              optionsRef.current.onComplete();\n            }\n          },\n        });\n\n        return () => {\n          // immediately stop receiving subscription values, but do not unsubscribe\n          // until after a short delay in case another useSubscription hook is\n          // reusing the same underlying observable and is about to subscribe\n          subscriptionStopped = true;\n\n          setTimeout(() => subscription.unsubscribe());\n        };\n      },\n      [observable]\n    ),\n    () =>\n      observable && !skip && !ignoreResults ?\n        observable.__.result\n      : fallbackResult,\n    () => fallbackResult\n  );\n\n  const restart = React.useCallback(() => {\n    invariant(\n      !optionsRef.current.skip,\n      \"A subscription that is skipped cannot be restarted.\"\n    );\n    if (observable?.__.completed) {\n      setObservable(recreateRef.current());\n    } else {\n      observable?.restart();\n    }\n  }, [observable, setObservable, optionsRef, recreateRef]);\n\n  return React.useMemo(() => ({ ...ret, restart }), [ret, restart]);\n}\n\ntype SubscriptionResult<TData> = Omit<useSubscription.Result<TData>, \"restart\">;\n\nfunction createSubscription<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  client: ApolloClient,\n  query: TypedDocumentNode<TData, TVariables>,\n  variables: TVariables | undefined,\n  fetchPolicy: FetchPolicy | undefined,\n  errorPolicy: ErrorPolicy | undefined,\n  context: DefaultContext | undefined,\n  extensions: Record<string, any> | undefined\n) {\n  const options = {\n    query,\n    variables,\n    fetchPolicy,\n    errorPolicy,\n    context,\n    extensions,\n  } as ApolloClient.SubscribeOptions<TData, TVariables>;\n  const __ = {\n    ...options,\n    client,\n    completed: false,\n    result: {\n      loading: true,\n      data: void 0,\n      error: void 0,\n    } as SubscriptionResult<TData>,\n    setResult(result: SubscriptionResult<TData>) {\n      __.result = result;\n    },\n  };\n\n  return Object.assign(client.subscribe(options), {\n    /**\n     * A tracking object to store details about the observable and the latest result of the subscription.\n     */\n    __,\n  });\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,105 @@
+import type { ApolloClient, DataValue, DocumentNode, OperationVariables, TypedDocumentNode } from "@apollo/client";
+import type { ApolloCache } from "@apollo/client/cache";
+import type { MaybeMasked } from "@apollo/client/masking";
+import type { DocumentationTypes as UtilityDocumentationTypes, NoInfer, VariablesOption } from "@apollo/client/utilities/internal";
+export declare namespace useSuspenseFragment {
+    import _self = useSuspenseFragment;
+    namespace Base {
+        type Options<TData, TVariables extends OperationVariables> = {
+            /**
+             * A GraphQL document created using the `gql` template string tag from
+             * `graphql-tag` with one or more fragments which will be used to determine
+             * the shape of data to read. If you provide more than one fragment in this
+             * document then you must also specify `fragmentName` to select a single.
+             */
+            fragment: DocumentNode | TypedDocumentNode<TData, TVariables>;
+            /**
+             * The name of the fragment in your GraphQL document to be used. If you do
+             * not provide a `fragmentName` and there is only one fragment in your
+             * `fragment` document then that fragment will be used.
+             */
+            fragmentName?: string;
+            /**
+             * An object or array containing a `__typename` and primary key fields
+             * (such as `id`) identifying the entity object from which the fragment will
+             * be retrieved, or a `{ __ref: "..." }` reference, or a `string` ID (uncommon).
+             */
+            from: useSuspenseFragment.FromOptionValue<TData> | Array<useSuspenseFragment.FromOptionValue<TData> | null> | null;
+            optimistic?: boolean;
+            /**
+             * The instance of `ApolloClient` to use to look up the fragment.
+             *
+             * By default, the instance that's passed down via context is used, but you
+             * can provide a different instance here.
+             *
+             * @docGroup 1. Operation options
+             */
+            client?: ApolloClient;
+        };
+    }
+    type Options<TData, TVariables extends OperationVariables> = Base.Options<TData, TVariables> & VariablesOption<NoInfer<TVariables>>;
+    namespace DocumentationTypes {
+        namespace useSuspenseFragment {
+            interface Options<TData = unknown, TVariables extends OperationVariables = OperationVariables> extends Base.Options<TData, TVariables>, UtilityDocumentationTypes.VariableOptions<TVariables> {
+            }
+        }
+    }
+    /**
+     * Acceptable values provided to the `from` option.
+     */
+    type FromOptionValue<TData> = ApolloCache.FromOptionValue<TData>;
+    interface Result<TData> {
+        data: DataValue.Complete<MaybeMasked<TData>>;
+    }
+    namespace DocumentationTypes {
+        namespace useSuspenseFragment {
+            interface Result<TData = unknown> extends _self.Result<TData> {
+            }
+        }
+    }
+    namespace DocumentationTypes {
+        /**
+        * #TODO documentation
+        */
+        function useSuspenseFragment<TData, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables>): useSuspenseFragment.Result<TData>;
+    }
+}
+/** #TODO documentation */
+export declare function useSuspenseFragment<TData = unknown, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables> & {
+    from: Array<useSuspenseFragment.FromOptionValue<TData>>;
+}): useSuspenseFragment.Result<Array<TData>>;
+/**
+* #TODO documentation
+*/
+export declare function useSuspenseFragment<TData = unknown, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables> & {
+    from: Array<null>;
+}): useSuspenseFragment.Result<Array<null>>;
+/**
+* #TODO documentation
+*/
+export declare function useSuspenseFragment<TData = unknown, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables> & {
+    from: Array<useSuspenseFragment.FromOptionValue<TData> | null>;
+}): useSuspenseFragment.Result<Array<TData | null>>;
+/**
+* #TODO documentation
+*/
+export declare function useSuspenseFragment<TData, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables> & {
+    from: useSuspenseFragment.FromOptionValue<TData>;
+}): useSuspenseFragment.Result<TData>;
+/**
+* #TODO documentation
+*/
+export declare function useSuspenseFragment<TData, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables> & {
+    from: null;
+}): useSuspenseFragment.Result<null>;
+/**
+* #TODO documentation
+*/
+export declare function useSuspenseFragment<TData, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables> & {
+    from: useSuspenseFragment.FromOptionValue<TData> | null;
+}): useSuspenseFragment.Result<TData | null>;
+/**
+* #TODO documentation
+*/
+export declare function useSuspenseFragment<TData, TVariables extends OperationVariables = OperationVariables>(options: useSuspenseFragment.Options<TData, TVariables>): useSuspenseFragment.Result<TData>;
+//# sourceMappingURL=useSuspenseFragment.d.ts.map

package/react/hooks-compiled/useSuspenseFragment.js

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { canonicalStringify } from "@apollo/client/cache";
+import { getSuspenseCache } from "@apollo/client/react/internal";
+import { __use } from "./internal/__use.js";
+import { useDeepMemo, wrapHook } from "./internal/index.js";
+import { useApolloClient } from "./useApolloClient.js";
+export function useSuspenseFragment(options) {
+    "use no memo";
+    return wrapHook("useSuspenseFragment", useSuspenseFragment_, useApolloClient(typeof options === "object" ? options.client : undefined))(options);
+}
+function useSuspenseFragment_(options) {
+    const client = useApolloClient(options.client);
+    const { from, variables } = options;
+    const { cache } = client;
+    const ids = useDeepMemo(() => {
+        return Array.isArray(from) ?
+            from.map((id) => toStringId(cache, id))
+            : toStringId(cache, from);
+    }, [cache, from]);
+    const idString = React.useMemo(() => (Array.isArray(ids) ? ids.join(",") : ids), [ids]);
+    const fragmentRef = getSuspenseCache(client).getFragmentRef([options.fragment, canonicalStringify(variables), idString], client, { ...options, variables: variables, from: ids });
+    let [current, setPromise] = React.useState([fragmentRef.key, fragmentRef.promise]);
+    React.useEffect(() => {
+        const dispose = fragmentRef.retain();
+        const removeListener = fragmentRef.listen((promise) => {
+            setPromise([fragmentRef.key, promise]);
+        });
+        return () => {
+            dispose();
+            removeListener();
+        };
+    }, [fragmentRef]);
+    if (current[0] !== fragmentRef.key) {
+        // eslint-disable-next-line react-hooks/immutability
+        current[0] = fragmentRef.key;
+        // eslint-disable-next-line react-hooks/immutability
+        current[1] = fragmentRef.promise;
+    }
+    const data = __use(current[1]);
+    return { data };
+}
+function toStringId(cache, from) {
+    return (typeof from === "string" ? from
+        : from === null ? null
+            : cache.identify(from));
+}
+//# sourceMappingURL=useSuspenseFragment.js.map

package/react/hooks-compiled/useSuspenseFragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSuspenseFragment.js","sourceRoot":"","sources":["../../../src/react/hooks/useSuspenseFragment.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\n\nimport type {\n  ApolloClient,\n  DataValue,\n  DocumentNode,\n  OperationVariables,\n  TypedDocumentNode,\n} from \"@apollo/client\";\nimport type { ApolloCache } from \"@apollo/client/cache\";\nimport { canonicalStringify } from \"@apollo/client/cache\";\nimport type { MaybeMasked } from \"@apollo/client/masking\";\nimport type { FragmentKey } from \"@apollo/client/react/internal\";\nimport { getSuspenseCache } from \"@apollo/client/react/internal\";\nimport type {\n  DocumentationTypes as UtilityDocumentationTypes,\n  NoInfer,\n  VariablesOption,\n} from \"@apollo/client/utilities/internal\";\n\nimport { __use } from \"./internal/__use.js\";\nimport { useDeepMemo, wrapHook } from \"./internal/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\n\nexport declare namespace useSuspenseFragment {\n  import _self = useSuspenseFragment;\n  export namespace Base {\n    export type Options<TData, TVariables extends OperationVariables> = {\n      /**\n       * A GraphQL document created using the `gql` template string tag from\n       * `graphql-tag` with one or more fragments which will be used to determine\n       * the shape of data to read. If you provide more than one fragment in this\n       * document then you must also specify `fragmentName` to select a single.\n       */\n      fragment: DocumentNode | TypedDocumentNode<TData, TVariables>;\n\n      /**\n       * The name of the fragment in your GraphQL document to be used. If you do\n       * not provide a `fragmentName` and there is only one fragment in your\n       * `fragment` document then that fragment will be used.\n       */\n      fragmentName?: string;\n\n      /**\n       * An object or array containing a `__typename` and primary key fields\n       * (such as `id`) identifying the entity object from which the fragment will\n       * be retrieved, or a `{ __ref: \"...\" }` reference, or a `string` ID (uncommon).\n       */\n      from:\n        | useSuspenseFragment.FromOptionValue<TData>\n        | Array<useSuspenseFragment.FromOptionValue<TData> | null>\n        | null;\n\n      // Override this field to make it optional (default: true).\n      optimistic?: boolean;\n      /**\n       * The instance of `ApolloClient` to use to look up the fragment.\n       *\n       * By default, the instance that's passed down via context is used, but you\n       * can provide a different instance here.\n       *\n       * @docGroup 1. Operation options\n       */\n      client?: ApolloClient;\n    };\n  }\n  export type Options<\n    TData,\n    TVariables extends OperationVariables,\n  > = Base.Options<TData, TVariables> & VariablesOption<NoInfer<TVariables>>;\n\n  export namespace DocumentationTypes {\n    export namespace useSuspenseFragment {\n      export interface Options<\n        TData = unknown,\n        TVariables extends OperationVariables = OperationVariables,\n      > extends Base.Options<TData, TVariables>,\n          UtilityDocumentationTypes.VariableOptions<TVariables> {}\n    }\n  }\n\n  /**\n   * Acceptable values provided to the `from` option.\n   */\n  export type FromOptionValue<TData> = ApolloCache.FromOptionValue<TData>;\n\n  export interface Result<TData> {\n    data: DataValue.Complete<MaybeMasked<TData>>;\n  }\n  export namespace DocumentationTypes {\n    export namespace useSuspenseFragment {\n      export interface Result<TData = unknown> extends _self.Result<TData> {}\n    }\n  }\n\n  export namespace DocumentationTypes {\n    /** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\n    export function useSuspenseFragment<\n      TData,\n      TVariables extends OperationVariables = OperationVariables,\n    >(\n      options: useSuspenseFragment.Options<TData, TVariables>\n    ): useSuspenseFragment.Result<TData>;\n  }\n}\n\n/** #TODO documentation */\nexport function useSuspenseFragment<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables> & {\n    from: Array<useSuspenseFragment.FromOptionValue<TData>>;\n  }\n): useSuspenseFragment.Result<Array<TData>>;\n\n/** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\nexport function useSuspenseFragment<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables> & {\n    from: Array<null>;\n  }\n): useSuspenseFragment.Result<Array<null>>;\n\n/** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\nexport function useSuspenseFragment<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables> & {\n    from: Array<useSuspenseFragment.FromOptionValue<TData> | null>;\n  }\n): useSuspenseFragment.Result<Array<TData | null>>;\n\n/** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\nexport function useSuspenseFragment<\n  TData,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables> & {\n    from: useSuspenseFragment.FromOptionValue<TData>;\n  }\n): useSuspenseFragment.Result<TData>;\n\n/** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\nexport function useSuspenseFragment<\n  TData,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables> & {\n    from: null;\n  }\n): useSuspenseFragment.Result<null>;\n\n/** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\nexport function useSuspenseFragment<\n  TData,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables> & {\n    from: useSuspenseFragment.FromOptionValue<TData> | null;\n  }\n): useSuspenseFragment.Result<TData | null>;\n\n/** {@inheritDoc @apollo/client/react!useSuspenseFragment:function(1)} */\nexport function useSuspenseFragment<\n  TData,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables>\n): useSuspenseFragment.Result<TData>;\n\nexport function useSuspenseFragment<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables>\n): useSuspenseFragment.Result<TData | null> {\n  \"use no memo\";\n  return wrapHook(\n    \"useSuspenseFragment\",\n    useSuspenseFragment_,\n    useApolloClient(typeof options === \"object\" ? options.client : undefined)\n  )(options);\n}\n\nfunction useSuspenseFragment_<\n  TData = unknown,\n  TVariables extends OperationVariables = OperationVariables,\n>(\n  options: useSuspenseFragment.Options<TData, TVariables>\n): useSuspenseFragment.Result<TData | null> {\n  const client = useApolloClient(options.client);\n  const { from, variables } = options;\n  const { cache } = client;\n\n  const ids = useDeepMemo(() => {\n    return Array.isArray(from) ?\n        from.map((id) => toStringId(cache, id))\n      : toStringId(cache, from);\n  }, [cache, from]);\n  const idString = React.useMemo(\n    () => (Array.isArray(ids) ? ids.join(\",\") : ids),\n    [ids]\n  );\n\n  const fragmentRef = getSuspenseCache(client).getFragmentRef(\n    [options.fragment, canonicalStringify(variables), idString],\n    client,\n    { ...options, variables: variables as TVariables, from: ids }\n  );\n\n  let [current, setPromise] = React.useState<\n    [FragmentKey, Promise<MaybeMasked<TData> | null>]\n  >([fragmentRef.key, fragmentRef.promise]);\n\n  React.useEffect(() => {\n    const dispose = fragmentRef.retain();\n    const removeListener = fragmentRef.listen((promise) => {\n      setPromise([fragmentRef.key, promise]);\n    });\n\n    return () => {\n      dispose();\n      removeListener();\n    };\n  }, [fragmentRef]);\n\n  if (current[0] !== fragmentRef.key) {\n    // eslint-disable-next-line react-hooks/immutability\n    current[0] = fragmentRef.key;\n    // eslint-disable-next-line react-hooks/immutability\n    current[1] = fragmentRef.promise;\n  }\n\n  const data = __use(current[1]);\n\n  return { data };\n}\n\nfunction toStringId(\n  cache: ApolloCache,\n  from: useSuspenseFragment.FromOptionValue<any> | null\n) {\n  return (\n    typeof from === \"string\" ? from\n    : from === null ? null\n    : cache.identify(from)) as string | null;\n}\n"]}