diff --git a/.changeset/nasty-cows-train.md b/.changeset/nasty-cows-train.md new file mode 100644 index 0000000000..06e2856f6c --- /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 339f84cf03..aec4c3ea31 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, @@ -181,13 +180,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 +213,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 +225,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 +232,30 @@ 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 +278,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 +286,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 +309,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 cf19b2ee3e..4a32c754d9 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 ead1907de8..ec9229c875 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} > { 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 }); @@ -13,10 +11,10 @@ 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}&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 c3dac4a570..c256c6c8b8 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 9a81c2ca4a..881b9522bf 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, }), ); diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx index db6dda3abc..d3cb33af19 100644 --- a/packages/graphiql/src/components/GraphiQL.tsx +++ b/packages/graphiql/src/components/GraphiQL.tsx @@ -99,7 +99,6 @@ export function GraphiQL({ externalFragments, fetcher, getDefaultFieldNames, - headers, inputValueDeprecation, introspectionQueryName, maxHistoryLength, @@ -109,14 +108,11 @@ export function GraphiQL({ onTogglePluginVisibility, operationName, plugins, - query, - response, schema, schemaDescription, shouldPersistHeaders, storage, validationRules, - variables, visiblePlugin, defaultHeaders, ...props @@ -148,7 +144,6 @@ export function GraphiQL({ defaultTabs={defaultTabs} externalFragments={externalFragments} fetcher={fetcher} - headers={headers} inputValueDeprecation={inputValueDeprecation} introspectionQueryName={introspectionQueryName} maxHistoryLength={maxHistoryLength} @@ -159,14 +154,11 @@ export function GraphiQL({ plugins={plugins} visiblePlugin={visiblePlugin} operationName={operationName} - query={query} - response={response} schema={schema} schemaDescription={schemaDescription} shouldPersistHeaders={shouldPersistHeaders} storage={storage} validationRules={validationRules} - variables={variables} >