From 053db6c08e160c5b5d05027e11908b6abaa82277 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Thu, 15 Aug 2024 23:22:42 +0200 Subject: [PATCH 1/3] aa --- .../graphiql-react/src/editor/context.tsx | 60 +++++++------------ packages/graphiql-react/src/editor/hooks.ts | 11 ---- packages/graphiql-react/src/provider.tsx | 8 --- packages/graphiql/src/components/GraphiQL.tsx | 8 --- 4 files changed, 20 insertions(+), 67 deletions(-) diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx index 339f84cf03b..885e2d690d6 100644 --- a/packages/graphiql-react/src/editor/context.tsx +++ b/packages/graphiql-react/src/editor/context.tsx @@ -181,13 +181,6 @@ export type EditorContextProviderProps = { * `FragmentDefinitionNode` objects. */ externalFragments?: string | FragmentDefinitionNode[]; - /** - * This prop can be used to set the contents of the headers editor. Every - * time this prop changes, the contents of the headers editor are replaced. - * Note that the editor contents can be changed in between these updates by - * typing in the editor. - */ - headers?: string; /** * This prop can be used to define the default set of tabs, with their * queries, variables, and headers. It will be used as default only if @@ -221,20 +214,6 @@ export type EditorContextProviderProps = { * @param tabState The tabs state after it has been updated. */ onTabChange?(tabState: TabsState): void; - /** - * This prop can be used to set the contents of the query editor. Every time - * this prop changes, the contents of the query editor are replaced. Note - * that the editor contents can be changed in between these updates by typing - * in the editor. - */ - query?: string; - /** - * This prop can be used to set the contents of the response editor. Every - * time this prop changes, the contents of the response editor are replaced. - * Note that the editor contents can change in between these updates by - * executing queries that will show a response. - */ - response?: string; /** * This prop toggles if the contents of the headers editor are persisted in * storage. @@ -247,14 +226,6 @@ export type EditorContextProviderProps = { * that are specified in the GraphQL spec). */ validationRules?: ValidationRule[]; - /** - * This prop can be used to set the contents of the variables editor. Every - * time this prop changes, the contents of the variables editor are replaced. - * Note that the editor contents can be changed in between these updates by - * typing in the editor. - */ - variables?: string; - /** * Headers to be set when opening a new tab */ @@ -262,6 +233,22 @@ export type EditorContextProviderProps = { }; export function EditorContextProvider(props: EditorContextProviderProps) { + // @ts-expect-error -- Prop is removed + if (props.query) { + throw new TypeError('`query` was removed. Use `queryEditor.setValue(query)` instead.'); + } + // @ts-expect-error -- Prop is removed + if (props.variables) { + throw new TypeError('`variables` was removed. Use `variableEditor.setValue(variables)` instead.'); + } + // @ts-expect-error -- Prop is removed + if (props.headers) { + throw new TypeError('`headers` was removed. Use `headerEditor.setValue(headers)` instead.'); + } + // @ts-expect-error -- Prop is removed + if (props.response) { + throw new TypeError('`response` was removed. Use `responseEditor.setValue(response)` instead.'); + } const storage = useStorageContext(); const [headerEditor, setHeaderEditor] = useState( null, @@ -284,11 +271,6 @@ export function EditorContextProvider(props: EditorContextProviderProps) { }, ); - useSynchronizeValue(headerEditor, props.headers); - useSynchronizeValue(queryEditor, props.query); - useSynchronizeValue(responseEditor, props.response); - useSynchronizeValue(variableEditor, props.variables); - const storeTabs = useStoreTabs({ storage, shouldPersistHeaders, @@ -297,11 +279,9 @@ export function EditorContextProvider(props: EditorContextProviderProps) { // We store this in state but never update it. By passing a function we only // need to compute it lazily during the initial render. const [initialState] = useState(() => { - const query = props.query ?? storage?.get(STORAGE_KEY_QUERY) ?? null; - const variables = - props.variables ?? storage?.get(STORAGE_KEY_VARIABLES) ?? null; - const headers = props.headers ?? storage?.get(STORAGE_KEY_HEADERS) ?? null; - const response = props.response ?? ''; + const query = storage?.get(STORAGE_KEY_QUERY) ?? null; + const variables = storage?.get(STORAGE_KEY_VARIABLES) ?? null; + const headers = storage?.get(STORAGE_KEY_HEADERS) ?? null; const tabState = getDefaultTabState({ query, @@ -322,7 +302,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) { '', variables: variables ?? '', headers: headers ?? props.defaultHeaders ?? '', - response, + response: '', tabState, }; }); diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts index cf19b2ee3ed..4a32c754d91 100644 --- a/packages/graphiql-react/src/editor/hooks.ts +++ b/packages/graphiql-react/src/editor/hooks.ts @@ -14,17 +14,6 @@ import { onHasCompletion } from './completion'; import { useEditorContext } from './context'; import { CodeMirrorEditor } from './types'; -export function useSynchronizeValue( - editor: CodeMirrorEditor | null, - value: string | undefined, -) { - useEffect(() => { - if (editor && typeof value === 'string' && value !== editor.getValue()) { - editor.setValue(value); - } - }, [editor, value]); -} - export function useSynchronizeOption( editor: CodeMirrorEditor | null, option: K, diff --git a/packages/graphiql-react/src/provider.tsx b/packages/graphiql-react/src/provider.tsx index ead1907de8e..ec9229c875b 100644 --- a/packages/graphiql-react/src/provider.tsx +++ b/packages/graphiql-react/src/provider.tsx @@ -29,7 +29,6 @@ export function GraphiQLProvider({ externalFragments, fetcher, getDefaultFieldNames, - headers, inputValueDeprecation, introspectionQueryName, maxHistoryLength, @@ -39,14 +38,11 @@ export function GraphiQLProvider({ onTogglePluginVisibility, operationName, plugins, - query, - response, schema, schemaDescription, shouldPersistHeaders, storage, validationRules, - variables, visiblePlugin, }: GraphiQLProviderProps) { return ( @@ -57,14 +53,10 @@ export function GraphiQLProvider({ defaultHeaders={defaultHeaders} defaultTabs={defaultTabs} externalFragments={externalFragments} - headers={headers} onEditOperationName={onEditOperationName} onTabChange={onTabChange} - query={query} - response={response} shouldPersistHeaders={shouldPersistHeaders} validationRules={validationRules} - variables={variables} > Date: Thu, 15 Aug 2024 23:41:32 +0200 Subject: [PATCH 2/3] aa --- .changeset/nasty-cows-train.md | 8 ++++++++ packages/graphiql-react/src/editor/context.tsx | 17 ++++++++++++----- packages/graphiql/cypress/e2e/headers.cy.ts | 6 ++---- packages/graphiql/cypress/e2e/tabs.cy.ts | 2 +- packages/graphiql/resources/renderExample.js | 6 ++---- 5 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 .changeset/nasty-cows-train.md diff --git a/.changeset/nasty-cows-train.md b/.changeset/nasty-cows-train.md new file mode 100644 index 00000000000..95ea2ac0e7a --- /dev/null +++ b/.changeset/nasty-cows-train.md @@ -0,0 +1,8 @@ +--- +'@graphiql/react': major +'graphiql': major +--- + +- Remove `query`, `variables`, `headers` and `response` props in ``, `` and `` + +- Remove `useSynchronizeValue` hook diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx index 885e2d690d6..aec4c3ea31d 100644 --- a/packages/graphiql-react/src/editor/context.tsx +++ b/packages/graphiql-react/src/editor/context.tsx @@ -19,7 +19,6 @@ import { import { useStorageContext } from '../storage'; import { createContextHook, createNullableContext } from '../utility/context'; import { STORAGE_KEY as STORAGE_KEY_HEADERS } from './header-editor'; -import { useSynchronizeValue } from './hooks'; import { STORAGE_KEY_QUERY } from './query-editor'; import { createTab, @@ -235,19 +234,27 @@ export type EditorContextProviderProps = { export function EditorContextProvider(props: EditorContextProviderProps) { // @ts-expect-error -- Prop is removed if (props.query) { - throw new TypeError('`query` was removed. Use `queryEditor.setValue(query)` instead.'); + throw new TypeError( + '`query` was removed. Use `queryEditor.setValue(query)` instead.', + ); } // @ts-expect-error -- Prop is removed if (props.variables) { - throw new TypeError('`variables` was removed. Use `variableEditor.setValue(variables)` instead.'); + throw new TypeError( + '`variables` was removed. Use `variableEditor.setValue(variables)` instead.', + ); } // @ts-expect-error -- Prop is removed if (props.headers) { - throw new TypeError('`headers` was removed. Use `headerEditor.setValue(headers)` instead.'); + throw new TypeError( + '`headers` was removed. Use `headerEditor.setValue(headers)` instead.', + ); } // @ts-expect-error -- Prop is removed if (props.response) { - throw new TypeError('`response` was removed. Use `responseEditor.setValue(response)` instead.'); + throw new TypeError( + '`response` was removed. Use `responseEditor.setValue(response)` instead.', + ); } const storage = useStorageContext(); const [headerEditor, setHeaderEditor] = useState( diff --git a/packages/graphiql/cypress/e2e/headers.cy.ts b/packages/graphiql/cypress/e2e/headers.cy.ts index 7e4df95b56c..da453b052d3 100644 --- a/packages/graphiql/cypress/e2e/headers.cy.ts +++ b/packages/graphiql/cypress/e2e/headers.cy.ts @@ -3,9 +3,7 @@ const DEFAULT_HEADERS = '{"foo":2}'; describe('Headers', () => { describe('`defaultHeaders`', () => { it('should have default headers while open new tabs', () => { - cy.visit( - `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&defaultQuery=`, - ); + cy.visit(`/?query={test}&defaultHeaders=${DEFAULT_HEADERS}`); cy.assertHasValues({ query: '{test}', headersString: DEFAULT_HEADERS }); cy.get('.graphiql-tab-add').click(); cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS }); @@ -16,7 +14,7 @@ describe('Headers', () => { it('in case `headers` and `defaultHeaders` are set, `headers` should be on 1st tab and `defaultHeaders` for other opened tabs', () => { const HEADERS = '{"bar":true}'; cy.visit( - `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}&defaultQuery=`, + `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}`, ); cy.assertHasValues({ query: '{test}', headersString: HEADERS }); cy.get('.graphiql-tab-add').click(); diff --git a/packages/graphiql/cypress/e2e/tabs.cy.ts b/packages/graphiql/cypress/e2e/tabs.cy.ts index c3dac4a5705..c256c6c8b84 100644 --- a/packages/graphiql/cypress/e2e/tabs.cy.ts +++ b/packages/graphiql/cypress/e2e/tabs.cy.ts @@ -1,6 +1,6 @@ describe('Tabs', () => { it('Should store editor contents when switching between tabs', () => { - cy.visit('/?defaultQuery=&query='); + cy.visit('/?query='); // Assert that tab visible when there's only one session cy.get('.graphiql-tab-button').eq(0).should('exist'); diff --git a/packages/graphiql/resources/renderExample.js b/packages/graphiql/resources/renderExample.js index 9a81c2ca4a9..881b9522bf3 100644 --- a/packages/graphiql/resources/renderExample.js +++ b/packages/graphiql/resources/renderExample.js @@ -84,9 +84,8 @@ root.render( url: getSchemaUrl(), subscriptionUrl: 'ws://localhost:8081/subscriptions', }), - query: parameters.query, - variables: parameters.variables, - headers: parameters.headers, + defaultQuery: parameters.query, + // variables: parameters.variables, defaultHeaders: parameters.defaultHeaders, onEditQuery, onEditVariables, @@ -101,7 +100,6 @@ root.render( parameters.onPrettifyQuery === 'true' ? onPrettifyQuery : undefined, onTabChange, forcedTheme: parameters.forcedTheme, - defaultQuery: parameters.defaultQuery, defaultTheme: parameters.defaultTheme, }), ); From d2daab6e9a0118ee4799a755096cae2b8bfba00e Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Fri, 16 Aug 2024 19:39:46 +0200 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Ted Thibodeau Jr --- .changeset/nasty-cows-train.md | 2 +- packages/graphiql/cypress/e2e/headers.cy.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/nasty-cows-train.md b/.changeset/nasty-cows-train.md index 95ea2ac0e7a..06e2856f6c7 100644 --- a/.changeset/nasty-cows-train.md +++ b/.changeset/nasty-cows-train.md @@ -3,6 +3,6 @@ 'graphiql': major --- -- Remove `query`, `variables`, `headers` and `response` props in ``, `` and `` +- Remove `query`, `variables`, `headers`, and `response` props in ``, ``, and `` - Remove `useSynchronizeValue` hook diff --git a/packages/graphiql/cypress/e2e/headers.cy.ts b/packages/graphiql/cypress/e2e/headers.cy.ts index da453b052d3..e58b94c651d 100644 --- a/packages/graphiql/cypress/e2e/headers.cy.ts +++ b/packages/graphiql/cypress/e2e/headers.cy.ts @@ -11,7 +11,7 @@ describe('Headers', () => { cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS }); }); - it('in case `headers` and `defaultHeaders` are set, `headers` should be on 1st tab and `defaultHeaders` for other opened tabs', () => { + it('if `headers` and `defaultHeaders` are set, `headers` should be on 1st tab and `defaultHeaders` for other opened tabs', () => { const HEADERS = '{"bar":true}'; cy.visit( `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}`,