@@ -32,17 +32,7 @@ const getOperationWithFragments = (
32
32
} ;
33
33
} ;
34
34
35
- export type YogaGraphiQLProps = Omit <
36
- GraphiQLProps ,
37
- | 'fetcher'
38
- | 'isHeadersEditorEnabled'
39
- | 'defaultEditorToolsVisibility'
40
- | 'onToggleDocs'
41
- | 'toolbar'
42
- | 'onSchemaChange'
43
- | 'query'
44
- | 'onEditQuery'
45
- > &
35
+ export type YogaGraphiQLProps = Partial < GraphiQLProps > &
46
36
Partial < Omit < LoadFromUrlOptions , 'headers' > > & {
47
37
title ?: string ;
48
38
/**
@@ -98,6 +88,15 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
98
88
const urlLoader = useMemo ( ( ) => new UrlLoader ( ) , [ ] ) ;
99
89
100
90
const fetcher = useMemo ( ( ) => {
91
+ if ( props . fetcher ) {
92
+ if ( props . endpoint ) {
93
+ // eslint-disable-next-line no-console
94
+ console . warn (
95
+ 'You are using a custom fetcher and an endpoint. The endpoint will be ignored.' ,
96
+ ) ;
97
+ }
98
+ return props . fetcher ;
99
+ }
101
100
const executor = urlLoader . getExecutorAsync ( endpoint , {
102
101
subscriptionsProtocol : SubscriptionProtocol . GRAPHQL_SSE ,
103
102
subscriptionsEndpoint : endpoint , // necessary because graphql-sse in graphql-tools url-loader defaults to endpoint+'/stream'
@@ -123,7 +122,7 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
123
122
} ,
124
123
} ) ;
125
124
} ;
126
- } , [ urlLoader , endpoint ] ) as Fetcher ;
125
+ } , [ urlLoader , endpoint , props . fetcher ] ) as Fetcher ;
127
126
128
127
const [ params , setParams ] = useUrlSearchParams (
129
128
{
@@ -138,25 +137,34 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
138
137
showAttribution : true ,
139
138
} ) ;
140
139
140
+ if ( props . query && ! props . onEditQuery ) {
141
+ // eslint-disable-next-line no-console
142
+ console . warn (
143
+ 'If you provide `query` prop, you should also provide `onEditQuery` prop to handle query changes.' ,
144
+ ) ;
145
+ }
146
+
141
147
return (
142
148
< div className = "graphiql-container" >
143
149
< GraphiQLProvider
144
- defaultHeaders = { props . defaultHeaders }
145
- fetcher = { fetcher }
146
- headers = { props . headers }
150
+ // default values that can be override by props
151
+ shouldPersistHeaders
147
152
plugins = { [ explorer ] }
148
- query = { query }
149
153
schemaDescription = { true }
150
- shouldPersistHeaders = { props . shouldPersistHeaders ?? true }
154
+ query = { query }
155
+ { ...props }
156
+ fetcher = { fetcher }
151
157
>
152
158
< GraphiQLInterface
153
159
isHeadersEditorEnabled
154
160
defaultEditorToolsVisibility
155
- onEditQuery = { query => {
161
+ { ...props }
162
+ onEditQuery = { ( query , ast ) => {
156
163
setParams ( {
157
164
query,
158
165
} ) ;
159
166
setQuery ( query ) ;
167
+ props . onEditQuery ?.( query , ast ) ;
160
168
} }
161
169
>
162
170
< GraphiQL . Logo >
0 commit comments