show multipart requests as running until they are finished or cancell…

…ed (#2907)

* show multipart requests as running until they are finished or cancelled

* Improve changeset wording

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

* fix grammar

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

* fix grammar

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

Co-authored-by: Ted Thibodeau Jr <tthibodeau@openlinksw.com>

.changeset/rich-humans-rescue.md

@@ -0,0 +1,7 @@
+---
+'@graphiql/react': minor
+---
+
+Clearly separate the fetching and subscription states for multipart
+requests (like subscriptions) and show the stop-button as long as the
+subscription is running

packages/graphiql-react/src/execution.tsx

@@ -19,11 +19,17 @@ import { createContextHook, createNullableContext } from './utility/context';
 
 export type ExecutionContextType = {
   /**
-   * If there is currently a GraphQL request in-flight. For long-running
-   * requests like subscriptions this will be `true` until the request is
-   * stopped manually.
+   * If there is currently a GraphQL request in-flight. For multi-part
+   * requests like subscriptions, this will be `true` while fetching the
+   * first partial response and `false` while fetching subsequent batches.
    */
   isFetching: boolean;
+  /**
+   * If there is currently a GraphQL request in-flight. For multi-part
+   * requests like subscriptions, this will be `true` until the last batch
+   * has been fetched or the connection is closed from the client.
+   */
+  isSubscribed: boolean;
   /**
    * The operation name that will be sent with all GraphQL requests.
    */
@@ -315,14 +321,16 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) {
     variableEditor,
   ]);
 
+  const isSubscribed = Boolean(subscription);
   const value = useMemo<ExecutionContextType>(
     () => ({
       isFetching,
+      isSubscribed,
       operationName: props.operationName ?? null,
       run,
       stop,
     }),
-    [isFetching, props.operationName, run, stop],
+    [isFetching, isSubscribed, props.operationName, run, stop],
   );
 
   return (

packages/graphiql-react/src/toolbar/execute.tsx

@@ -10,23 +10,25 @@ export function ExecuteButton() {
     nonNull: true,
     caller: ExecuteButton,
   });
-  const { isFetching, operationName, run, stop } = useExecutionContext({
-    nonNull: true,
-    caller: ExecuteButton,
-  });
+  const { isFetching, isSubscribed, operationName, run, stop } =
+    useExecutionContext({
+      nonNull: true,
+      caller: ExecuteButton,
+    });
 
   const operations = queryEditor?.operations || [];
   const hasOptions = operations.length > 1 && typeof operationName !== 'string';
+  const isRunning = isFetching || isSubscribed;
 
-  const label = `${isFetching ? 'Stop' : 'Execute'} query (Ctrl-Enter)`;
+  const label = `${isRunning ? 'Stop' : 'Execute'} query (Ctrl-Enter)`;
   const buttonProps = {
     type: 'button' as const,
     className: 'graphiql-execute-button',
-    children: isFetching ? <StopIcon /> : <PlayIcon />,
+    children: isRunning ? <StopIcon /> : <PlayIcon />,
     'aria-label': label,
   };
 
-  return hasOptions && !isFetching ? (
+  return hasOptions && !isRunning ? (
     <Menu>
       <Tooltip label={label}>
         <Menu.Button {...buttonProps} />
@@ -63,7 +65,7 @@ export function ExecuteButton() {
       <button
         {...buttonProps}
         onClick={() => {
-          if (isFetching) {
+          if (isRunning) {
             stop();
           } else {
             run();