graphiql
Version:
An graphical interactive in-browser GraphQL IDE.
396 lines • 27.9 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GraphiQL = void 0;
var react_1 = __importStar(require("react"));
var react_2 = require("@graphiql/react");
var ExecuteButton_1 = require("./ExecuteButton");
var ToolbarButton_1 = require("./ToolbarButton");
var ToolbarGroup_1 = require("./ToolbarGroup");
var ToolbarMenu_1 = require("./ToolbarMenu");
var QueryEditor_1 = require("./QueryEditor");
var VariableEditor_1 = require("./VariableEditor");
var HeaderEditor_1 = require("./HeaderEditor");
var ResultViewer_1 = require("./ResultViewer");
var DocExplorer_1 = require("./DocExplorer");
var QueryHistory_1 = require("./QueryHistory");
var find_1 = __importDefault(require("../utility/find"));
var toolkit_1 = require("@graphiql/toolkit");
var Tabs_1 = require("./Tabs");
var majorVersion = parseInt(react_1.default.version.slice(0, 2), 10);
if (majorVersion < 16) {
throw Error([
'GraphiQL 0.18.0 and after is not compatible with React 15 or below.',
'If you are using a CDN source (jsdelivr, unpkg, etc), follow this example:',
'https://github.com/graphql/graphiql/blob/master/examples/graphiql-cdn/index.html#L49',
].join('\n'));
}
var GraphiQL = (function (_super) {
__extends(GraphiQL, _super);
function GraphiQL(props) {
var _this = _super.call(this, props) || this;
_this.ref = null;
return _this;
}
GraphiQL.prototype.componentDidMount = function () {
if (typeof window !== 'undefined') {
window.g = this;
}
};
GraphiQL.prototype.render = function () {
var _this = this;
return (react_1.default.createElement(GraphiQLProviders, __assign({}, this.props, { ref: function (node) {
_this.ref = node;
} })));
};
GraphiQL.prototype.getQueryEditor = function () {
var _a;
console.warn('The method `GraphiQL.getQueryEditor` is deprecated and will be removed in the next major version. To set the value of the editor you can use the `query` prop. To react on changes of the editor value you can pass a callback to the `onEditQuery` prop.');
return ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.getQueryEditor()) || null;
};
GraphiQL.prototype.getVariableEditor = function () {
var _a;
console.warn('The method `GraphiQL.getVariableEditor` is deprecated and will be removed in the next major version. To set the value of the editor you can use the `variables` prop. To react on changes of the editor value you can pass a callback to the `onEditVariables` prop.');
return ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.getVariableEditor()) || null;
};
GraphiQL.prototype.getHeaderEditor = function () {
var _a;
console.warn('The method `GraphiQL.getHeaderEditor` is deprecated and will be removed in the next major version. To set the value of the editor you can use the `headers` prop. To react on changes of the editor value you can pass a callback to the `onEditHeaders` prop.');
return ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.getHeaderEditor()) || null;
};
GraphiQL.prototype.refresh = function () {
var _a;
console.warn('The method `GraphiQL.refresh` is deprecated and will be removed in the next major version. Already now, all editors should automatically refresh when their size changes.');
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.refresh();
};
GraphiQL.prototype.autoCompleteLeafs = function () {
var _a;
console.warn('The method `GraphiQL.autoCompleteLeafs` is deprecated and will be removed in the next major version. Please switch to using the `autoCompleteLeafs` function provided by the `EditorContext` from the `@graphiql/react` package.');
return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.autoCompleteLeafs();
};
GraphiQL.formatResult = function (result) {
console.warn('The function `GraphiQL.formatResult` is deprecated and will be removed in the next major version. Please switch to using the `formatResult` function provided by the `@graphiql/toolkit` package.');
return (0, toolkit_1.formatResult)(result);
};
GraphiQL.formatError = function (error) {
console.warn('The function `GraphiQL.formatError` is deprecated and will be removed in the next major version. Please switch to using the `formatError` function provided by the `@graphiql/toolkit` package.');
return (0, toolkit_1.formatError)(error);
};
GraphiQL.Logo = GraphiQLLogo;
GraphiQL.Toolbar = GraphiQLToolbar;
GraphiQL.Footer = GraphiQLFooter;
GraphiQL.QueryEditor = QueryEditor_1.QueryEditor;
GraphiQL.VariableEditor = VariableEditor_1.VariableEditor;
GraphiQL.HeaderEditor = HeaderEditor_1.HeaderEditor;
GraphiQL.ResultViewer = ResultViewer_1.ResultViewer;
GraphiQL.Button = ToolbarButton_1.ToolbarButton;
GraphiQL.ToolbarButton = ToolbarButton_1.ToolbarButton;
GraphiQL.Group = ToolbarGroup_1.ToolbarGroup;
GraphiQL.Menu = ToolbarMenu_1.ToolbarMenu;
GraphiQL.MenuItem = ToolbarMenu_1.ToolbarMenuItem;
return GraphiQL;
}(react_1.default.Component));
exports.GraphiQL = GraphiQL;
var GraphiQLProviders = (0, react_1.forwardRef)(function GraphiQLProviders(_a, ref) {
var dangerouslyAssumeSchemaIsValid = _a.dangerouslyAssumeSchemaIsValid, docExplorerOpen = _a.docExplorerOpen, externalFragments = _a.externalFragments, fetcher = _a.fetcher, headers = _a.headers, inputValueDeprecation = _a.inputValueDeprecation, introspectionQueryName = _a.introspectionQueryName, maxHistoryLength = _a.maxHistoryLength, onEditOperationName = _a.onEditOperationName, onSchemaChange = _a.onSchemaChange, onToggleHistory = _a.onToggleHistory, onToggleDocs = _a.onToggleDocs, operationName = _a.operationName, query = _a.query, response = _a.response, storage = _a.storage, schema = _a.schema, schemaDescription = _a.schemaDescription, shouldPersistHeaders = _a.shouldPersistHeaders, validationRules = _a.validationRules, variables = _a.variables, props = __rest(_a, ["dangerouslyAssumeSchemaIsValid", "docExplorerOpen", "externalFragments", "fetcher", "headers", "inputValueDeprecation", "introspectionQueryName", "maxHistoryLength", "onEditOperationName", "onSchemaChange", "onToggleHistory", "onToggleDocs", "operationName", "query", "response", "storage", "schema", "schemaDescription", "shouldPersistHeaders", "validationRules", "variables"]);
if (typeof fetcher !== 'function') {
throw new TypeError('GraphiQL requires a fetcher function.');
}
return (react_1.default.createElement(react_2.StorageContextProvider, { storage: storage },
react_1.default.createElement(react_2.HistoryContextProvider, { maxHistoryLength: maxHistoryLength, onToggle: onToggleHistory },
react_1.default.createElement(react_2.EditorContextProvider, { defaultQuery: props.defaultQuery, externalFragments: externalFragments, headers: headers, onEditOperationName: onEditOperationName, onTabChange: typeof props.tabs === 'object' ? props.tabs.onTabChange : undefined, query: query, response: response, shouldPersistHeaders: shouldPersistHeaders, validationRules: validationRules, variables: variables },
react_1.default.createElement(react_2.SchemaContextProvider, { dangerouslyAssumeSchemaIsValid: dangerouslyAssumeSchemaIsValid, fetcher: fetcher, inputValueDeprecation: inputValueDeprecation, introspectionQueryName: introspectionQueryName, onSchemaChange: onSchemaChange, schema: schema, schemaDescription: schemaDescription },
react_1.default.createElement(react_2.ExecutionContextProvider, { fetcher: fetcher, operationName: operationName },
react_1.default.createElement(react_2.ExplorerContextProvider, { isVisible: docExplorerOpen, onToggleVisibility: onToggleDocs },
react_1.default.createElement(GraphiQLConsumeContexts, __assign({}, props, { ref: ref })))))))));
});
var GraphiQLConsumeContexts = (0, react_1.forwardRef)(function GraphiQLConsumeContexts(_a, ref) {
var getDefaultFieldNames = _a.getDefaultFieldNames, props = __rest(_a, ["getDefaultFieldNames"]);
var editorContext = (0, react_2.useEditorContext)({ nonNull: true });
var executionContext = (0, react_2.useExecutionContext)({ nonNull: true });
var explorerContext = (0, react_2.useExplorerContext)();
var historyContext = (0, react_2.useHistoryContext)();
var schemaContext = (0, react_2.useSchemaContext)({ nonNull: true });
var storageContext = (0, react_2.useStorageContext)();
var autoCompleteLeafs = (0, react_2.useAutoCompleteLeafs)({ getDefaultFieldNames: getDefaultFieldNames });
var copy = (0, react_2.useCopyQuery)({ onCopyQuery: props.onCopyQuery });
var merge = (0, react_2.useMergeQuery)();
var prettify = (0, react_2.usePrettifyEditors)();
var docResize = (0, react_2.useDragResize)({
defaultSizeRelation: 3,
direction: 'horizontal',
initiallyHidden: (explorerContext === null || explorerContext === void 0 ? void 0 : explorerContext.isVisible) ? undefined : 'second',
onHiddenElementChange: function (resizableElement) {
if (resizableElement === 'second') {
explorerContext === null || explorerContext === void 0 ? void 0 : explorerContext.hide();
}
else {
explorerContext === null || explorerContext === void 0 ? void 0 : explorerContext.show();
}
},
sizeThresholdSecond: 200,
storageKey: 'docExplorerFlex',
});
var editorResize = (0, react_2.useDragResize)({
direction: 'horizontal',
storageKey: 'editorFlex',
});
var secondaryEditorResize = (0, react_2.useDragResize)({
defaultSizeRelation: 3,
direction: 'vertical',
initiallyHidden: (function () {
if (props.defaultVariableEditorOpen !== undefined) {
return props.defaultVariableEditorOpen ? undefined : 'second';
}
if (props.defaultSecondaryEditorOpen !== undefined) {
return props.defaultSecondaryEditorOpen ? undefined : 'second';
}
return editorContext.initialVariables || editorContext.initialHeaders
? undefined
: 'second';
})(),
sizeThresholdSecond: 60,
storageKey: 'secondaryEditorFlex',
});
return (react_1.default.createElement(GraphiQLWithContext, __assign({}, props, { editorContext: editorContext, executionContext: executionContext, explorerContext: explorerContext, historyContext: historyContext, schemaContext: schemaContext, storageContext: storageContext, autoCompleteLeafs: autoCompleteLeafs, copy: copy, merge: merge, prettify: prettify, docResize: docResize, editorResize: editorResize, secondaryEditorResize: secondaryEditorResize, ref: ref })));
});
var GraphiQLWithContext = (function (_super) {
__extends(GraphiQLWithContext, _super);
function GraphiQLWithContext(props) {
var _this = _super.call(this, props) || this;
_this.state = { activeSecondaryEditor: 'variable' };
return _this;
}
GraphiQLWithContext.prototype.render = function () {
var _this = this;
var _a, _b, _c, _d;
var children = react_1.default.Children.toArray(this.props.children);
var logo = (0, find_1.default)(children, function (child) {
return isChildComponentType(child, GraphiQL.Logo);
}) || react_1.default.createElement(GraphiQL.Logo, null);
var toolbar = (0, find_1.default)(children, function (child) {
return isChildComponentType(child, GraphiQL.Toolbar);
}) || (react_1.default.createElement(GraphiQL.Toolbar, null,
react_1.default.createElement(ToolbarButton_1.ToolbarButton, { onClick: function () {
_this.props.prettify();
}, title: "Prettify Query (Shift-Ctrl-P)", label: "Prettify" }),
react_1.default.createElement(ToolbarButton_1.ToolbarButton, { onClick: function () {
_this.props.merge();
}, title: "Merge Query (Shift-Ctrl-M)", label: "Merge" }),
react_1.default.createElement(ToolbarButton_1.ToolbarButton, { onClick: function () {
_this.props.copy();
}, title: "Copy Query (Shift-Ctrl-C)", label: "Copy" }),
react_1.default.createElement(ToolbarButton_1.ToolbarButton, { onClick: function () { var _a; return (_a = _this.props.historyContext) === null || _a === void 0 ? void 0 : _a.toggle(); }, title: ((_a = this.props.historyContext) === null || _a === void 0 ? void 0 : _a.isVisible)
? 'Hide History'
: 'Show History', label: "History" }),
react_1.default.createElement(ToolbarButton_1.ToolbarButton, { onClick: function () { return _this.props.schemaContext.introspect(); }, title: "Fetch GraphQL schema using introspection (Shift-Ctrl-R)", label: "Introspect" }),
((_b = this.props.toolbar) === null || _b === void 0 ? void 0 : _b.additionalContent)
? this.props.toolbar.additionalContent
: null));
var footer = (0, find_1.default)(children, function (child) {
return isChildComponentType(child, GraphiQL.Footer);
});
var headerEditorEnabled = (_c = this.props.headerEditorEnabled) !== null && _c !== void 0 ? _c : true;
return (react_1.default.createElement("div", { "data-testid": "graphiql-container", className: "graphiql-container" },
react_1.default.createElement("div", { ref: this.props.docResize.firstRef },
((_d = this.props.historyContext) === null || _d === void 0 ? void 0 : _d.isVisible) && (react_1.default.createElement("div", { className: "historyPaneWrap", style: { width: '230px', zIndex: 7 } },
react_1.default.createElement(QueryHistory_1.QueryHistory, null))),
react_1.default.createElement("div", { className: "editorWrap" },
react_1.default.createElement("div", { className: "topBarWrap" },
this.props.beforeTopBarContent,
react_1.default.createElement("div", { className: "topBar" },
logo,
react_1.default.createElement(ExecuteButton_1.ExecuteButton, null),
toolbar),
this.props.explorerContext &&
!this.props.explorerContext.isVisible && (react_1.default.createElement("button", { className: "docExplorerShow", onClick: function () {
var _a;
(_a = _this.props.explorerContext) === null || _a === void 0 ? void 0 : _a.show();
_this.props.docResize.setHiddenElement(null);
}, "aria-label": "Open Documentation Explorer" }, "Docs"))),
this.props.tabs ? (react_1.default.createElement(Tabs_1.Tabs, { tabsProps: {
'aria-label': 'Select active operation',
} },
this.props.editorContext.tabs.map(function (tab, index) { return (react_1.default.createElement(Tabs_1.Tab, { key: tab.id, isActive: index === _this.props.editorContext.activeTabIndex, title: tab.title, isCloseable: _this.props.editorContext.tabs.length > 1, onSelect: function () {
_this.props.executionContext.stop();
_this.props.editorContext.changeTab(index);
}, onClose: function () {
if (_this.props.editorContext.activeTabIndex === index) {
_this.props.executionContext.stop();
}
_this.props.editorContext.closeTab(index);
}, tabProps: {
'aria-controls': 'sessionWrap',
id: "session-tab-".concat(index),
} })); }),
react_1.default.createElement(Tabs_1.TabAddButton, { onClick: function () {
_this.props.editorContext.addTab();
} }))) : null,
react_1.default.createElement("div", { role: "tabpanel", id: "sessionWrap", className: "editorBar", "aria-labelledby": "session-tab-".concat(this.props.editorContext.activeTabIndex) },
react_1.default.createElement("div", { ref: this.props.editorResize.firstRef },
react_1.default.createElement("div", { className: "queryWrap" },
react_1.default.createElement("div", { ref: this.props.secondaryEditorResize.firstRef },
react_1.default.createElement(QueryEditor_1.QueryEditor, { editorTheme: this.props.editorTheme, onClickReference: function () {
if (_this.props.docResize.hiddenElement === 'second') {
_this.props.docResize.setHiddenElement(null);
}
}, keyMap: this.props.keyMap, onCopyQuery: this.props.onCopyQuery, onEdit: this.props.onEditQuery, readOnly: this.props.readOnly })),
react_1.default.createElement("div", { ref: this.props.secondaryEditorResize.dragBarRef },
react_1.default.createElement("div", { className: "secondary-editor-title variable-editor-title", id: "secondary-editor-title" },
react_1.default.createElement("div", { className: "variable-editor-title-text".concat(this.state.activeSecondaryEditor === 'variable'
? ' active'
: ''), onClick: function () {
if (_this.props.secondaryEditorResize.hiddenElement ===
'second') {
_this.props.secondaryEditorResize.setHiddenElement(null);
}
_this.setState({
activeSecondaryEditor: 'variable',
}, function () {
var _a;
(_a = _this.props.editorContext.variableEditor) === null || _a === void 0 ? void 0 : _a.refresh();
});
} }, "Query Variables"),
headerEditorEnabled && (react_1.default.createElement("div", { style: {
marginLeft: '20px',
}, className: "variable-editor-title-text".concat(this.state.activeSecondaryEditor === 'header'
? ' active'
: ''), onClick: function () {
if (_this.props.secondaryEditorResize.hiddenElement ===
'second') {
_this.props.secondaryEditorResize.setHiddenElement(null);
}
_this.setState({
activeSecondaryEditor: 'header',
}, function () {
var _a;
(_a = _this.props.editorContext.headerEditor) === null || _a === void 0 ? void 0 : _a.refresh();
});
} }, "Request Headers")))),
react_1.default.createElement("div", { ref: this.props.secondaryEditorResize.secondRef },
react_1.default.createElement("section", { className: "variable-editor secondary-editor", "aria-label": this.state.activeSecondaryEditor === 'variable'
? 'Query Variables'
: 'Request Headers' },
react_1.default.createElement(VariableEditor_1.VariableEditor, { onEdit: this.props.onEditVariables, editorTheme: this.props.editorTheme, readOnly: this.props.readOnly, active: this.state.activeSecondaryEditor === 'variable', keyMap: this.props.keyMap }),
headerEditorEnabled && (react_1.default.createElement(HeaderEditor_1.HeaderEditor, { active: this.state.activeSecondaryEditor === 'header', editorTheme: this.props.editorTheme, onEdit: this.props.onEditHeaders, readOnly: this.props.readOnly, keyMap: this.props.keyMap })))))),
react_1.default.createElement("div", { ref: this.props.editorResize.dragBarRef },
react_1.default.createElement("div", { className: "editor-drag-bar" })),
react_1.default.createElement("div", { ref: this.props.editorResize.secondRef },
react_1.default.createElement("div", { className: "resultWrap" },
this.props.executionContext.isFetching && (react_1.default.createElement("div", { className: "spinner-container" },
react_1.default.createElement("div", { className: "spinner" }))),
react_1.default.createElement(ResultViewer_1.ResultViewer, { editorTheme: this.props.editorTheme, ResponseTooltip: this.props.ResultsTooltip, keyMap: this.props.keyMap }),
footer))))),
react_1.default.createElement("div", { ref: this.props.docResize.dragBarRef },
react_1.default.createElement("div", { className: "docExplorerResizer" })),
react_1.default.createElement("div", { ref: this.props.docResize.secondRef },
react_1.default.createElement("div", { className: "docExplorerWrap" },
react_1.default.createElement(DocExplorer_1.DocExplorer, { onClose: function () { return _this.props.docResize.setHiddenElement('second'); } })))));
};
GraphiQLWithContext.prototype.getQueryEditor = function () {
return this.props.editorContext.queryEditor || null;
};
GraphiQLWithContext.prototype.getVariableEditor = function () {
return this.props.editorContext.variableEditor || null;
};
GraphiQLWithContext.prototype.getHeaderEditor = function () {
return this.props.editorContext.headerEditor || null;
};
GraphiQLWithContext.prototype.refresh = function () {
var _a, _b, _c, _d;
(_a = this.props.editorContext.queryEditor) === null || _a === void 0 ? void 0 : _a.refresh();
(_b = this.props.editorContext.variableEditor) === null || _b === void 0 ? void 0 : _b.refresh();
(_c = this.props.editorContext.headerEditor) === null || _c === void 0 ? void 0 : _c.refresh();
(_d = this.props.editorContext.responseEditor) === null || _d === void 0 ? void 0 : _d.refresh();
};
GraphiQLWithContext.prototype.autoCompleteLeafs = function () {
return this.props.autoCompleteLeafs();
};
return GraphiQLWithContext;
}(react_1.default.Component));
function GraphiQLLogo(props) {
return (react_1.default.createElement("div", { className: "title" }, props.children || (react_1.default.createElement("span", null,
"Graph",
react_1.default.createElement("em", null, "i"),
"QL"))));
}
GraphiQLLogo.displayName = 'GraphiQLLogo';
function GraphiQLToolbar(props) {
return (react_1.default.createElement("div", { className: "toolbar", role: "toolbar", "aria-label": "Editor Commands" }, props.children));
}
GraphiQLToolbar.displayName = 'GraphiQLToolbar';
function GraphiQLFooter(props) {
return react_1.default.createElement("div", { className: "footer" }, props.children);
}
GraphiQLFooter.displayName = 'GraphiQLFooter';
function isChildComponentType(child, component) {
var _a;
if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.displayName) &&
child.type.displayName === component.displayName) {
return true;
}
return child.type === component;
}
//# sourceMappingURL=GraphiQL.js.map