@graphql-yoga/graphiql
Version:
This the GraphiQL used by GraphQL Yoga. This package is currently not published to npm and only contains the React component `GraphQLYoga`.
457 lines (452 loc) • 18.4 kB
JavaScript
(function(global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom/client'), require('graphiql/style.css'), require('@graphiql/plugin-explorer/style.css'), require('graphiql'), require('graphql'), require('@graphiql/plugin-explorer'), require('@graphql-tools/url-loader'), require('json-bigint-patch'), require('react/jsx-runtime')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom/client', 'graphiql/style.css', '@graphiql/plugin-explorer/style.css', 'graphiql', 'graphql', '@graphiql/plugin-explorer', '@graphql-tools/url-loader', 'json-bigint-patch', 'react/jsx-runtime'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.YogaGraphiQL = {}), global.react,global.react_dom_client,global.graphiql_style_css,global._graphiql_plugin_explorer_style_css,global.graphiql,global.graphql,global._graphiql_plugin_explorer,global._graphql_tools_url_loader,global.json_bigint_patch,global.react_jsx_runtime));
})(this, function(exports, react, react_dom_client, graphiql_style_css, _graphiql_plugin_explorer_style_css, graphiql, graphql, _graphiql_plugin_explorer, _graphql_tools_url_loader, json_bigint_patch, react_jsx_runtime) {
//#region rolldown:runtime
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) {
__defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
}
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
react = __toESM(react);
//#region src/YogaLogo.tsx
const YogaLogo = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
viewBox: "0 0 90 90",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M21 25.35c.728 0 1.42.156 2.043.435l19.1-10.985c.9-.5 2-.8 3-.8 1.1 0 2.1.3 3 .8l16.4 9.5c-1.2.8-2.1 2-2.7 3.4l-15.9-9.2c-.3-.2-.599-.2-.899-.2-.3 0-.6.1-.9.2L25.823 29.025A5.005 5.005 0 0 1 21 35.35a5 5 0 0 1 0-10Z",
fill: "url(#a)"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M67.244 35.033A5.002 5.002 0 0 1 69 25.35a5 5 0 0 1 2.544 9.305V55.2c0 2.2-1.2 4.2-3 5.3l-16.4 9.4c0-1.5-.5-3-1.4-4.1l15.6-9c.6-.3.9-.9.9-1.6V35.033Z",
fill: "url(#b)"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M49.844 69.106a5 5 0 1 1-9.78 2.043L21.843 60.6c-1.9-1.1-3-3.1-3-5.3V36.8c.7.2 1.5.4 2.2.4.7 0 1.4-.1 2-.3v18.4c0 .7.4 1.3.9 1.6l17.382 10.058a5.002 5.002 0 0 1 8.516 2.14l.002.002v.006Z",
fill: "url(#c)"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("mask", {
id: "g",
style: { maskType: "alpha" },
maskUnits: "userSpaceOnUse",
x: 16,
y: 14,
width: 58,
height: 62,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M21 25.35c.728 0 1.42.156 2.043.435l19.1-10.985c.9-.5 2-.8 3-.8 1.1 0 2.1.3 3 .8l16.4 9.5c-1.2.8-2.1 2-2.7 3.4l-15.9-9.2c-.3-.2-.599-.2-.899-.2-.3 0-.6.1-.9.2L25.823 29.025A5.005 5.005 0 0 1 21 35.35a5 5 0 0 1 0-10Z",
fill: "url(#d)"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M67.244 35.033A5.002 5.002 0 0 1 69 25.35a5 5 0 0 1 2.544 9.305V55.2c0 2.2-1.2 4.2-3 5.3l-16.4 9.4c0-1.5-.5-3-1.4-4.1l15.6-9c.6-.3.9-.9.9-1.6V35.033Z",
fill: "url(#e)"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M49.844 69.106a5 5 0 1 1-9.78 2.043L21.843 60.6c-1.9-1.1-3-3.1-3-5.3V36.8c.7.2 1.5.4 2.2.4.7 0 1.4-.1 2-.3v18.4c0 .7.4 1.3.9 1.6l17.382 10.058a5.002 5.002 0 0 1 8.516 2.14l.002.002v.006Z",
fill: "url(#f)"
})
]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
mask: "url(#g)",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
filter: "url(#h)",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
cx: 73,
cy: 25,
r: 26,
fill: "#ED2E7E"
})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
filter: "url(#i)",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
cx: 26,
cy: 69,
r: 26,
fill: "#1CC8EE"
})
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M49.395 32.395c0 2.314-1.815 6.152-4.395 6.152-2.573 0-4.395-3.836-4.395-6.152A4.4 4.4 0 0 1 45 28a4.4 4.4 0 0 1 4.395 4.395ZM35.331 49.043v-.828c0-5.403 2.521-7.215 4.548-8.67.513-.368.98-.705 1.369-1.07 1.08 1.19 2.377 1.83 3.751 1.83 1.375 0 2.672-.64 3.753-1.83.388.366.855.702 1.367 1.07 2.027 1.455 4.548 3.267 4.548 8.67v.828l-.827.049c-3.856.227-6.976-2.192-8.841-5.514-1.884 3.357-5.015 5.74-8.84 5.514l-.828-.049Zm22.814 2.032c-1.128-.184-8.133-1.324-13.145 4.618-4.99-5.938-11.804-4.834-13.091-4.625a1.74 1.74 0 0 1-.21.028l.002.023c.024.281.266 3.156 2.355 5.123L30 58h30l-4.104-1.758c1.958-1.766 2.244-3.973 2.355-4.833.019-.146.033-.253.049-.313a1.388 1.388 0 0 1-.154-.021Zm-17.662-.971c1.912-.783 3.19-1.93 4.516-3.494 1.332 1.574 2.616 2.716 4.516 3.494l.06.114.01.021c-1.495.574-3.16 1.586-4.581 2.905-1.414-1.322-3.038-2.324-4.58-2.929l.059-.111Z",
fill: "url(#j)"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("mask", {
id: "k",
style: { maskType: "alpha" },
maskUnits: "userSpaceOnUse",
x: 30,
y: 28,
width: 30,
height: 30,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M49.395 32.395c0 2.314-1.815 6.152-4.395 6.152-2.573 0-4.395-3.836-4.395-6.152A4.4 4.4 0 0 1 45 28a4.4 4.4 0 0 1 4.395 4.395ZM35.331 49.043v-.828c0-5.403 2.521-7.215 4.548-8.67.513-.368.98-.705 1.369-1.07 1.08 1.19 2.377 1.83 3.751 1.83 1.375 0 2.672-.64 3.753-1.83.388.366.855.702 1.367 1.07 2.027 1.455 4.548 3.267 4.548 8.67v.828l-.827.049c-3.856.227-6.976-2.192-8.841-5.514-1.884 3.357-5.015 5.74-8.84 5.514l-.828-.049Zm22.814 2.032c-1.128-.184-8.133-1.324-13.145 4.618-4.99-5.938-11.804-4.834-13.091-4.625a1.74 1.74 0 0 1-.21.028l.002.023c.024.281.266 3.156 2.355 5.123L30 58h30l-4.104-1.758c1.958-1.766 2.244-3.973 2.355-4.833.019-.146.033-.253.049-.313a1.388 1.388 0 0 1-.154-.021Zm-17.662-.971c1.912-.783 3.19-1.93 4.516-3.494 1.332 1.574 2.616 2.716 4.516 3.494l.06.114.01.021c-1.495.574-3.16 1.586-4.581 2.905-1.414-1.322-3.038-2.324-4.58-2.929l.059-.111Z",
fill: "#000"
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", {
mask: "url(#k)",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
filter: "url(#l)",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
cx: 38,
cy: 6,
r: 26,
fill: "#ED2E7E"
})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
filter: "url(#m)",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
cx: 63,
cy: 69,
r: 26,
fill: "#1CC8EE"
})
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("defs", { children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "a",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "b",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "c",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "d",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "e",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "f",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
id: "j",
x1: 30,
y1: 28,
x2: 66.165,
y2: 44.436,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
id: "h",
x: 23,
y: -25,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
id: "i",
x: -24,
y: 19,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
id: "l",
x: -12,
y: -44,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("filter", {
id: "m",
x: 13,
y: 19,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
})
] })
]
});
//#endregion
//#region src/YogaGraphiQL.tsx
const getOperationWithFragments = (document, operationName) => {
const definitions = document.definitions.filter((definition) => {
if (definition.kind === graphql.Kind.OPERATION_DEFINITION && operationName && definition.name?.value !== operationName) return false;
return true;
});
return {
kind: graphql.Kind.DOCUMENT,
definitions
};
};
function YogaGraphiQL(props) {
const initialQuery = `#
# Welcome to ${props.title || "Yoga GraphiQL"}
#
# ${props.title || "Yoga GraphiQL"} is an in-browser tool for writing, validating, and
# testing GraphQL queries.
#
# Type queries into this side of the screen, and you will see intelligent
# typeaheads aware of the current GraphQL type schema and live syntax and
# validation errors highlighted within the text.
#
# GraphQL queries typically start with a "{" character. Lines that start
# with a # are ignored.
#
# An example GraphQL query might look like:
#
# {
# field(arg: "value") {
# subField
# }
# }
#
# Keyboard shortcuts:
#
# Prettify Query: Shift-Ctrl-P (or press the prettify button above)
#
# Merge Query: Shift-Ctrl-M (or press the merge button above)
#
# Run Query: Ctrl-Enter (or press the play button above)
#
# Auto Complete: Ctrl-Space (or just start typing)
#
`;
const endpoint = new URL(props.endpoint ?? location.pathname, location.href).toString();
const urlLoader = (0, react.useMemo)(() => new _graphql_tools_url_loader.UrlLoader(), []);
const fetcher = (0, react.useMemo)(() => {
if (props.fetcher) {
if (props.endpoint) console.warn("You are using a custom fetcher and an endpoint. The endpoint will be ignored.");
return props.fetcher;
}
const executor = urlLoader.getExecutorAsync(endpoint, {
subscriptionsProtocol: _graphql_tools_url_loader.SubscriptionProtocol.GRAPHQL_SSE,
subscriptionsEndpoint: endpoint,
credentials: "same-origin",
specifiedByUrl: true,
directiveIsRepeatable: true,
inputValueDeprecation: true,
...props,
headers: props.additionalHeaders || {},
fetch: (...args) => globalThis.fetch(...args)
});
return function fetcher(graphQLParams, opts) {
return executor({
document: getOperationWithFragments((0, graphql.parse)(graphQLParams.query), graphQLParams.operationName ?? void 0),
operationName: graphQLParams.operationName ?? void 0,
variables: graphQLParams.variables,
extensions: { headers: opts?.headers }
});
};
}, [
urlLoader,
endpoint,
props.fetcher
]);
const explorer = (0, _graphiql_plugin_explorer.explorerPlugin)({ showAttribution: true });
const currentUrl = new URL(location.href);
const initialQueryFromUrl = currentUrl.searchParams.get("query") || props.query || initialQuery;
const { query: deprecatedInitialQuery = initialQueryFromUrl, headers: deprecatedInitialHeaders, variables: deprecatedInitialVariables, ...otherProps } = props;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "graphiql-container",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(graphiql.GraphiQL, {
shouldPersistHeaders: true,
plugins: [explorer],
schemaDescription: true,
inputValueDeprecation: true,
isHeadersEditorEnabled: true,
defaultEditorToolsVisibility: true,
initialQuery: deprecatedInitialQuery,
defaultHeaders: deprecatedInitialHeaders,
initialVariables: deprecatedInitialVariables,
onEditQuery: (query, ast) => {
currentUrl.searchParams.set("query", query);
history.replaceState({}, "", currentUrl);
props.onEditQuery?.(query, ast);
},
...otherProps,
fetcher,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(graphiql.GraphiQL.Logo, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
style: {
display: "flex",
alignItems: "center"
},
children: [typeof props?.logo === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
style: {
width: 40,
display: "flex"
},
dangerouslySetInnerHTML: { __html: props.logo }
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
style: {
width: 40,
display: "flex"
},
children: props?.logo || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(YogaLogo, {})
}), typeof props?.title === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: props.title } }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props?.title || /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
"Yoga Graph",
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("em", { children: "i" }),
"QL"
] }) })]
}) })
})
});
}
//#endregion
//#region src/index.tsx
function renderYogaGraphiQL(element, opts) {
(0, react_dom_client.createRoot)(element).render(react.default.createElement(YogaGraphiQL, opts));
}
globalThis.React = react.default;
//#endregion
exports.renderYogaGraphiQL = renderYogaGraphiQL;
});