@graphiql/react
Version:
[Changelog](https://github.com/graphql/graphiql/blob/main/packages/graphiql-react/CHANGELOG.md) | [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql_react.html) | [NPM](https://www.npmjs.com/package/@graphiql/react)
538 lines (529 loc) • 16.4 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { c } from "react-compiler-runtime";
import { useState, useEffect, useContext, createContext, useRef, useId } from "react";
import { useStore, create } from "zustand";
import { useShallow } from "zustand/shallow";
import { StorageAPI } from "@graphiql/toolkit";
import { visit, parse, isSchema, validateSchema } from "graphql";
import { DEFAULT_QUERY, MONACO_THEME_NAME, DEFAULT_PRETTIFY_QUERY, STORAGE_KEY } from "../constants.js";
import { getDefaultTabState } from "../utility/tabs.js";
import { useMonaco } from "../stores/monaco.js";
import { useDidUpdate } from "../utility/hooks.js";
import { createStorageSlice } from "../stores/storage.js";
import { createEditorSlice } from "../stores/editor.js";
import { createExecutionSlice } from "../stores/execution.js";
import { createPluginSlice } from "../stores/plugin.js";
import { createSchemaSlice } from "../stores/schema.js";
import { createThemeSlice } from "../stores/theme.js";
const GraphiQLContext = createContext(null);
const GraphiQLProvider = (props) => {
const $ = c(5);
if (!props.fetcher) {
throw new TypeError("The `GraphiQLProvider` component requires a `fetcher` function to be passed as prop.");
}
if (props.validationRules) {
throw new TypeError("The `validationRules` prop has been removed. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.");
}
if (props.query) {
throw new TypeError(`The \`query\` prop has been removed. Use \`initialQuery\` prop instead, or set value programmatically using:
const queryEditor = useGraphiQL(state => state.queryEditor)
useEffect(() => {
queryEditor.setValue(query)
}, [query])`);
}
if (props.variables) {
throw new TypeError(`The \`variables\` prop has been removed. Use \`initialVariables\` prop instead, or set value programmatically using:
const variableEditor = useGraphiQL(state => state.variableEditor)
useEffect(() => {
variableEditor.setValue(variables)
}, [variables])`);
}
if (props.headers) {
throw new TypeError(`The \`headers\` prop has been removed. Use \`initialHeaders\` prop instead, or set value programmatically using:
const headerEditor = useGraphiQL(state => state.headerEditor)
useEffect(() => {
headerEditor.setValue(headers)
}, [headers])`);
}
if (props.response) {
throw new TypeError(`The \`response\` prop has been removed. Set value programmatically using:
const responseEditor = useGraphiQL(state => state.responseEditor)
useEffect(() => {
responseEditor.setValue(response)
}, [response])`);
}
const {
actions
} = useMonaco();
const [mounted, setMounted] = useState(false);
let t0;
if ($[0] !== actions) {
t0 = () => {
actions.initialize();
setMounted(true);
};
$[0] = actions;
$[1] = t0;
} else {
t0 = $[1];
}
let t1;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t1 = [];
$[2] = t1;
} else {
t1 = $[2];
}
useEffect(t0, t1);
if (!mounted) {
return null;
}
let t2;
if ($[3] !== props) {
t2 = /* @__PURE__ */ jsx(InnerGraphiQLProvider, { ...props });
$[3] = props;
$[4] = t2;
} else {
t2 = $[4];
}
return t2;
};
const InnerGraphiQLProvider = (t0) => {
const $ = c(76);
let $storage;
let children;
let defaultHeaders;
let defaultTabs;
let externalFragments;
let fetcher;
let getDefaultFieldNames;
let onCopyQuery;
let onEditOperationName;
let onSchemaChange;
let onTabChange;
let onTogglePluginVisibility;
let props;
let referencePlugin;
let schema;
let t1;
let t10;
let t11;
let t2;
let t3;
let t4;
let t5;
let t6;
let t7;
let t8;
let t9;
let visiblePlugin;
if ($[0] !== t0) {
({
defaultHeaders,
defaultQuery: t1,
defaultTabs,
externalFragments,
onEditOperationName,
onTabChange,
shouldPersistHeaders: t2,
onCopyQuery,
onPrettifyQuery: t3,
dangerouslyAssumeSchemaIsValid: t4,
fetcher,
inputValueDeprecation: t5,
introspectionQueryName: t6,
onSchemaChange,
schema,
schemaDescription: t7,
getDefaultFieldNames,
operationName: t8,
onTogglePluginVisibility,
plugins: t9,
referencePlugin,
visiblePlugin,
children,
defaultTheme: t10,
editorTheme: t11,
storage: $storage,
...props
} = t0);
$[0] = t0;
$[1] = $storage;
$[2] = children;
$[3] = defaultHeaders;
$[4] = defaultTabs;
$[5] = externalFragments;
$[6] = fetcher;
$[7] = getDefaultFieldNames;
$[8] = onCopyQuery;
$[9] = onEditOperationName;
$[10] = onSchemaChange;
$[11] = onTabChange;
$[12] = onTogglePluginVisibility;
$[13] = props;
$[14] = referencePlugin;
$[15] = schema;
$[16] = t1;
$[17] = t10;
$[18] = t11;
$[19] = t2;
$[20] = t3;
$[21] = t4;
$[22] = t5;
$[23] = t6;
$[24] = t7;
$[25] = t8;
$[26] = t9;
$[27] = visiblePlugin;
} else {
$storage = $[1];
children = $[2];
defaultHeaders = $[3];
defaultTabs = $[4];
externalFragments = $[5];
fetcher = $[6];
getDefaultFieldNames = $[7];
onCopyQuery = $[8];
onEditOperationName = $[9];
onSchemaChange = $[10];
onTabChange = $[11];
onTogglePluginVisibility = $[12];
props = $[13];
referencePlugin = $[14];
schema = $[15];
t1 = $[16];
t10 = $[17];
t11 = $[18];
t2 = $[19];
t3 = $[20];
t4 = $[21];
t5 = $[22];
t6 = $[23];
t7 = $[24];
t8 = $[25];
t9 = $[26];
visiblePlugin = $[27];
}
const defaultQuery = t1 === void 0 ? DEFAULT_QUERY : t1;
const shouldPersistHeaders = t2 === void 0 ? false : t2;
const onPrettifyQuery = t3 === void 0 ? DEFAULT_PRETTIFY_QUERY : t3;
const dangerouslyAssumeSchemaIsValid = t4 === void 0 ? false : t4;
const inputValueDeprecation = t5 === void 0 ? false : t5;
const introspectionQueryName = t6 === void 0 ? "IntrospectionQuery" : t6;
const schemaDescription = t7 === void 0 ? false : t7;
const operationName = t8 === void 0 ? null : t8;
let t12;
if ($[28] !== t9) {
t12 = t9 === void 0 ? [] : t9;
$[28] = t9;
$[29] = t12;
} else {
t12 = $[29];
}
const plugins = t12;
const defaultTheme = t10 === void 0 ? null : t10;
const editorTheme = t11 === void 0 ? MONACO_THEME_NAME : t11;
const storeRef = useRef(null);
const uriInstanceId = useId();
if (storeRef.current === null) {
let t132;
if ($[30] !== $storage || $[31] !== defaultHeaders || $[32] !== defaultQuery || $[33] !== defaultTabs || $[34] !== defaultTheme || $[35] !== editorTheme || $[36] !== externalFragments || $[37] !== fetcher || $[38] !== getDefaultFieldNames || $[39] !== inputValueDeprecation || $[40] !== introspectionQueryName || $[41] !== onCopyQuery || $[42] !== onEditOperationName || $[43] !== onPrettifyQuery || $[44] !== onSchemaChange || $[45] !== onTabChange || $[46] !== onTogglePluginVisibility || $[47] !== operationName || $[48] !== plugins || $[49] !== props.initialHeaders || $[50] !== props.initialQuery || $[51] !== props.initialVariables || $[52] !== referencePlugin || $[53] !== schemaDescription || $[54] !== shouldPersistHeaders || $[55] !== uriInstanceId || $[56] !== visiblePlugin) {
const storage = new StorageAPI($storage);
const getInitialVisiblePlugin = function getInitialVisiblePlugin2() {
const storedValue = storage.get(STORAGE_KEY.visiblePlugin);
const pluginForStoredValue = plugins.find((plugin) => plugin.title === storedValue);
if (pluginForStoredValue) {
return pluginForStoredValue;
}
if (storedValue) {
storage.set(STORAGE_KEY.visiblePlugin, "");
}
return visiblePlugin;
};
const getInitialTheme = function getInitialTheme2() {
const stored = storage.get(STORAGE_KEY.theme);
switch (stored) {
case "light": {
return "light";
}
case "dark": {
return "dark";
}
default: {
if (typeof stored === "string") {
storage.set(STORAGE_KEY.theme, "");
}
return defaultTheme;
}
}
};
const getInitialState = function getInitialState2() {
const query = props.initialQuery ?? storage.get(STORAGE_KEY.query);
const variables = props.initialVariables ?? storage.get(STORAGE_KEY.variables);
const headers = props.initialHeaders ?? storage.get(STORAGE_KEY.headers);
const {
tabs,
activeTabIndex
} = getDefaultTabState({
defaultHeaders,
defaultQuery,
defaultTabs,
headers,
query,
shouldPersistHeaders,
storage,
variables
});
const isStored = storage.get(STORAGE_KEY.persistHeaders) !== null;
const $shouldPersistHeaders = shouldPersistHeaders !== false && isStored ? storage.get(STORAGE_KEY.persistHeaders) === "true" : shouldPersistHeaders;
const store = create((...t142) => {
const args = t142;
const storageSlice = createStorageSlice({
storage
})(...args);
const editorSlice = createEditorSlice({
activeTabIndex,
defaultHeaders,
defaultQuery,
externalFragments: getExternalFragments(externalFragments),
initialHeaders: headers ?? defaultHeaders ?? "",
initialQuery: query ?? (activeTabIndex === 0 ? tabs[0].query : null) ?? "",
initialVariables: variables ?? "",
onCopyQuery,
onEditOperationName,
onPrettifyQuery,
onTabChange,
shouldPersistHeaders: $shouldPersistHeaders,
tabs,
uriInstanceId: uriInstanceId.replaceAll(/[:«»]/g, "") + "-"
})(...args);
const executionSlice = createExecutionSlice({
fetcher,
getDefaultFieldNames,
overrideOperationName: operationName
})(...args);
const pluginSlice = createPluginSlice({
onTogglePluginVisibility,
referencePlugin
})(...args);
const schemaSlice = createSchemaSlice({
inputValueDeprecation,
introspectionQueryName,
onSchemaChange,
schemaDescription
})(...args);
const themeSlice = createThemeSlice({
editorTheme
})(...args);
return {
...storageSlice,
...editorSlice,
...executionSlice,
...pluginSlice,
...schemaSlice,
...themeSlice,
actions: {
...editorSlice.actions,
...executionSlice.actions,
...pluginSlice.actions,
...schemaSlice.actions,
...themeSlice.actions
}
};
});
const {
actions
} = store.getState();
actions.storeTabs({
activeTabIndex,
tabs
});
actions.setPlugins(plugins);
actions.setVisiblePlugin(getInitialVisiblePlugin());
actions.setTheme(getInitialTheme());
return store;
};
t132 = getInitialState();
$[30] = $storage;
$[31] = defaultHeaders;
$[32] = defaultQuery;
$[33] = defaultTabs;
$[34] = defaultTheme;
$[35] = editorTheme;
$[36] = externalFragments;
$[37] = fetcher;
$[38] = getDefaultFieldNames;
$[39] = inputValueDeprecation;
$[40] = introspectionQueryName;
$[41] = onCopyQuery;
$[42] = onEditOperationName;
$[43] = onPrettifyQuery;
$[44] = onSchemaChange;
$[45] = onTabChange;
$[46] = onTogglePluginVisibility;
$[47] = operationName;
$[48] = plugins;
$[49] = props.initialHeaders;
$[50] = props.initialQuery;
$[51] = props.initialVariables;
$[52] = referencePlugin;
$[53] = schemaDescription;
$[54] = shouldPersistHeaders;
$[55] = uriInstanceId;
$[56] = visiblePlugin;
$[57] = t132;
} else {
t132 = $[57];
}
storeRef.current = t132;
}
let t13;
let t14;
if ($[58] !== fetcher) {
t13 = () => {
storeRef.current.setState({
fetcher
});
};
t14 = [fetcher];
$[58] = fetcher;
$[59] = t13;
$[60] = t14;
} else {
t13 = $[59];
t14 = $[60];
}
useDidUpdate(t13, t14);
let t15;
let t16;
if ($[61] !== plugins || $[62] !== visiblePlugin) {
t15 = () => {
const {
actions: actions_0
} = storeRef.current.getState();
actions_0.setPlugins(plugins);
actions_0.setVisiblePlugin(visiblePlugin);
};
t16 = [plugins, visiblePlugin];
$[61] = plugins;
$[62] = visiblePlugin;
$[63] = t15;
$[64] = t16;
} else {
t15 = $[63];
t16 = $[64];
}
useDidUpdate(t15, t16);
let t17;
if ($[65] !== dangerouslyAssumeSchemaIsValid || $[66] !== schema) {
t17 = () => {
const newSchema = isSchema(schema) || schema == null ? schema : void 0;
const validationErrors = !newSchema || dangerouslyAssumeSchemaIsValid ? [] : validateSchema(newSchema);
const store_0 = storeRef.current;
store_0.setState((t182) => {
const {
requestCounter
} = t182;
return {
requestCounter: requestCounter + 1,
schema: newSchema,
shouldIntrospect: !isSchema(schema) && schema !== null,
validationErrors
};
});
const {
actions: actions_1
} = store_0.getState();
actions_1.introspect();
};
$[65] = dangerouslyAssumeSchemaIsValid;
$[66] = schema;
$[67] = t17;
} else {
t17 = $[67];
}
let t18;
if ($[68] !== dangerouslyAssumeSchemaIsValid || $[69] !== fetcher || $[70] !== schema) {
t18 = [schema, dangerouslyAssumeSchemaIsValid, fetcher];
$[68] = dangerouslyAssumeSchemaIsValid;
$[69] = fetcher;
$[70] = schema;
$[71] = t18;
} else {
t18 = $[71];
}
useEffect(t17, t18);
let t19;
let t20;
if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
t19 = () => {
const runIntrospection = function runIntrospection2(event) {
if (event.ctrlKey && event.key === "R") {
const {
actions: actions_2
} = storeRef.current.getState();
actions_2.introspect();
}
};
window.addEventListener("keydown", runIntrospection);
return () => {
window.removeEventListener("keydown", runIntrospection);
};
};
t20 = [];
$[72] = t19;
$[73] = t20;
} else {
t19 = $[72];
t20 = $[73];
}
useEffect(t19, t20);
let t21;
if ($[74] !== children) {
t21 = /* @__PURE__ */ jsx(GraphiQLContext.Provider, { value: storeRef, children });
$[74] = children;
$[75] = t21;
} else {
t21 = $[75];
}
return t21;
};
function useGraphiQL(selector) {
const store = useContext(GraphiQLContext);
if (!store) {
throw new Error(`"useGraphiQL" hook must be used within a <GraphiQLProvider> component.
It looks like you are trying to use the hook outside the GraphiQL provider tree.`);
}
return useStore(store.current, useShallow(selector));
}
const useGraphiQLActions = () => {
return useGraphiQL(_temp);
};
function getExternalFragments(externalFragments) {
const map = /* @__PURE__ */ new Map();
if (externalFragments) {
if (Array.isArray(externalFragments)) {
for (const fragment of externalFragments) {
map.set(fragment.name.value, fragment);
}
} else if (typeof externalFragments === "string") {
visit(parse(externalFragments), {
FragmentDefinition(fragment) {
map.set(fragment.name.value, fragment);
}
});
} else {
throw new TypeError("The `externalFragments` prop must either be a string that contains the fragment definitions in SDL or a list of `FragmentDefinitionNode` objects.");
}
}
return map;
}
function _temp(state) {
return state.actions;
}
export {
GraphiQLProvider,
useGraphiQL,
useGraphiQLActions
};
//# sourceMappingURL=provider.js.map