Odoo GraphQL Subscription using Node, Express JS for Sample
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1 lines
15 KiB

{"version":3,"file":"useSubscription.js","sourceRoot":"","sources":["../../../src/react/hooks/useSubscription.ts"],"names":[],"mappings":"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","sourcesContent":["import { invariant } from \"../../utilities/globals/index.js\";\nimport * as React from \"rehackt\";\nimport type { DocumentNode } from \"graphql\";\nimport type { TypedDocumentNode } from \"@graphql-typed-document-node/core\";\nimport { equal } from \"@wry/equality\";\n\nimport { DocumentType, verifyDocumentType } from \"../parser/index.js\";\nimport type {\n NoInfer,\n SubscriptionHookOptions,\n SubscriptionResult,\n} from \"../types/types.js\";\nimport type { OperationVariables } from \"../../core/index.js\";\nimport { useApolloClient } from \"./useApolloClient.js\";\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 * ```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 * @remarks\n * #### Subscriptions and React 18 Automatic Batching\n *\n * With React 18's [automatic batching](https://react.dev/blog/2022/03/29/react-v18#new-feature-automatic-batching), multiple state updates may be grouped into a single re-render for better performance.\n *\n * If your subscription API sends multiple messages at the same time or in very fast succession (within fractions of a millisecond), it is likely that only the last message received in that narrow time frame will result in a re-render.\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 * If your subscription back-end emits two messages with the same timestamp, only the last message received by Apollo Client will be rendered. This is because React 18 will batch these two state updates into a single re-render.\n *\n * Since the component above is using `useEffect` to push `data` into a piece of local state on each `Subscriptions` re-render, the first message will never be added to the `accumulatedData` array since its render was skipped.\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(\n * query,\n * {\n * onData({ data }) {\n * setAccumulatedData((prev) => [...prev, data])\n * }\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 * @since 3.0.0\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 = any,\n TVariables extends OperationVariables = OperationVariables,\n>(\n subscription: DocumentNode | TypedDocumentNode<TData, TVariables>,\n options?: SubscriptionHookOptions<NoInfer<TData>, NoInfer<TVariables>>\n) {\n const hasIssuedDeprecationWarningRef = React.useRef(false);\n const client = useApolloClient(options?.client);\n verifyDocumentType(subscription, DocumentType.Subscription);\n const [result, setResult] = React.useState<\n SubscriptionResult<TData, TVariables>\n >({\n loading: !options?.skip,\n error: void 0,\n data: void 0,\n variables: options?.variables,\n });\n\n if (!hasIssuedDeprecationWarningRef.current) {\n hasIssuedDeprecationWarningRef.current = true;\n\n if (options?.onSubscriptionData) {\n invariant.warn(\n options.onData ?\n \"'useSubscription' supports only the 'onSubscriptionData' or 'onData' option, but not both. Only the 'onData' option will be used.\"\n : \"'onSubscriptionData' is deprecated and will be removed in a future major version. Please use the 'onData' option instead.\"\n );\n }\n\n if (options?.onSubscriptionComplete) {\n invariant.warn(\n options.onComplete ?\n \"'useSubscription' supports only the 'onSubscriptionComplete' or 'onComplete' option, but not both. Only the 'onComplete' option will be used.\"\n : \"'onSubscriptionComplete' is deprecated and will be removed in a future major version. Please use the 'onComplete' option instead.\"\n );\n }\n }\n\n const [observable, setObservable] = React.useState(() => {\n if (options?.skip) {\n return null;\n }\n\n return client.subscribe({\n query: subscription,\n variables: options?.variables,\n fetchPolicy: options?.fetchPolicy,\n context: options?.context,\n });\n });\n\n const canResetObservableRef = React.useRef(false);\n React.useEffect(() => {\n return () => {\n canResetObservableRef.current = true;\n };\n }, []);\n\n const ref = React.useRef({ client, subscription, options });\n React.useEffect(() => {\n let shouldResubscribe = options?.shouldResubscribe;\n if (typeof shouldResubscribe === \"function\") {\n shouldResubscribe = !!shouldResubscribe(options!);\n }\n\n if (options?.skip) {\n if (\n !options?.skip !== !ref.current.options?.skip ||\n canResetObservableRef.current\n ) {\n setResult({\n loading: false,\n data: void 0,\n error: void 0,\n variables: options?.variables,\n });\n setObservable(null);\n canResetObservableRef.current = false;\n }\n } else if (\n (shouldResubscribe !== false &&\n (client !== ref.current.client ||\n subscription !== ref.current.subscription ||\n options?.fetchPolicy !== ref.current.options?.fetchPolicy ||\n !options?.skip !== !ref.current.options?.skip ||\n !equal(options?.variables, ref.current.options?.variables))) ||\n canResetObservableRef.current\n ) {\n setResult({\n loading: true,\n data: void 0,\n error: void 0,\n variables: options?.variables,\n });\n setObservable(\n client.subscribe({\n query: subscription,\n variables: options?.variables,\n fetchPolicy: options?.fetchPolicy,\n context: options?.context,\n })\n );\n canResetObservableRef.current = false;\n }\n\n Object.assign(ref.current, { client, subscription, options });\n }, [client, subscription, options, canResetObservableRef.current]);\n\n React.useEffect(() => {\n if (!observable) {\n return;\n }\n\n let subscriptionStopped = false;\n const subscription = observable.subscribe({\n next(fetchResult) {\n if (subscriptionStopped) {\n return;\n }\n\n const result = {\n loading: false,\n // TODO: fetchResult.data can be null but SubscriptionResult.data\n // expects TData | undefined only\n data: fetchResult.data!,\n error: void 0,\n variables: options?.variables,\n };\n setResult(result);\n\n if (ref.current.options?.onData) {\n ref.current.options.onData({\n client,\n data: result,\n });\n } else if (ref.current.options?.onSubscriptionData) {\n ref.current.options.onSubscriptionData({\n client,\n subscriptionData: result,\n });\n }\n },\n error(error) {\n if (!subscriptionStopped) {\n setResult({\n loading: false,\n data: void 0,\n error,\n variables: options?.variables,\n });\n ref.current.options?.onError?.(error);\n }\n },\n complete() {\n if (!subscriptionStopped) {\n if (ref.current.options?.onComplete) {\n ref.current.options.onComplete();\n } else if (ref.current.options?.onSubscriptionComplete) {\n ref.current.options.onSubscriptionComplete();\n }\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 setTimeout(() => {\n subscription.unsubscribe();\n });\n };\n }, [observable]);\n\n return result;\n}\n"]}