Merge remote-tracking branch 'origin/main' into fd-gql-multiple-schema

.changeset/curvy-balloons-allow.md

@@ -0,0 +1,5 @@
+---
+'graphiql': minor
+---
+
+Allow disabling tabs and added new prop `disableTabs`

examples/graphiql-webpack/package.json

@@ -9,11 +9,11 @@
     "start": "NODE_ENV=development webpack-cli serve"
   },
   "dependencies": {
-    "@graphiql/plugin-code-exporter": "^0.3.5",
-    "@graphiql/plugin-explorer": "^0.3.5",
+    "@graphiql/plugin-code-exporter": "^1.0.3",
+    "@graphiql/plugin-explorer": "^1.0.2",
     "@graphiql/toolkit": "^0.9.1",
-    "@graphiql/react": "^0.19.4",
-    "graphiql": "^3.0.6",
+    "@graphiql/react": "^0.20.2",
+    "graphiql": "^3.0.10",
     "graphql": "^16.4.0",
     "graphql-ws": "^5.5.5",
     "react": "^18.2.0",

packages/cm6-graphql/CHANGELOG.md

@@ -1,5 +1,17 @@
 # cm6-graphql
 
+## 0.0.12
+
+### Patch Changes
+
+- [#3463](https://github.com/graphql/graphiql/pull/3463) [`e45ba17c`](https://github.com/graphql/graphiql/commit/e45ba17cb2f13e5a79d3e87b0f30ef92ec55d861) Thanks [@imolorhe](https://github.com/imolorhe)! - Create a lint diagnostic from invalid schema
+
+## 0.0.11
+
+### Patch Changes
+
+- [#3461](https://github.com/graphql/graphiql/pull/3461) [`129666a9`](https://github.com/graphql/graphiql/commit/129666a9a86690bb72226674d40215f24dc5f7ea) Thanks [@imolorhe](https://github.com/imolorhe)! - Wrap cm6-graphql lint logic in try..catch
+
 ## 0.0.10
 
 ### Patch Changes

packages/cm6-graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm6-graphql",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "GraphQL language support for CodeMirror 6",
   "scripts": {
     "build": "cm-buildhelper src/index.ts",

packages/cm6-graphql/src/interfaces.ts

@@ -4,6 +4,7 @@ import { GraphQLSchema } from 'graphql';
 import { ContextToken, CompletionItem } from 'graphql-language-service';
 import { Position } from './helpers';
 export interface GqlExtensionsOptions {
+  showErrorOnInvalidSchema?: boolean;
   onShowInDocs?: (field?: string, type?: string, parentType?: string) => void;
   onFillAllFields?: (
     view: EditorView,

packages/cm6-graphql/src/lint.ts

@@ -1,17 +1,44 @@
 import { Diagnostic, linter } from '@codemirror/lint';
 import { getDiagnostics } from 'graphql-language-service';
 import { Position, posToOffset } from './helpers';
-import { getSchema, optionsStateField, schemaStateField } from './state';
+import {
+  getOpts,
+  getSchema,
+  optionsStateField,
+  schemaStateField,
+} from './state';
 import { Extension } from '@codemirror/state';
+import { validateSchema } from 'graphql';
 
 const SEVERITY = ['error', 'warning', 'info'] as const;
 
 export const lint: Extension = linter(
   view => {
     const schema = getSchema(view.state);
+    const options = getOpts(view.state);
     if (!schema) {
       return [];
     }
+    const validationErrors = validateSchema(schema);
+    if (validationErrors.length) {
+      if (!options?.showErrorOnInvalidSchema) {
+        return [];
+      }
+
+      const combinedError = validationErrors.map(error => {
+        return error.message;
+      });
+
+      return [
+        {
+          from: 0,
+          to: view.state.doc.length,
+          severity: 'error',
+          message: combinedError.join('\n'),
+          actions: [], // TODO:
+        },
+      ];
+    }
     const results = getDiagnostics(view.state.doc.toString(), schema);
 
     return results

packages/cm6-graphql/src/state.ts

@@ -49,7 +49,14 @@ export const getOpts = (state: EditorState) => {
   return state.field(optionsStateField);
 };
 
+const defaultOpts: GqlExtensionsOptions = {
+  showErrorOnInvalidSchema: true,
+};
+
 export const stateExtensions = (
   schema?: GraphQLSchema,
   opts?: GqlExtensionsOptions,
-) => [schemaStateField.init(() => schema), optionsStateField.init(() => opts)];
+) => [
+  schemaStateField.init(() => schema),
+  optionsStateField.init(() => ({ ...defaultOpts, ...opts })),
+];

packages/graphiql-plugin-code-exporter/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @graphiql/plugin-code-exporter
 
+## 1.0.3
+
+### Patch Changes
+
+- [#3439](https://github.com/graphql/graphiql/pull/3439) [`d07d5fc0`](https://github.com/graphql/graphiql/commit/d07d5fc0cf764518bc1184ef168361cedf61540b) Thanks [@xonx4l](https://github.com/xonx4l)! - FIX: Unexpected duplicate CSS "display" property
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`e89c432d`](https://github.com/graphql/graphiql/commit/e89c432d8d2b91f087b683360f23e0686462bc02)]:
+  - @graphiql/react@0.20.2
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`39bf31d1`](https://github.com/graphql/graphiql/commit/39bf31d15b1e7fb5f235ec9adc1ce8081536de4a)]:
+  - @graphiql/react@0.20.1
+
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`f6afd22d`](https://github.com/graphql/graphiql/commit/f6afd22d3f5a20089759042f16fd865646a32038)]:
+  - @graphiql/react@0.20.0
+
 ## 0.3.5
 
 ### Patch Changes

packages/graphiql-plugin-code-exporter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-code-exporter",
-  "version": "0.3.5",
+  "version": "1.0.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",
@@ -33,13 +33,13 @@
     "graphiql-code-exporter": "^3.0.3"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.19.4",
+    "@graphiql/react": "^0.20.2",
     "graphql": "^15.5.0 || ^16.0.0",
     "react": "^16.8.0 || ^17 || ^18",
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.19.4",
+    "@graphiql/react": "^0.20.2",
     "@vitejs/plugin-react": "^4.0.1",
     "graphql": "^16.4.0",
     "postcss-nesting": "^10.1.7",

packages/graphiql-plugin-code-exporter/src/index.css

@@ -49,7 +49,6 @@
     }
   }
   & button.toolbar-button {
-    display: block;
     height: var(--toolbar-width) !important;
     width: var(--toolbar-width) !important;
     border-radius: var(--border-radius-4) !important;

packages/graphiql-plugin-explorer/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @graphiql/plugin-explorer
 
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`e89c432d`](https://github.com/graphql/graphiql/commit/e89c432d8d2b91f087b683360f23e0686462bc02)]:
+  - @graphiql/react@0.20.2
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`39bf31d1`](https://github.com/graphql/graphiql/commit/39bf31d15b1e7fb5f235ec9adc1ce8081536de4a)]:
+  - @graphiql/react@0.20.1
+
+## 1.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`f6afd22d`](https://github.com/graphql/graphiql/commit/f6afd22d3f5a20089759042f16fd865646a32038)]:
+  - @graphiql/react@0.20.0
+
 ## 0.3.5
 
 ### Patch Changes

packages/graphiql-plugin-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/plugin-explorer",
-  "version": "0.3.5",
+  "version": "1.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",
@@ -32,13 +32,13 @@
     "graphiql-explorer": "^0.9.0"
   },
   "peerDependencies": {
-    "@graphiql/react": "^0.19.4",
+    "@graphiql/react": "^0.20.2",
     "graphql": "^15.5.0 || ^16.0.0",
     "react": "^16.8.0 || ^17 || ^18",
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
-    "@graphiql/react": "^0.19.4",
+    "@graphiql/react": "^0.20.2",
     "@vitejs/plugin-react": "^4.0.1",
     "graphql": "^16.4.0",
     "react": "^18.2.0",

packages/graphiql-react/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @graphiql/react
 
+## 0.20.2
+
+### Patch Changes
+
+- [#3447](https://github.com/graphql/graphiql/pull/3447) [`e89c432d`](https://github.com/graphql/graphiql/commit/e89c432d8d2b91f087b683360f23e0686462bc02) Thanks [@acao](https://github.com/acao)! - Remove initialState for new hooks, add `additionalComponent` to toolbar to allow buttons to use context
+
+## 0.20.1
+
+### Patch Changes
+
+- [#3445](https://github.com/graphql/graphiql/pull/3445) [`39bf31d1`](https://github.com/graphql/graphiql/commit/39bf31d15b1e7fb5f235ec9adc1ce8081536de4a) Thanks [@acao](https://github.com/acao)! - Export new hooks
+
+## 0.20.0
+
+### Minor Changes
+
+- [#3443](https://github.com/graphql/graphiql/pull/3443) [`f6afd22d`](https://github.com/graphql/graphiql/commit/f6afd22d3f5a20089759042f16fd865646a32038) Thanks [@acao](https://github.com/acao)! - Add useHeadersEditorState and generic useEditorState hooks
+
 ## 0.19.4
 
 ### Patch Changes

packages/graphiql-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphiql/react",
-  "version": "0.19.4",
+  "version": "0.20.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/graphql/graphiql",

packages/graphiql-react/src/editor/context.tsx

@@ -348,7 +348,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
   const lastShouldPersistHeadersProp = useRef<boolean | undefined>();
   useEffect(() => {
     const propValue = Boolean(props.shouldPersistHeaders);
-    if (lastShouldPersistHeadersProp.current !== propValue) {
+    if (lastShouldPersistHeadersProp?.current !== propValue) {
       setShouldPersistHeaders(propValue);
       lastShouldPersistHeadersProp.current = propValue;
     }
@@ -556,7 +556,7 @@ export const useEditorContext = createContextHook(EditorContext);
 
 const PERSIST_HEADERS_STORAGE_KEY = 'shouldPersistHeaders';
 
-const DEFAULT_QUERY = `# Welcome to GraphiQL
+export const DEFAULT_QUERY = `# Welcome to GraphiQL
 #
 # GraphiQL is an in-browser tool for writing, validating, and
 # testing GraphQL queries.

packages/graphiql-react/src/editor/hooks.ts

@@ -333,46 +333,58 @@ export function useAutoCompleteLeafs({
   }, [getDefaultFieldNames, queryEditor, schema]);
 }
 
+export type InitialState = string | (() => string);
+
 // https://react.dev/learn/you-might-not-need-an-effect
 
-/**
- * useState-like hook for current tab operations editor state
- */
-export function useOperationsEditorState(): [
-  opString: string,
-  handleEditOperations: (content: string) => void,
-] {
-  const { queryEditor } = useEditorContext({
+export const useEditorState = (editor: 'query' | 'variable' | 'header') => {
+  const context = useEditorContext({
     nonNull: true,
   });
-  const opString = queryEditor?.getValue() ?? '';
-  const handleEditOperations = useCallback(
-    (value: string) => queryEditor?.setValue(value),
-    [queryEditor],
+
+  const editorInstance = context[`${editor}Editor` as const];
+  let valueString = '';
+  const editorValue = editorInstance?.getValue() ?? false;
+  if (editorValue && editorValue.length > 0) {
+    valueString = editorValue;
+  }
+
+  const handleEditorValue = useCallback(
+    (value: string) => editorInstance?.setValue(value),
+    [editorInstance],
   );
-  return useMemo(
-    () => [opString, handleEditOperations],
-    [opString, handleEditOperations],
+  return useMemo<[string, (val: string) => void]>(
+    () => [valueString, handleEditorValue],
+    [valueString, handleEditorValue],
   );
-}
+};
 
 /**
- * useState-like hook for variables tab operations editor state
+ * useState-like hook for current tab operations editor state
  */
-export function useVariablesEditorState(): [
-  varsString: string,
-  handleEditVariables: (content: string) => void,
-] {
-  const { variableEditor } = useEditorContext({
-    nonNull: true,
-  });
-  const varsString = variableEditor?.getValue() ?? '';
-  const handleEditVariables = useCallback(
-    (value: string) => variableEditor?.setValue(value),
-    [variableEditor],
-  );
-  return useMemo(
-    () => [varsString, handleEditVariables],
-    [varsString, handleEditVariables],
-  );
-}
+export const useOperationsEditorState = (): [
+  operations: string,
+  setOperations: (content: string) => void,
+] => {
+  return useEditorState('query');
+};
+
+/**
+ * useState-like hook for current tab variables editor state
+ */
+export const useVariablesEditorState = (): [
+  variables: string,
+  setVariables: (content: string) => void,
+] => {
+  return useEditorState('variable');
+};
+
+/**
+ * useState-like hook for current tab variables editor state
+ */
+export const useHeadersEditorState = (): [
+  headers: string,
+  setHeaders: (content: string) => void,
+] => {
+  return useEditorState('header');
+};

packages/graphiql-react/src/editor/index.ts

@@ -16,8 +16,10 @@ export {
   useCopyQuery,
   useMergeQuery,
   usePrettifyEditors,
+  useEditorState,
   useOperationsEditorState,
   useVariablesEditorState,
+  useHeadersEditorState,
 } from './hooks';
 export { useQueryEditor } from './query-editor';
 export { useResponseEditor } from './response-editor';

packages/graphiql-react/src/index.ts

@@ -16,8 +16,10 @@ export {
   useQueryEditor,
   useResponseEditor,
   useVariableEditor,
+  useEditorState,
   useOperationsEditorState,
   useVariablesEditorState,
+  useHeadersEditorState,
   VariableEditor,
 } from './editor';
 export {