Loading...
}\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 &&Loading...
}\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