Skip to content

Commit

Permalink
fix: disable schema documentation by default, props docs (#2097)
Browse files Browse the repository at this point in the history
  • Loading branch information
@acao
acao authored Dec 7, 2021
1 parent 3e3783e commit 4d3eeaa
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 35 deletions.
5 changes: 5 additions & 0 deletions .changeset/rude-chicken-count.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'graphiql': patch
---

Disable introspection of schema.description by default
32 changes: 1 addition & 31 deletions packages/graphiql/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,37 +187,7 @@ GraphiQL supports customization in UI and behavior by accepting React props and

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

For more details on props, see the [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops)

| Prop | Type | Description |
| -------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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. | |
| `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. |
| `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. |
| `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. |
| `variables` | `string` (JSON) | initial displayed query variables, if `undefined` is provided, the stored variables will be used. |
| `headers` | `string` | initial displayed request headers. if not defined, it will default to the stored headers if `shouldPersistHeaders` is enabled. |
| `externalFragments` | `string \| FragmentDefinitionNode[]` | provide fragments external to the operation for completion, validation, and for selective use when executing operations. |
| `operationName` | `string` | an optional name of which GraphQL operation should be executed. |
| `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. |
| `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. |
| `defaultQuery` | `string` | **Default:** graphiql help text. Provides default query if no user state is present. | default graphiql help text |
| `defaultVariableEditorOpen` | `boolean` | sets whether or not to show the variables pane on startup. overridden by user state (**deprecated** in favor of `defaultSecondaryEditorOpen`) |
| `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. |
| `getDefaultFieldNames` | `Function` | **Default:** `defaultGetDefaultFieldNames`. provides default field values for incomplete queries | `defaultGetDefaultFieldNames` |
| `editorTheme` | `string` | **Default:** `graphiql`. names a CodeMirror theme to be applied to the `QueryEditor`, `ResultViewer`, and `Variables` panes. See below for full usage. |
| `readOnly` | `boolean` | when `true` will make the `QueryEditor` and `Variables` panes readOnly. |
| `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. |
| `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 |
| `headerEditorEnabled` | `boolean` | **Default:** `true`. enables the header editor when `true`. |
| `shouldPersistHeaders` | `boolean` | **Default:** `false`. o persist headers to storage when `true` |
| `toolbar.additionalContent` | `React.Component[]` | pass additional toolbar react components inside a fragment | `null` |
| `onEditQuery` | `Function` | called when the Query editor changes. The argument to the function will be the query string. |
| `onEditVariables` | `Function` | called when the Query variable editor changes. The argument to the function will be the variables string. |
| `onEditHeaders` | `Function` | called when the request headers editor changes. The argument to the function will be the headers string. |
| `onEditOperationName` | `Function` | called when the operation name to be executed changes. |
| `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. |
| `maxHistoryLength` | `number` | **Default:** 20. allows you to increase the number of queries in the history component | 20 |
For props documentation, see the [API Docs](https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops)

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

Expand Down
141 changes: 137 additions & 4 deletions packages/graphiql/src/components/GraphiQL.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,48 +108,181 @@ export type GenericError =
| GraphQLError
| readonly GraphQLError[];

/**
* API docs for this live here:
*
* https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops
*/
export type GraphiQLProps = {
/**
* Required. A function which accepts GraphQL-HTTP parameters and returns a Promise, Observable or AsyncIterable
* which resolves to the GraphQL parsed JSON response.
*
* We suggest using `@graphiql/toolkit` `createGraphiQLFetcher()` to cover most implementations,
* including custom headers, websockets and even incremental delivery for @defer and @stream.
*
* [`GraphiQL Create Fetcher documentation`](https://graphiql-test.netlify.app/typedoc/modules/graphiql-toolkit.html#fetcher)
* **Required.**
*/
fetcher: Fetcher;
/**
* Optionally provide the `GraphQLSchema`. If present, GraphiQL skips schema introspection.
*/
schema?: GraphQLSchema | null;
/**
* An array of graphql ValidationRules
*/
validationRules?: ValidationRule[];
/**
* Optionally provide the query in a controlled-component manner. This will override the user state.
*
* If you just want to provide a different initial query, use `defaultQuery`
*/
query?: string;
/**
* Same as above. provide a json string that controls the present variables editor state.
*/
variables?: string;
/**
* provide a json string that controls the headers editor state
*/
headers?: string;
/**
* The operationName to use when executing the current opeartion.
* Overrides the dropdown when multiple operations are present.
*/
operationName?: string;
/**
* privide a json string that controls the results editor state
*/
response?: string;
/**
* Provide a custom storage API, as an alternative to localStorage.
* [`Storage`](https://graphiql-test.netlify.app/typedoc/interfaces/graphiql.storage.html
* default: StorageAPI
*/
storage?: Storage;
/**
* The defaultQuery present when the editor is first loaded
* and the user has no local query editing state
* @default "A really long graphql # comment that welcomes you to GraphiQL"
*/
defaultQuery?: string;
/**
* Should the variables editor be open by default?
* default: true
*/
defaultVariableEditorOpen?: boolean;
/**
* Should the "secondary editor" that contains both headers or variables be open by default?
* default: true
*/
defaultSecondaryEditorOpen?: boolean;
/**
* Should the headers editor even be enabled?
* Note that you can still pass custom headers in the fetcher
* default: true
*/
headerEditorEnabled?: boolean;
/**
* Should user header changes be persisted to localstorage?
* default: false
*/
shouldPersistHeaders?: boolean;
/**
* Provide an array of fragment nodes or a string to append to queries,
* and for validation and completion
*/
externalFragments?: string | FragmentDefinitionNode[];
/**
* Handler for when a user copies a query
*/
onCopyQuery?: (query?: string) => void;
/**
* Handler for when a user edits a query.
*/
onEditQuery?: (query?: string, documentAST?: DocumentNode) => void;
/**
* Handler for when a user edits variables.
*/
onEditVariables?: (value: string) => void;
/**
* Handler for when a user edits headers.
*/
onEditHeaders?: (value: string) => void;
/**
* Handler for when a user edits operation names
*/
onEditOperationName?: (operationName: string) => void;
/**
* Handler for when the user toggles the doc pane
*/
onToggleDocs?: (docExplorerOpen: boolean) => void;
/**
* A custom function to determine which field leafs are automatically
* added when fill leafs command is used
*/
getDefaultFieldNames?: GetDefaultFieldNamesFn;
/**
* The codemirror editor theme you'd like to use
*
*/
editorTheme?: string;
/**
* On history pane toggle event
*/
onToggleHistory?: (historyPaneOpen: boolean) => void;
/**
* Custom results tooltip component
*/
ResultsTooltip?: typeof Component | FunctionComponent;
/**
* decide whether schema responses should be validated. false by default
* decide whether schema responses should be validated.
*
* default: false
*/
dangerouslyAssumeSchemaIsValid?: boolean;
/**
* Enable new introspectionQuery
* DANGER: your server must be configured to support this new feature, or else introspecion will fail with an invalid query
* Enable new introspectionQuery option `inputValueDeprecation`
* DANGER: your server must be configured to support this new feature,
* or else introspecion will fail with an invalid query
*
* default: false
*/
inputValueDeprecation?: boolean;
/**
* Enable new introspectionQuery option `schemaDescription`, which expects the `__Schema.description` field
* DANGER: your server must be configured to support a `__Schema.description` field on
* introspection or it will fail with an invalid query.
*
* default: false
*/
schemaDescription?: boolean;
/**
* OperationName to use for introspection queries
*
* default: false
*
*/
introspectionQueryName?: string;
/**
* Set codemirror editors to readOnly state
*/
readOnly?: boolean;
/**
* Toggle the doc explorer state by default/programatically
*
* default: false
*/
docExplorerOpen?: boolean;
/**
* Custom toolbar configuration
*/
toolbar?: GraphiQLToolbarConfig;
/**
* Max query history to retain
* default: 20
*/
maxHistoryLength?: number;
};

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

this._introspectionQuery = getIntrospectionQuery({
schemaDescription: true,
schemaDescription: props.schemaDescription ?? undefined,
inputValueDeprecation: props.inputValueDeprecation ?? undefined,
});

Expand Down

2 comments on commit 4d3eeaa

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://monaco-graphql.netlify.app as production
🚀 Deployed on https://61af405a0d9008e611e8335f--monaco-graphql.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://graphiql-test.netlify.app as production
🚀 Deployed on https://61af406928fe3eb39cc3a667--graphiql-test.netlify.app

Please sign in to comment.