@arcblock/graphql-playground 3.0.10 → 3.0.12

package/lib/index.js

@@ -1,50 +1,60 @@
-import { jsx as i } from "react/jsx-runtime";
-import o from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
+import r from "prop-types";
 import { styled as x } from "@arcblock/ux/lib/Theme";
 import { GraphiQL as h } from "graphiql";
-import { explorerPlugin as m } from "@graphiql/plugin-explorer";
-import { createGraphiQLFetcher as g } from "@graphiql/toolkit";
-import t from "lodash/isUndefined";
+import { explorerPlugin as g } from "@graphiql/plugin-explorer";
+import { createGraphiQLFetcher as m } from "@graphiql/toolkit";
 import "graphiql/style.css";
 import "@graphiql/plugin-explorer/style.css";
 import { mergeProps as b } from "@arcblock/ux/lib/Util";
-function a({ ...e }) {
-  const r = Object.assign({}, e);
-  t(r.title) && (r.title = "Query"), t(r.defaultQuery) && (r.defaultQuery = "{}"), t(r.persistentQuery) && (r.persistentQuery = !1), t(r.enableQueryComposer) && (r.enableQueryComposer = !0), t(r.enableCodeExporter) && (r.enableCodeExporter = !1), t(r.enableHistory) && (r.enableHistory = !1), t(r.extraCodeSnippets) && (r.extraCodeSnippets = []), t(r.extraHeaders) && (r.extraHeaders = {});
-  const p = b(r, a, [
+import { Box as c } from "@mui/material";
+function p({ ...e }) {
+  const a = Object.assign(
+    {
+      title: "Query",
+      defaultQuery: "{}",
+      persistentQuery: !1,
+      enableQueryComposer: !0,
+      enableCodeExporter: !1,
+      enableHistory: !1,
+      extraCodeSnippets: [],
+      extraHeaders: {}
+    },
+    e
+  ), o = b(a, p, [
     "style",
     "persistentQuery",
     "enableQueryComposer",
     "enableCodeExporter",
     "enableHistory"
-  ]), n = g({
-    url: p.endpoint
-  }), l = [m()], {
-    endpoint: y,
-    title: f,
-    enableCodeExporter: C,
-    enableQueryComposer: w,
-    enableHistory: $,
+  ]), i = typeof o.extraHeaders == "function" ? o.extraHeaders() : o.extraHeaders || {}, n = m({
+    url: o.endpoint,
+    headers: i
+  }), l = [g()], {
+    endpoint: f,
+    title: C,
+    enableCodeExporter: w,
+    enableQueryComposer: $,
+    enableHistory: k,
     extraCodeSnippets: Q,
     defaultQuery: d,
-    extraHeaders: k,
     persistentQuery: H,
     ...s
-  } = p;
-  return /* @__PURE__ */ i(c, { ...s, children: /* @__PURE__ */ i(h, { fetcher: n, plugins: l, defaultQuery: d }) });
+  } = o;
+  return /* @__PURE__ */ t(u, { ...s, children: /* @__PURE__ */ t(h, { fetcher: n, plugins: l, defaultQuery: d }) });
 }
-a.propTypes = {
-  endpoint: o.string.isRequired,
-  defaultQuery: o.string,
-  title: o.string,
-  persistentQuery: o.bool,
-  enableQueryComposer: o.bool,
-  enableCodeExporter: o.bool,
-  enableHistory: o.bool,
-  extraCodeSnippets: o.array,
-  extraHeaders: o.any
+p.propTypes = {
+  endpoint: r.string.isRequired,
+  defaultQuery: r.string,
+  title: r.string,
+  persistentQuery: r.bool,
+  enableQueryComposer: r.bool,
+  enableCodeExporter: r.bool,
+  enableHistory: r.bool,
+  extraCodeSnippets: r.array,
+  extraHeaders: r.any
 };
-const c = x("div")`
+const u = x(c)`
   display: flex;
   flex-direction: row;
   flex: 1;
@@ -233,5 +243,5 @@ const c = x("div")`
   }
 `;
 export {
-  a as default
+  p as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "3.0.10",
+  "version": "3.0.12",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -30,13 +30,14 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@graphiql/plugin-explorer": "^4.0.6",
+    "@graphiql/plugin-explorer": "^5.0.0",
+    "@graphiql/toolkit": "^0.11.3",
     "axios": "^1.10.0",
-    "graphiql": "^4.1.2",
+    "graphiql": "^5.0.3",
     "graphql": "^16.11.0"
   },
   "peerDependencies": {
-    "@arcblock/ux": "^3.0.8",
+    "@arcblock/ux": "^3.0.10",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "react": "^19.0.0",
@@ -49,5 +50,5 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0"
   },
-  "gitHead": "8e4b3b4f9cc52c8f1f1d270ab03a3c566073617a"
+  "gitHead": "ebe824e4b0ddfc1cbdd9ffecc22283e57a58c042"
 }

package/src/index.jsx

@@ -4,7 +4,6 @@ import { GraphiQL } from 'graphiql';
 // eslint-disable-next-line import/no-unresolved
 import { explorerPlugin } from '@graphiql/plugin-explorer';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import isUndefined from 'lodash/isUndefined';
 
 // eslint-disable-next-line import/no-unresolved
 import 'graphiql/style.css';
@@ -12,33 +11,23 @@ import 'graphiql/style.css';
 import '@graphiql/plugin-explorer/style.css';
 
 import { mergeProps } from '@arcblock/ux/lib/Util';
+import { Box } from '@mui/material';
 
 export default function GraphQLPlayground({ ...rawProps }) {
-  const props = Object.assign({}, rawProps);
-  if (isUndefined(props.title)) {
-    props.title = 'Query';
-  }
-  if (isUndefined(props.defaultQuery)) {
-    props.defaultQuery = '{}';
-  }
-  if (isUndefined(props.persistentQuery)) {
-    props.persistentQuery = false;
-  }
-  if (isUndefined(props.enableQueryComposer)) {
-    props.enableQueryComposer = true;
-  }
-  if (isUndefined(props.enableCodeExporter)) {
-    props.enableCodeExporter = false;
-  }
-  if (isUndefined(props.enableHistory)) {
-    props.enableHistory = false;
-  }
-  if (isUndefined(props.extraCodeSnippets)) {
-    props.extraCodeSnippets = [];
-  }
-  if (isUndefined(props.extraHeaders)) {
-    props.extraHeaders = {};
-  }
+  const props = Object.assign(
+    {
+      title: 'Query',
+      defaultQuery: '{}',
+      persistentQuery: false,
+      enableQueryComposer: true,
+      enableCodeExporter: false,
+      enableHistory: false,
+      extraCodeSnippets: [],
+      extraHeaders: {},
+    },
+    rawProps
+  );
+
   const newProps = mergeProps(props, GraphQLPlayground, [
     'style',
     'persistentQuery',
@@ -46,13 +35,17 @@ export default function GraphQLPlayground({ ...rawProps }) {
     'enableCodeExporter',
     'enableHistory',
   ]);
+  const extraHeaders =
+    typeof newProps.extraHeaders === 'function' ? newProps.extraHeaders() : newProps.extraHeaders || {};
 
   const fetcher = createGraphiQLFetcher({
     url: newProps.endpoint,
+    headers: extraHeaders,
   });
   const explorer = explorerPlugin();
+  // FIXME: @zhanghan HISTORY_PLUGIN 会导致 webapp 报错，之后再修复
+  // import { HISTORY_PLUGIN } from 'graphiql';
   const plugins = [explorer];
-
   const {
     endpoint,
     title,
@@ -61,7 +54,6 @@ export default function GraphQLPlayground({ ...rawProps }) {
     enableHistory,
     extraCodeSnippets,
     defaultQuery,
-    extraHeaders,
     persistentQuery,
     ...rest
   } = newProps;
@@ -85,7 +77,7 @@ GraphQLPlayground.propTypes = {
   extraHeaders: PropTypes.any,
 };
 
-const Container = styled('div')`
+const Container = styled(Box)`
   display: flex;
   flex-direction: row;
   flex: 1;