diff --git a/.changeset/famous-dragons-confess.md b/.changeset/famous-dragons-confess.md new file mode 100644 index 00000000000..77664fe1862 --- /dev/null +++ b/.changeset/famous-dragons-confess.md @@ -0,0 +1,5 @@ +--- +'@graphiql/react': minor +--- + +BREAKING: The `ExecutionContext` no longer contains the `subscription` property as this is only meant for internal use. diff --git a/packages/graphiql-react/src/execution.tsx b/packages/graphiql-react/src/execution.tsx index 3e11809e784..a557cabaa9b 100644 --- a/packages/graphiql-react/src/execution.tsx +++ b/packages/graphiql-react/src/execution.tsx @@ -21,7 +21,6 @@ export type ExecutionContextType = { operationName: string | null; run(): void; stop(): void; - subscription: Unsubscribable | null; }; export const ExecutionContext = @@ -287,9 +286,8 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) { operationName: props.operationName ?? null, run, stop, - subscription, }), - [isFetching, props.operationName, run, stop, subscription], + [isFetching, props.operationName, run, stop], ); return ( diff --git a/packages/graphiql/src/components/ExecuteButton.tsx b/packages/graphiql/src/components/ExecuteButton.tsx index 77323afdf47..acb95d6e9fe 100644 --- a/packages/graphiql/src/components/ExecuteButton.tsx +++ b/packages/graphiql/src/components/ExecuteButton.tsx @@ -10,16 +10,14 @@ import React, { useState } from 'react'; export function ExecuteButton() { const { queryEditor, setOperationName } = useEditorContext({ nonNull: true }); - const { isFetching, operationName, run, stop, subscription } = - useExecutionContext({ - nonNull: true, - }); + const { isFetching, operationName, run, stop } = useExecutionContext({ + nonNull: true, + }); const [optionsOpen, setOptionsOpen] = useState(false); const [highlight, setHighlight] = useState( null, ); - const isRunning = isFetching || Boolean(subscription); const operations = queryEditor?.operations || []; const hasOptions = operations.length > 1 && typeof operationName !== 'string'; @@ -31,7 +29,7 @@ export function ExecuteButton() { onMouseDown={ // Allow mouse down if there is no running query, there are options // for which operation to run, and the dropdown is currently closed. - !isRunning && hasOptions && !optionsOpen + !isFetching && hasOptions && !optionsOpen ? downEvent => { let initialPress = true; const downTarget = downEvent.currentTarget; @@ -65,9 +63,9 @@ export function ExecuteButton() { onClick={ // Allow click event if there is a running query or if there are not // options for which operation to run. - isRunning || !hasOptions + isFetching || !hasOptions ? () => { - if (isRunning) { + if (isFetching) { stop(); } else { run(); @@ -78,7 +76,7 @@ export function ExecuteButton() { title="Execute Query (Ctrl-Enter)" > - {isRunning ? ( + {isFetching ? ( ) : ( @@ -99,13 +97,13 @@ export function ExecuteButton() { onMouseOut={() => setHighlight(null)} onMouseUp={() => { setOptionsOpen(false); - const operationName = operation.name?.value; + const selectedOperationName = operation.name?.value; if ( queryEditor && - operationName && - operationName !== queryEditor.operationName + selectedOperationName && + selectedOperationName !== queryEditor.operationName ) { - setOperationName(operationName); + setOperationName(selectedOperationName); } run(); }}