@graphql-workbench/graphql-workbench-store

An optional, DOM-free coordinator for @graphql-workbench/schema-explorer and @graphql-workbench/execute-query. It shares a theme signal, forwards slice events, and saves/restores both stores together. It does not create a query editor, run GraphQL requests, or rewrite query text when a schema selection changes.

Install it with its two peer runtimes:

npm install @graphql-workbench/graphql-workbench-store @preact/signals-core graphql

The package owns its dependencies on @graphql-workbench/schema-explorer, @graphql-workbench/execute-query, and @graphql-workbench/graphql-store-core. Each component remains independently consumable.

Composed browser usage

<textarea id="query">query Demo { hello }</textarea>
<gwb-schema-explorer></gwb-schema-explorer>
<gwb-execute-query></gwb-execute-query>

import { createGraphQLWorkbenchStore } from '@graphql-workbench/graphql-workbench-store';
import '@graphql-workbench/schema-explorer';
import '@graphql-workbench/execute-query';

const workbench = createGraphQLWorkbenchStore();
const explorer = document.querySelector('gwb-schema-explorer');
const executor = document.querySelector('gwb-execute-query');
if (explorer) explorer.store = workbench.schema;
if (executor) executor.store = workbench.execution;
workbench.schema.schema.value = 'type Query { hello: String }';

const queryEditor = document.querySelector<HTMLTextAreaElement>('#query');
if (queryEditor) {
  workbench.execution.query.value = queryEditor.value;
  queryEditor.addEventListener('input', () => {
    workbench.execution.query.value = queryEditor.value;
  });
}

workbench.events.subscribe('execution:execute-requested', ({ query, variables, sink }) => {
  // Use one transport channel: this store event OR the component DOM event.
  sink.next({ data: { hello: `${query} with ${JSON.stringify(variables)}` } });
  sink.complete();
});

const saved = JSON.stringify(workbench.snapshot());
workbench.restore(JSON.parse(saved));
window.addEventListener('pagehide', () => workbench.dispose(), { once: true });

The browser-facing component imports above need a DOM. The coordinator module itself can be imported in Node. The schema and execution properties are the same stores accepted by their components. theme is one writable Preact signal shared by both. Events are synchronously forwarded under schema: and execution: names without inventing additional events. Snapshot restoration validates both slices before either is changed and requires their themes to agree.

The coordinator forwards schema:selection-change, schema:selection-path-error, schema:include-deprecated-change, execution:variables-change, execution:execute-requested, and execution:execution-cancelled. Component-originated actions still emit their compatibility DOM events exactly once. Connect a transport to the typed event or the DOM event, never both. Direct store actions do not synthesize DOM events, and schema selection never edits workbench.execution.query.

The two slices are owned by the coordinator. It disposes both; component views only borrow them. A disconnected view leaves an active shared request running. snapshot() contains durable versioned inputs and preferences, not response streams or request handles. restore() validates both slices before mutation and aborts an active request while returning execution to idle.

Standalone component usage

Neither component requires the coordinator. Import @graphql-workbench/schema-explorer and @graphql-workbench/execute-query separately, assign their documented public properties, and listen to their existing DOM events. Each component creates and disposes a private store when no store is injected. For direct variables/response pane composition, see the @graphql-workbench/execute-query README.

The demo uses both components with one workbench store, a consumer-owned query editor, and a selectable simulated response mode.