diff --git a/packages/gatsby-graphiql-explorer/package.json b/packages/gatsby-graphiql-explorer/package.json index fb8a4b7f378e4..ccd2565eaf5d5 100644 --- a/packages/gatsby-graphiql-explorer/package.json +++ b/packages/gatsby-graphiql-explorer/package.json @@ -38,17 +38,17 @@ "@babel/plugin-transform-runtime": "^7.15.0", "@babel/preset-env": "^7.15.4", "@babel/preset-react": "^7.14.0", - "@graphiql/plugin-explorer": "^0.1.3", - "@graphiql/react": "^0.13.0", - "@graphiql/toolkit": "^0.7.3", + "@graphiql/plugin-code-exporter": "^0.1.0", + "@graphiql/plugin-explorer": "^0.1.10", + "@graphiql/react": "^0.13.7", + "@graphiql/toolkit": "^0.8.0", "babel-loader": "^8.2.2", "babel-preset-gatsby-package": "^3.0.0-next.1", "core-js": "^3.22.3", "cross-env": "^7.0.3", "css-loader": "^6.2.0", "del-cli": "^5.0.0", - "graphiql": "^2.0.6", - "graphiql-code-exporter": "^3.0.3", + "graphiql": "^2.0.13", "html-webpack-plugin": "^5.3.2", "npm-run-all": "4.1.5", "react": "^18.2.0", diff --git a/packages/gatsby-graphiql-explorer/src/app.jsx b/packages/gatsby-graphiql-explorer/src/app.jsx index 5ffc7eaa0b4c9..b93852c6361c1 100644 --- a/packages/gatsby-graphiql-explorer/src/app.jsx +++ b/packages/gatsby-graphiql-explorer/src/app.jsx @@ -6,8 +6,8 @@ import ReactDOM from "react-dom" import { GraphiQL } from "graphiql" import { getIntrospectionQuery } from "graphql" import { useExplorerPlugin } from "@graphiql/plugin-explorer" +import { useExporterPlugin } from "@graphiql/plugin-code-exporter" -import { useExporterPlugin } from "./code-exporter/plugin.jsx" import { snippets } from "./code-exporter/snippets.js" import { Logo } from "./logo.jsx" import { fetcher, fetchFragments, locationQuery } from "./utils.js" @@ -21,6 +21,7 @@ import { import "graphiql/graphiql.css" import "@graphiql/plugin-explorer/dist/style.css" +import "@graphiql/plugin-code-exporter/dist/style.css" import "./app.css" const parameters = {} diff --git a/packages/gatsby-graphiql-explorer/src/code-exporter/code-exporter.css b/packages/gatsby-graphiql-explorer/src/code-exporter/code-exporter.css deleted file mode 100644 index e0d6e752c1333..0000000000000 --- a/packages/gatsby-graphiql-explorer/src/code-exporter/code-exporter.css +++ /dev/null @@ -1,135 +0,0 @@ -.graphiql-code-exporter { - min-width: unset !important; - position: relative; - padding: var(--px-16) 0; -} - -.graphiql-code-exporter > div { - font-family: var(--font-family) !important; - padding: 0 !important; - font-size: var(--font-size-body) !important; -} - -.graphiql-code-exporter > div:first-of-type { - display: flex; - flex-direction: column; - gap: var(--px-16); -} - -.graphiql-code-exporter > div:first-of-type > div { - padding: 0 !important; -} - -.graphiql-code-exporter > div:first-of-type > div:first-of-type { - display: flex; - flex-direction: row; - gap: var(--px-16); -} - -.graphiql-code-exporter - > div:first-of-type - > div:last-of-type - > div:first-of-type { - color: hsla(var(--color-neutral), var(--alpha-secondary)) !important; - font-variant: unset !important; - text-transform: unset !important; - font-weight: unset !important; - margin-bottom: var(--px-12); -} - -.graphiql-code-exporter button.toolbar-button { - display: block; - height: var(--toolbar-width) !important; - width: var(--toolbar-width) !important; - border-radius: var(--border-radius-4) !important; - cursor: pointer; - display: inline-flex; - font-size: unset !important; - left: unset !important; - margin-top: unset !important; - top: var(--px-16); - right: 0; - justify-content: center; - align-items: center; - background-color: unset !important; -} - -.graphiql-code-exporter button.toolbar-button svg { - fill: hsla(var(--color-neutral), var(--alpha-tertiary)); -} - -.graphiql-code-exporter > div:last-of-type { - border-top: none !important; - display: flex; - flex: 1; - margin-top: var(--px-24) !important; -} - -.graphiql-code-exporter > div:last-of-type > div { - position: relative; - min-height: 600px; - width: calc(100% - 2 * var(--px-16)); -} - -.graphiql-code-exporter .toolbar-menu.toolbar-button { - position: relative; - cursor: pointer; - text-decoration: none; - padding: var(--px-8) var(--px-12); - color: hsla(var(--color-neutral), 1) !important; - border-radius: var(--border-radius-4) !important; -} - -.graphiql-code-exporter .toolbar-menu.toolbar-button:hover { - background-color: hsla( - var(--color-neutral), - var(--alpha-background-light) - ) !important; -} - -.graphiql-code-exporter .toolbar-menu-items { - background-color: hsl(var(--color-base)) !important; - border: var(--popover-border); - border-radius: var(--border-radius-8); - box-shadow: var(--popover-box-shadow) !important; - padding: var(--px-4); - max-width: 250px; - font-size: inherit; - display: block; - white-space: nowrap; - outline: none; - position: absolute; - z-index: 100; - margin-top: var(--px-8); - visibility: hidden; - left: 0; -} - -.graphiql-code-exporter .toolbar-menu-items.open { - visibility: visible; -} - -.graphiql-code-exporter .toolbar-menu-items > li { - cursor: pointer; - display: block; - color: inherit; - font: inherit; - text-decoration: initial; - border-radius: var(--border-radius-4); - margin: var(--px-4); - overflow: hidden; - padding: var(--px-6) var(--px-8); - text-overflow: ellipsis; - white-space: nowrap; -} - -.graphiql-code-exporter .toolbar-menu-items > li:hover { - color: inherit; - background-color: hsla(var(--color-neutral), var(--alpha-background-light)); -} - -.graphiql-code-exporter .CodeMirror { - box-shadow: var(--popover-box-shadow); - border-radius: calc(var(--border-radius-12)); - padding: var(--px-16); -} diff --git a/packages/gatsby-graphiql-explorer/src/code-exporter/plugin.jsx b/packages/gatsby-graphiql-explorer/src/code-exporter/plugin.jsx deleted file mode 100644 index f3661534d77cb..0000000000000 --- a/packages/gatsby-graphiql-explorer/src/code-exporter/plugin.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react" -import GraphiQLCodeExporter from "graphiql-code-exporter" -import "./code-exporter.css" - -export function useExporterPlugin(props) { - const propsRef = React.useRef(props) - propsRef.current = props - return React.useMemo(() => { - return { - title: `GraphiQL Code Exporter`, - icon: () => ( - - - - ), - content: () => ( - - ), - } - }, []) -} diff --git a/packages/gatsby-graphiql-explorer/src/code-exporter/snippets.js b/packages/gatsby-graphiql-explorer/src/code-exporter/snippets.js index 04ad809e1b1ee..9a2da7825e2d7 100644 --- a/packages/gatsby-graphiql-explorer/src/code-exporter/snippets.js +++ b/packages/gatsby-graphiql-explorer/src/code-exporter/snippets.js @@ -20,17 +20,18 @@ const pageQuery = { language: `JavaScript`, codeMirrorMode: `jsx`, options: [], - generate: arg => `import React from "react" + generate: arg => `import * as React from "react" import { graphql } from "gatsby" -const Page = ({ data }) => 
{JSON.stringify(data, null, 4)}
+const Page = ({ data }) => ( + 
{JSON.stringify(data, null, 2)}
+) export const query = graphql\` ${getQuery(arg, 2)} \` export default Page - `, } @@ -39,7 +40,7 @@ const useStaticQuery = { language: `JavaScript`, codeMirrorMode: `jsx`, options: [], - generate: arg => `import React from "react" + generate: arg => `import * as React from "react" import { useStaticQuery, graphql } from "gatsby" const ComponentName = () => { @@ -61,23 +62,24 @@ const createPages = { options: [], generate: arg => `const path = require(\`path\`) +const templatePath = path.resolve(\`PATH/TO/TEMPLATE.js\`) + exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions const result = await graphql(\` ${getQuery(arg, 4)} \`) - const templatePath = path.resolve(\`PATH/TO/TEMPLATE.js\`) result.data.${ arg.operationDataList[0].operationDefinition.selectionSet.selections[0].name .value }.forEach((node) => { createPage({ - path: NODE_SLUG, + path: node.id, component: templatePath, context: { - slug: NODE_SLUG, + id: node.id }, }) }) diff --git a/yarn.lock b/yarn.lock index d20afdb9c5dfa..492c13de2bd38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1662,20 +1662,27 @@ html-entities "^2.3.3" strip-ansi "^6.0.0" -"@graphiql/plugin-explorer@^0.1.3": - version "0.1.3" - resolved "https://registry.yarnpkg.com/@graphiql/plugin-explorer/-/plugin-explorer-0.1.3.tgz#7e597749b8a9768dc981aaaf31c1c1321be5a701" - integrity sha512-N3DDex87u5kV2EvpOFLtnhFg0kO37lBZof1TxiBI2bEv1HM1xCu6wgsRYc7MZeXzLysdGZiL4KqLNsxXh2nm+g== +"@graphiql/plugin-code-exporter@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@graphiql/plugin-code-exporter/-/plugin-code-exporter-0.1.0.tgz#724f61bc0d8d02ecaaabd4ec74412281620523c1" + integrity sha512-jHpBe+JGCpO4CHnW9yfkYpORdZGSf2/pzEF/EDqhln/VOtgX1FlSu/1OINvY2CSMe2R6LBk7oiuPuLGmxNWmog== + dependencies: + graphiql-code-exporter "^3.0.3" + +"@graphiql/plugin-explorer@^0.1.10": + version "0.1.10" + resolved "https://registry.yarnpkg.com/@graphiql/plugin-explorer/-/plugin-explorer-0.1.10.tgz#036d48c5194844b4349f6b15dcf6062e72f86ddb" + integrity sha512-Zfq8VQ9j9g9GleJ7WfTti4pRBCsp4lWL0ShXWgqJKKyV/3cIhKHt8PJW5PB34O/OACxCshXeANA2ibB2d/y3xg== dependencies: - "@graphiql/react" "^0.13.0" + "@graphiql/react" "^0.13.7" graphiql-explorer "^0.9.0" -"@graphiql/react@^0.13.0": - version "0.13.0" - resolved "https://registry.yarnpkg.com/@graphiql/react/-/react-0.13.0.tgz#83050db5bdc29fa5fe3306e0b0613074272931dd" - integrity sha512-n7TR0NxNHWQOl62NRC3V6sM57yrrRRJkBWSM9mb7k+CbQPceAAtrGiwyyvppgNCafNqJE5I4B8ZFzfhFGN5IPA== +"@graphiql/react@^0.13.7": + version "0.13.7" + resolved "https://registry.yarnpkg.com/@graphiql/react/-/react-0.13.7.tgz#23c41d0326893c336942d80e1e6cfb32eb7eac3b" + integrity sha512-mI+6mXd9AJFDJy39VuZGxCiVLvmBe2XoNidbN3lXgTLe689RZKifPaUw41USitQOu20sASoYDfzJ8i98G4urow== dependencies: - "@graphiql/toolkit" "^0.7.3" + "@graphiql/toolkit" "^0.8.0" "@reach/combobox" "^0.17.0" "@reach/dialog" "^0.17.0" "@reach/listbox" "^0.17.0" @@ -1683,16 +1690,16 @@ "@reach/tooltip" "^0.17.0" "@reach/visually-hidden" "^0.17.0" codemirror "^5.65.3" - codemirror-graphql "^2.0.0" + codemirror-graphql "^2.0.2" copy-to-clipboard "^3.2.0" graphql-language-service "^5.1.0" markdown-it "^12.2.0" set-value "^4.1.0" -"@graphiql/toolkit@^0.7.3": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@graphiql/toolkit/-/toolkit-0.7.3.tgz#0f8009a26eef01c0bb2168bb2c2421ee8b6d987a" - integrity sha512-Scr0fVcwN7Hb+9L315xMuI2NyWynY9ENMy6VEREF6x02XZNSOguG0uK9lzC2/RnIuFy7eA/ejMfgdaX9GGcZKQ== +"@graphiql/toolkit@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@graphiql/toolkit/-/toolkit-0.8.0.tgz#f778baaab36be7fa7c9c07e8161a3334fc2c23ec" + integrity sha512-DbMFhEKejpPzB6k8W3Mj+Rl8geXiw49USDF9Wdi06EEk1XLVh1iebDqveYY+4lViITsV4+BeGikxlqi8umfP4g== dependencies: "@n1ru4l/push-pull-async-iterable-iterator" "^3.1.0" meros "^1.1.4" @@ -7417,12 +7424,12 @@ codegen.macro@^4.1.0: dependencies: babel-plugin-codegen "^4.1.0" -codemirror-graphql@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-2.0.0.tgz#0705da4e179f0708b249d4460b231598cebaa696" - integrity sha512-4trIaV9LYo/yRMu3s5qf7ASrKQjcCGrVfqOwaFsdjjcG8koh93gCzZ+csMhe3n6A7lMLWEpPdFWBIepKGV7qQg== +codemirror-graphql@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-2.0.2.tgz#df3cbcb53efc2ad63f170888f25647659376f319" + integrity sha512-9c1cItR+8lG7thmTnDDQ3zI8YesNKiFCp2BnLFkYWCtdhSSuCUHebU/Vurew6ayyUl8MBCldNx3Ev66QAWM5Kw== dependencies: - graphql-language-service "^5.1.0" + graphql-language-service "5.0.6" codemirror@^5.65.3: version "5.65.8" @@ -11899,13 +11906,13 @@ graphiql-explorer@^0.9.0: resolved "https://registry.yarnpkg.com/graphiql-explorer/-/graphiql-explorer-0.9.0.tgz#25f6b990bfc3e04e88c0cf419e28d12abe2c4fbe" integrity sha512-fZC/wsuatqiQDO2otchxriFO0LaWIo/ovF/CQJ1yOudmY0P7pzDiP+l9CEHUiWbizk3e99x6DQG4XG1VxA+d6A== -graphiql@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-2.0.6.tgz#1fe992db6dbc71b494994ea9e4df6789e5c57eea" - integrity sha512-f7nwDc7wKEFi2Ttqwpbmv9Yk5j/rPgZWgGDXbABSBlopUW5+5agOPyNORtFIv6FrpP2TooAEye/xs8aFYjbR6A== +graphiql@^2.0.13: + version "2.0.13" + resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-2.0.13.tgz#2734382a66e77a8a9232540a1a1da5bbe3e9e8bb" + integrity sha512-hfqcd40aO2V44Z/rey6lGXYnEsbwseeokeeZGQbFfSImciGtyP0SS8MyE5s5yno6z/M0ymJccpaNaUlC6imSwA== dependencies: - "@graphiql/react" "^0.13.0" - "@graphiql/toolkit" "^0.7.3" + "@graphiql/react" "^0.13.7" + "@graphiql/toolkit" "^0.8.0" entities "^2.0.0" graphql-language-service "^5.1.0" markdown-it "^12.2.0" @@ -11922,6 +11929,14 @@ graphql-executor@0.0.23: resolved "https://registry.yarnpkg.com/graphql-executor/-/graphql-executor-0.0.23.tgz#205c1764b39ee0fcf611553865770f37b45851a2" integrity sha512-3Ivlyfjaw3BWmGtUSnMpP/a4dcXCp0mJtj0PiPG14OKUizaMKlSEX+LX2Qed0LrxwniIwvU6B4w/koVjEPyWJg== +graphql-language-service@5.0.6: + version "5.0.6" + resolved "https://registry.yarnpkg.com/graphql-language-service/-/graphql-language-service-5.0.6.tgz#7fd1e6479e5c3074b070c760fa961d9ad1ed7c72" + integrity sha512-FjE23aTy45Lr5metxCv3ZgSKEZOzN7ERR+OFC1isV5mHxI0Ob8XxayLTYjQKrs8b3kOpvgTYmSmu6AyXOzYslg== + dependencies: + nullthrows "^1.0.0" + vscode-languageserver-types "^3.15.1" + graphql-language-service@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/graphql-language-service/-/graphql-language-service-5.1.0.tgz#06f06eab5209daea066441abd1063afece62bfa9" @@ -25361,7 +25376,7 @@ vlq@^0.2.2: version "0.2.3" resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26" -vscode-languageserver-types@^3.17.1: +vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.17.1: version "3.17.2" resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.2.tgz#b2c2e7de405ad3d73a883e91989b850170ffc4f2" integrity sha512-zHhCWatviizPIq9B7Vh9uvrH6x3sK8itC84HkamnBWoDFJtzBf7SWlpLCZUit72b3os45h6RWQNC9xHRDF8dRA==