@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`.
433 lines (429 loc) • 14.3 kB
JavaScript
import React, { useMemo } from "react";
import { createRoot } from "react-dom/client";
import "graphiql/style.css";
import "@graphiql/plugin-explorer/style.css";
import { GraphiQL } from "graphiql";
import { Kind, parse } from "graphql";
import { explorerPlugin } from "@graphiql/plugin-explorer";
import { SubscriptionProtocol, UrlLoader } from "@graphql-tools/url-loader";
import "json-bigint-patch";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/YogaLogo.tsx
const YogaLogo = () => /* @__PURE__ */ jsxs("svg", {
viewBox: "0 0 90 90",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("mask", {
id: "g",
style: { maskType: "alpha" },
maskUnits: "userSpaceOnUse",
x: 16,
y: 14,
width: 58,
height: 62,
children: [
/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("g", {
mask: "url(#g)",
children: [/* @__PURE__ */ jsx("g", {
filter: "url(#h)",
children: /* @__PURE__ */ jsx("circle", {
cx: 73,
cy: 25,
r: 26,
fill: "#ED2E7E"
})
}), /* @__PURE__ */ jsx("g", {
filter: "url(#i)",
children: /* @__PURE__ */ jsx("circle", {
cx: 26,
cy: 69,
r: 26,
fill: "#1CC8EE"
})
})]
}),
/* @__PURE__ */ 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__ */ jsx("mask", {
id: "k",
style: { maskType: "alpha" },
maskUnits: "userSpaceOnUse",
x: 30,
y: 28,
width: 30,
height: 30,
children: /* @__PURE__ */ 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__ */ jsxs("g", {
mask: "url(#k)",
children: [/* @__PURE__ */ jsx("g", {
filter: "url(#l)",
children: /* @__PURE__ */ jsx("circle", {
cx: 38,
cy: 6,
r: 26,
fill: "#ED2E7E"
})
}), /* @__PURE__ */ jsx("g", {
filter: "url(#m)",
children: /* @__PURE__ */ jsx("circle", {
cx: 63,
cy: 69,
r: 26,
fill: "#1CC8EE"
})
})]
}),
/* @__PURE__ */ jsxs("defs", { children: [
/* @__PURE__ */ jsxs("linearGradient", {
id: "a",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("linearGradient", {
id: "b",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("linearGradient", {
id: "c",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("linearGradient", {
id: "d",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("linearGradient", {
id: "e",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("linearGradient", {
id: "f",
x1: 16,
y1: 14,
x2: 87.213,
y2: 44.598,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("linearGradient", {
id: "j",
x1: 30,
y1: 28,
x2: 66.165,
y2: 44.436,
gradientUnits: "userSpaceOnUse",
children: [/* @__PURE__ */ jsx("stop", { stopColor: "#7433FF" }), /* @__PURE__ */ jsx("stop", {
offset: 1,
stopColor: "#FFA3FD"
})]
}),
/* @__PURE__ */ jsxs("filter", {
id: "h",
x: 23,
y: -25,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ jsx("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ jsx("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ jsx("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
}),
/* @__PURE__ */ jsxs("filter", {
id: "i",
x: -24,
y: 19,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ jsx("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ jsx("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ jsx("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
}),
/* @__PURE__ */ jsxs("filter", {
id: "l",
x: -12,
y: -44,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ jsx("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ jsx("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ jsx("feGaussianBlur", {
stdDeviation: 12,
result: "effect1_foregroundBlur_1677_11483"
})
]
}),
/* @__PURE__ */ jsxs("filter", {
id: "m",
x: 13,
y: 19,
width: 100,
height: 100,
filterUnits: "userSpaceOnUse",
colorInterpolationFilters: "sRGB",
children: [
/* @__PURE__ */ jsx("feFlood", {
floodOpacity: 0,
result: "BackgroundImageFix"
}),
/* @__PURE__ */ jsx("feBlend", {
in: "SourceGraphic",
in2: "BackgroundImageFix",
result: "shape"
}),
/* @__PURE__ */ 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 === Kind.OPERATION_DEFINITION && operationName && definition.name?.value !== operationName) return false;
return true;
});
return {
kind: 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 = useMemo(() => new UrlLoader(), []);
const fetcher = 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: 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(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 = 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__ */ jsx("div", {
className: "graphiql-container",
children: /* @__PURE__ */ jsx(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__ */ jsx(GraphiQL.Logo, { children: /* @__PURE__ */ jsxs("div", {
style: {
display: "flex",
alignItems: "center"
},
children: [typeof props?.logo === "string" ? /* @__PURE__ */ jsx("div", {
style: {
width: 40,
display: "flex"
},
dangerouslySetInnerHTML: { __html: props.logo }
}) : /* @__PURE__ */ jsx("div", {
style: {
width: 40,
display: "flex"
},
children: props?.logo || /* @__PURE__ */ jsx(YogaLogo, {})
}), typeof props?.title === "string" ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: props.title } }) : /* @__PURE__ */ jsx("span", { children: props?.title || /* @__PURE__ */ jsxs(Fragment, { children: [
"Yoga Graph",
/* @__PURE__ */ jsx("em", { children: "i" }),
"QL"
] }) })]
}) })
})
});
}
//#endregion
//#region src/index.tsx
function renderYogaGraphiQL(element, opts) {
createRoot(element).render(React.createElement(YogaGraphiQL, opts));
}
globalThis.React = React;
//#endregion
export { renderYogaGraphiQL };