a.tolmachev
93 lines
4.6 KiB
HTML
93 lines
4.6 KiB
HTML
<div id="step-panel-3-graphql" class="step-pane">
|
|
<div class="step-panel-header">
|
|
<div class="step-panel-eyebrow">
|
|
<div class="step-panel-eyebrow-line"></div>
|
|
Step 3 of 5
|
|
</div>
|
|
<h1 class="step-panel-title">GraphQL operation</h1>
|
|
<p class="step-panel-subtitle">Define the GraphQL operation this tool will execute. All requests are sent as HTTP POST to the endpoint configured in the previous step. Variables are populated from MCP tool arguments at runtime.</p>
|
|
</div>
|
|
|
|
<!-- Operation type -->
|
|
<div class="config-card" style="margin-bottom: 20px;">
|
|
<div class="config-card-header">
|
|
<div class="config-card-header-icon">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="8" cy="8" r="6"/>
|
|
<path d="M5 8l2 2 4-4"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title">Operation type</div>
|
|
<div class="config-card-subtitle">GraphQL operation kind — subscriptions are not supported</div>
|
|
</div>
|
|
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
|
</div>
|
|
<div class="config-card-body">
|
|
<div class="gql-type-grid">
|
|
<button class="gql-type-card active" data-gql-type="query" onclick="selectGqlType(this)">
|
|
<div class="gql-type-keyword">query</div>
|
|
<div class="gql-type-desc">Fetch data without side-effects</div>
|
|
</button>
|
|
<button class="gql-type-card" data-gql-type="mutation" onclick="selectGqlType(this)">
|
|
<div class="gql-type-keyword">mutation</div>
|
|
<div class="gql-type-desc">Create, update or delete data</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Query editor -->
|
|
<div class="config-card" style="margin-bottom: 20px;">
|
|
<div class="config-card-header">
|
|
<div class="config-card-header-icon">
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M4 2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2z"/>
|
|
<path d="M6 6l-2 2 2 2M10 6l2 2-2 2"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="config-card-title">Query document</div>
|
|
<div class="config-card-subtitle">GraphQL document with typed variable declarations</div>
|
|
</div>
|
|
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
|
</div>
|
|
<div class="config-card-body" style="gap: 0; padding: 0;">
|
|
<div class="code-block" style="border-radius: 0; border: none;">
|
|
<div class="code-toolbar">
|
|
<div class="code-dots"><span></span><span></span><span></span></div>
|
|
<span class="code-toolbar-label">graphql / query</span>
|
|
</div>
|
|
<textarea class="form-textarea code-textarea" rows="16" id="gql-query-editor" spellcheck="false">query GetContact($id: ID!) {
|
|
contact(id: $id) {
|
|
id
|
|
firstName
|
|
lastName
|
|
email
|
|
company {
|
|
id
|
|
name
|
|
}
|
|
createdAt
|
|
}
|
|
}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variables hint -->
|
|
<div class="info-callout" style="margin-bottom: 24px;">
|
|
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="8" cy="8" r="7"/>
|
|
<path d="M8 11V8M8 5v-.5"/>
|
|
</svg>
|
|
<div class="info-callout-body">
|
|
<div class="info-callout-title">Variables are mapped in step 5</div>
|
|
<div class="info-callout-text">
|
|
Declare all variables in the query document using the <code style="font-family:monospace;font-size:11px;color:var(--accent);">$variable: Type</code> syntax. In step 5 you will map MCP input fields to these variables. Crank serialises the final <code style="font-family:monospace;font-size:11px;color:var(--accent);">{"query","variables"}</code> payload automatically.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /step-pane-3-graphql -->
|