11/* eslint sort-keys: "error" */
2- import type {
3- ComponentPropsWithoutRef ,
4- FC ,
5- ReactElement ,
6- ReactNode ,
7- RefObject ,
8- } from 'react' ;
2+ import type { ComponentPropsWithoutRef , FC , ReactNode , RefObject } from 'react' ;
93import { createContext , useContext , useRef , useEffect } from 'react' ;
104import { create , useStore , UseBoundStore , StoreApi } from 'zustand' ;
115import { useShallow } from 'zustand/shallow' ;
@@ -22,7 +16,7 @@ import {
2216import { StorageStore , useStorage } from '../stores/storage' ;
2317import { ThemeStore } from '../stores/theme' ;
2418import type { SlicesWithActions } from '../types' ;
25- import { pick , useDidUpdate , useSynchronizeValue } from '../utility' ;
19+ import { useDidUpdate } from '../utility' ;
2620import {
2721 FragmentDefinitionNode ,
2822 parse ,
@@ -69,8 +63,56 @@ export const GraphiQLProvider: FC<GraphiQLProviderProps> = ({
6963 }
7064 // @ts -expect-error -- runtime check
7165 if ( props . validationRules ) {
72- throw new Error (
73- '`validationRules` prop is removed. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.' ,
66+ throw new TypeError (
67+ 'The `validationRules` prop has been removed. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.' ,
68+ ) ;
69+ }
70+ // @ts -expect-error -- runtime check
71+ if ( props . query ) {
72+ throw new TypeError (
73+ 'The `query` prop has been removed. Use `initialQuery` prop instead, or set value programmatically using:\n' +
74+ `
75+ const queryEditor = useGraphiQL(state => state.queryEditor)
76+
77+ useEffect(() => {
78+ queryEditor.setValue(query)
79+ }, [query])` ,
80+ ) ;
81+ }
82+ // @ts -expect-error -- runtime check
83+ if ( props . variables ) {
84+ throw new TypeError (
85+ 'The `variables` prop has been removed. Use `initialVariables` prop instead, or set value programmatically using:\n' +
86+ `
87+ const variableEditor = useGraphiQL(state => state.variableEditor)
88+
89+ useEffect(() => {
90+ variableEditor.setValue(variables)
91+ }, [variables])` ,
92+ ) ;
93+ }
94+ // @ts -expect-error -- runtime check
95+ if ( props . headers ) {
96+ throw new TypeError (
97+ 'The `headers` prop has been removed. Use `initialHeaders` prop instead, or set value programmatically using:\n' +
98+ `
99+ const headerEditor = useGraphiQL(state => state.headerEditor)
100+
101+ useEffect(() => {
102+ headerEditor.setValue(headers)
103+ }, [headers])` ,
104+ ) ;
105+ }
106+ // @ts -expect-error -- runtime check
107+ if ( props . response ) {
108+ throw new TypeError (
109+ 'The `response` prop has been removed. Set value programmatically using:\n' +
110+ `
111+ const responseEditor = useGraphiQL(state => state.responseEditor)
112+
113+ useEffect(() => {
114+ responseEditor.setValue(response)
115+ }, [response])` ,
74116 ) ;
75117 }
76118 return (
@@ -82,14 +124,9 @@ export const GraphiQLProvider: FC<GraphiQLProviderProps> = ({
82124 ) ;
83125} ;
84126
85- interface SynchronizeValueProps
86- extends Pick < EditorProps , 'headers' | 'query' | 'response' | 'variables' > {
87- children : ReactNode ;
88- }
89-
90127const InnerGraphiQLProvider : FC < InnerGraphiQLProviderProps > = ( {
91128 defaultHeaders,
92- defaultQuery,
129+ defaultQuery = DEFAULT_QUERY ,
93130 defaultTabs,
94131 externalFragments,
95132 onEditOperationName,
@@ -114,6 +151,7 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
114151 referencePlugin,
115152 visiblePlugin,
116153 children,
154+
117155 ...props
118156} ) => {
119157 const storage = useStorage ( ) ;
@@ -137,15 +175,14 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
137175
138176 function getInitialState ( ) {
139177 // We only need to compute it lazily during the initial render.
140- const query = props . query ?? storage . get ( STORAGE_KEY . query ) ?? null ;
178+ const query = props . initialQuery ?? storage . get ( STORAGE_KEY . query ) ;
141179 const variables =
142- props . variables ?? storage . get ( STORAGE_KEY . variables ) ?? null ;
143- const headers = props . headers ?? storage . get ( STORAGE_KEY . headers ) ?? null ;
144- const response = props . response ?? '' ;
180+ props . initialVariables ?? storage . get ( STORAGE_KEY . variables ) ;
181+ const headers = props . initialHeaders ?? storage . get ( STORAGE_KEY . headers ) ;
145182
146183 const { tabs, activeTabIndex } = getDefaultTabState ( {
147184 defaultHeaders,
148- defaultQuery : defaultQuery ?? DEFAULT_QUERY ,
185+ defaultQuery,
149186 defaultTabs,
150187 headers,
151188 query,
@@ -169,7 +206,6 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
169206 initialHeaders : headers ?? defaultHeaders ?? '' ,
170207 initialQuery :
171208 query ?? ( activeTabIndex === 0 ? tabs [ 0 ] ! . query : null ) ?? '' ,
172- initialResponse : response ,
173209 initialVariables : variables ?? '' ,
174210 onCopyQuery,
175211 onEditOperationName,
@@ -289,34 +325,15 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
289325
290326 return (
291327 < GraphiQLContext . Provider value = { storeRef } >
292- < SynchronizeValue { ... props } > { children } </ SynchronizeValue >
328+ { children }
293329 </ GraphiQLContext . Provider >
294330 ) ;
295331} ;
296332
297- const SynchronizeValue : FC < SynchronizeValueProps > = ( {
298- children,
299- headers,
300- query,
301- response,
302- variables,
303- } ) => {
304- const { headerEditor, queryEditor, responseEditor, variableEditor } =
305- useGraphiQL (
306- pick ( 'headerEditor' , 'queryEditor' , 'responseEditor' , 'variableEditor' ) ,
307- ) ;
308-
309- useSynchronizeValue ( headerEditor , headers ) ;
310- useSynchronizeValue ( queryEditor , query ) ;
311- useSynchronizeValue ( responseEditor , response ) ;
312- useSynchronizeValue ( variableEditor , variables ) ;
313- return children as ReactElement ;
314- } ;
315-
316333export function useGraphiQL < T > ( selector : ( state : SlicesWithActions ) => T ) : T {
317334 const store = useContext ( GraphiQLContext ) ;
318335 if ( ! store ) {
319- throw new Error ( 'Missing `GraphiQLContext.Provider` in the tree' ) ;
336+ throw new Error ( 'Missing `GraphiQLContext.Provider` in the tree. ' ) ;
320337 }
321338 return useStore ( store . current , useShallow ( selector ) ) ;
322339}
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments