Skip to content

Commit 4d3eeaa

Browse files
acaoacao
authored
fix: disable schema documentation by default, props docs (#2097)
1 parent 3e3783e commit 4d3eeaa

File tree

3 files changed

+143
-35
lines changed

3 files changed

+143
-35
lines changed

Diff for: ‎.changeset/rude-chicken-count.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'graphiql': patch
3+
---
4+
5+
Disable introspection of schema.description by default

Diff for: ‎packages/graphiql/README.md

+1-31
Original file line numberDiff line numberDiff line change
@@ -187,37 +187,7 @@ GraphiQL supports customization in UI and behavior by accepting React props and
187187

188188
`fetcher` is the only required prop for `<GraphiQL />`.
189189

190-
For more details on props, see the [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops)
191-
192-
| Prop | Type | Description |
193-
| -------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
194-
| `fetcher` | [`Fetcher function`](https://graphiql-test.netlify.app/typedoc/modules/graphiql-toolkit.html#fetcher) | **Required.** a function which accepts GraphQL-HTTP parameters and returns a Promise, Observable or AsyncIterable which resolves to the GraphQL parsed JSON response. | |
195-
| `schema` | [`GraphQLSchema`](https://graphql.org/graphql-js/type/#graphqlschema) | a GraphQLSchema instance or `null` if one is not to be used. If `undefined` is provided, GraphiQL will send an introspection query using the fetcher to produce a schema. |
196-
| `query` | `string` (GraphQL) | initial displayed query, if `undefined` is provided, the stored query or `defaultQuery` will be used. You can also set this value at runtime to override the current operation editor state. |
197-
| `validationRules` | `ValidationRule[]` | A array of validation rules that will be used for validating the GraphQL operations. If `undefined` is provided, the default rules (exported as `specifiedRules` from `graphql`) will be used. |
198-
| `variables` | `string` (JSON) | initial displayed query variables, if `undefined` is provided, the stored variables will be used. |
199-
| `headers` | `string` | initial displayed request headers. if not defined, it will default to the stored headers if `shouldPersistHeaders` is enabled. |
200-
| `externalFragments` | `string \| FragmentDefinitionNode[]` | provide fragments external to the operation for completion, validation, and for selective use when executing operations. |
201-
| `operationName` | `string` | an optional name of which GraphQL operation should be executed. |
202-
| `response` | `string` (JSON) | an optional JSON string to use as the initial displayed response. If not provided, no response will be initially shown. You might provide this if illustrating the result of the initial query. |
203-
| `storage` | [`Storage`](https://graphiql-test.netlify.app/typedoc/interfaces/graphiql.storage.html) | **Default:** `window.localStorage`. an interface that matches `window.localStorage` signature that GraphiQL will use to persist state. |
204-
| `defaultQuery` | `string` | **Default:** graphiql help text. Provides default query if no user state is present. | default graphiql help text |
205-
| `defaultVariableEditorOpen` | `boolean` | sets whether or not to show the variables pane on startup. overridden by user state (**deprecated** in favor of `defaultSecondaryEditorOpen`) |
206-
| `defaultSecondaryEditorOpen` | `boolean` | sets whether or not to show the variables/headers pane on startup. If not defined, it will be based off whether or not variables and/or headers are present. |
207-
| `getDefaultFieldNames` | `Function` | **Default:** `defaultGetDefaultFieldNames`. provides default field values for incomplete queries | `defaultGetDefaultFieldNames` |
208-
| `editorTheme` | `string` | **Default:** `graphiql`. names a CodeMirror theme to be applied to the `QueryEditor`, `ResultViewer`, and `Variables` panes. See below for full usage. |
209-
| `readOnly` | `boolean` | when `true` will make the `QueryEditor` and `Variables` panes readOnly. |
210-
| `dangerouslyAssumeSchemaIsValid` | `boolean` | **Default:** `false`. When true, don't check that the loaded schema is valid; this can make the app vulnerable to XSS attacks and is not recommended. |
211-
| `docExplorerOpen` | `boolean` | when `true` will ensure the `DocExplorer` is open by default when the user first renders the component. Overridden by user's toggle state |
212-
| `headerEditorEnabled` | `boolean` | **Default:** `true`. enables the header editor when `true`. |
213-
| `shouldPersistHeaders` | `boolean` | **Default:** `false`. o persist headers to storage when `true` |
214-
| `toolbar.additionalContent` | `React.Component[]` | pass additional toolbar react components inside a fragment | `null` |
215-
| `onEditQuery` | `Function` | called when the Query editor changes. The argument to the function will be the query string. |
216-
| `onEditVariables` | `Function` | called when the Query variable editor changes. The argument to the function will be the variables string. |
217-
| `onEditHeaders` | `Function` | called when the request headers editor changes. The argument to the function will be the headers string. |
218-
| `onEditOperationName` | `Function` | called when the operation name to be executed changes. |
219-
| `onToggleDocs` | `Function` | called when the docs will be toggled. The argument to the function will be a boolean whether the docs are now open or closed. |
220-
| `maxHistoryLength` | `number` | **Default:** 20. allows you to increase the number of queries in the history component | 20 |
190+
For props documentation, see the [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops)
221191

222192
### Children (this pattern will be dropped in 2.0.0)
223193

Diff for: ‎packages/graphiql/src/components/GraphiQL.tsx

+137-4
Original file line numberDiff line numberDiff line change
@@ -108,48 +108,181 @@ export type GenericError =
108108
| GraphQLError
109109
| readonly GraphQLError[];
110110

111+
/**
112+
* API docs for this live here:
113+
*
114+
* https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops
115+
*/
111116
export type GraphiQLProps = {
117+
/**
118+
* Required. A function which accepts GraphQL-HTTP parameters and returns a Promise, Observable or AsyncIterable
119+
* which resolves to the GraphQL parsed JSON response.
120+
*
121+
* We suggest using `@graphiql/toolkit` `createGraphiQLFetcher()` to cover most implementations,
122+
* including custom headers, websockets and even incremental delivery for @defer and @stream.
123+
*
124+
* [`GraphiQL Create Fetcher documentation`](https://graphiql-test.netlify.app/typedoc/modules/graphiql-toolkit.html#fetcher)
125+
* **Required.**
126+
*/
112127
fetcher: Fetcher;
128+
/**
129+
* Optionally provide the `GraphQLSchema`. If present, GraphiQL skips schema introspection.
130+
*/
113131
schema?: GraphQLSchema | null;
132+
/**
133+
* An array of graphql ValidationRules
134+
*/
114135
validationRules?: ValidationRule[];
136+
/**
137+
* Optionally provide the query in a controlled-component manner. This will override the user state.
138+
*
139+
* If you just want to provide a different initial query, use `defaultQuery`
140+
*/
115141
query?: string;
142+
/**
143+
* Same as above. provide a json string that controls the present variables editor state.
144+
*/
116145
variables?: string;
146+
/**
147+
* provide a json string that controls the headers editor state
148+
*/
117149
headers?: string;
150+
/**
151+
* The operationName to use when executing the current opeartion.
152+
* Overrides the dropdown when multiple operations are present.
153+
*/
118154
operationName?: string;
155+
/**
156+
* privide a json string that controls the results editor state
157+
*/
119158
response?: string;
159+
/**
160+
* Provide a custom storage API, as an alternative to localStorage.
161+
* [`Storage`](https://graphiql-test.netlify.app/typedoc/interfaces/graphiql.storage.html
162+
* default: StorageAPI
163+
*/
120164
storage?: Storage;
165+
/**
166+
* The defaultQuery present when the editor is first loaded
167+
* and the user has no local query editing state
168+
* @default "A really long graphql # comment that welcomes you to GraphiQL"
169+
*/
121170
defaultQuery?: string;
171+
/**
172+
* Should the variables editor be open by default?
173+
* default: true
174+
*/
122175
defaultVariableEditorOpen?: boolean;
176+
/**
177+
* Should the "secondary editor" that contains both headers or variables be open by default?
178+
* default: true
179+
*/
123180
defaultSecondaryEditorOpen?: boolean;
181+
/**
182+
* Should the headers editor even be enabled?
183+
* Note that you can still pass custom headers in the fetcher
184+
* default: true
185+
*/
124186
headerEditorEnabled?: boolean;
187+
/**
188+
* Should user header changes be persisted to localstorage?
189+
* default: false
190+
*/
125191
shouldPersistHeaders?: boolean;
192+
/**
193+
* Provide an array of fragment nodes or a string to append to queries,
194+
* and for validation and completion
195+
*/
126196
externalFragments?: string | FragmentDefinitionNode[];
197+
/**
198+
* Handler for when a user copies a query
199+
*/
127200
onCopyQuery?: (query?: string) => void;
201+
/**
202+
* Handler for when a user edits a query.
203+
*/
128204
onEditQuery?: (query?: string, documentAST?: DocumentNode) => void;
205+
/**
206+
* Handler for when a user edits variables.
207+
*/
129208
onEditVariables?: (value: string) => void;
209+
/**
210+
* Handler for when a user edits headers.
211+
*/
130212
onEditHeaders?: (value: string) => void;
213+
/**
214+
* Handler for when a user edits operation names
215+
*/
131216
onEditOperationName?: (operationName: string) => void;
217+
/**
218+
* Handler for when the user toggles the doc pane
219+
*/
132220
onToggleDocs?: (docExplorerOpen: boolean) => void;
221+
/**
222+
* A custom function to determine which field leafs are automatically
223+
* added when fill leafs command is used
224+
*/
133225
getDefaultFieldNames?: GetDefaultFieldNamesFn;
226+
/**
227+
* The codemirror editor theme you'd like to use
228+
*
229+
*/
134230
editorTheme?: string;
231+
/**
232+
* On history pane toggle event
233+
*/
135234
onToggleHistory?: (historyPaneOpen: boolean) => void;
235+
/**
236+
* Custom results tooltip component
237+
*/
136238
ResultsTooltip?: typeof Component | FunctionComponent;
137239
/**
138-
* decide whether schema responses should be validated. false by default
240+
* decide whether schema responses should be validated.
241+
*
242+
* default: false
139243
*/
140244
dangerouslyAssumeSchemaIsValid?: boolean;
141245
/**
142-
* Enable new introspectionQuery
143-
* DANGER: your server must be configured to support this new feature, or else introspecion will fail with an invalid query
246+
* Enable new introspectionQuery option `inputValueDeprecation`
247+
* DANGER: your server must be configured to support this new feature,
248+
* or else introspecion will fail with an invalid query
249+
*
250+
* default: false
144251
*/
145252
inputValueDeprecation?: boolean;
253+
/**
254+
* Enable new introspectionQuery option `schemaDescription`, which expects the `__Schema.description` field
255+
* DANGER: your server must be configured to support a `__Schema.description` field on
256+
* introspection or it will fail with an invalid query.
257+
*
258+
* default: false
259+
*/
260+
schemaDescription?: boolean;
146261
/**
147262
* OperationName to use for introspection queries
263+
*
264+
* default: false
265+
*
148266
*/
149267
introspectionQueryName?: string;
268+
/**
269+
* Set codemirror editors to readOnly state
270+
*/
150271
readOnly?: boolean;
272+
/**
273+
* Toggle the doc explorer state by default/programatically
274+
*
275+
* default: false
276+
*/
151277
docExplorerOpen?: boolean;
278+
/**
279+
* Custom toolbar configuration
280+
*/
152281
toolbar?: GraphiQLToolbarConfig;
282+
/**
283+
* Max query history to retain
284+
* default: 20
285+
*/
153286
maxHistoryLength?: number;
154287
};
155288

@@ -337,7 +470,7 @@ export class GraphiQL extends React.Component<GraphiQLProps, GraphiQLState> {
337470
}
338471

339472
this._introspectionQuery = getIntrospectionQuery({
340-
schemaDescription: true,
473+
schemaDescription: props.schemaDescription ?? undefined,
341474
inputValueDeprecation: props.inputValueDeprecation ?? undefined,
342475
});
343476

0 commit comments

Comments
 (0)