GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
MIT License
Bot releases are visible (Hide)
Published by acao about 2 years ago
bfa90f24
, 8ab5fcd0
]:
Published by acao about 2 years ago
#2745 92a17490
Thanks @acao! - Specify MIT license for @graphiql/plugin-explorer
package.json
#2731 3e8f0d1f
Thanks @hasparus! - Expose typings for graphiql-explorer
#2738 33bef178
Thanks @thomasheyenbrock! - Fix peer dependency versions
#2747 52d0003f
Thanks @thomasheyenbrock! - Make @graphiql/react
a real dependency instead of a peer dependency
Updated dependencies [98e14155
, 7dfea94a
, 3aa1f39f
, 0219eef3
]:
Published by acao about 2 years ago
48872a87
Thanks @thomasheyenbrock! - Handle execution when there is no document AST (because the query editor is empty or the query string contains syntax errors)Published by acao about 2 years ago
#2745 92a17490
Thanks @acao! - Specify MIT license for @graphiql/plugin-explorer
package.json
#2741 0219eef3
Thanks @thomasheyenbrock! - Improved sizing of button for adding tabs
#2746 6f0fa98e
Thanks @thomasheyenbrock! - Fix CodeMirror editors overlapping other parts of the UI on certain browser-OS-combinations (e.g. Chrome on Windows)
Updated dependencies [98e14155
, 48872a87
, 7dfea94a
, 3aa1f39f
, 0219eef3
]:
Published by acao about 2 years ago
98e14155
Thanks @thomasheyenbrock! - Add DocsFilledIcon
component and use show that icon in the sidebar when the docs plugin is visible#2740 7dfea94a
Thanks @thomasheyenbrock! - Make SVG icon stroke-width
consistent
#2734 3aa1f39f
Thanks @thomasheyenbrock! - Stop propagating keyboard events too far upwards in the search component for the docs
#2741 0219eef3
Thanks @thomasheyenbrock! - Add hover styles for buttons
Updated dependencies [48872a87
]:
Published by acao about 2 years ago
dd5db3b2
Thanks @thomasheyenbrock! - Add a package that exports a plugin to use the GraphiQL Explorer from OneGraphPublished by acao about 2 years ago
Published by acao about 2 years ago
d65f00ea
, f15ee38d
, d65f00ea
]:
Published by acao about 2 years ago
#2712 d65f00ea
Thanks @thomasheyenbrock! - Make sure the back link and title are hidden when focussing the input field for searching the docs
#2708 f15ee38d
Thanks @thomasheyenbrock! - Fix computing the initial state for editor values and tabs to avoid duplicating tabs on page reload
#2712 d65f00ea
Thanks @thomasheyenbrock! - Make sure hidden editors don't overflow
Published by acao about 2 years ago
#2699 3b642aa3
Thanks @patrick91! - Export hooks in CDN bundle
#2700 3acacf5b
Thanks @patrick91! - Fix cannot access initialHeaders
before initialization
Published by acao about 2 years ago
#2523 01cd313b
Thanks @thomasheyenbrock! - BREAKING: Don't pass shouldPersistHeaders
anymore when invoking the fetcher function. This value can be looked up by consuming the EditorContext
:
import { useEditorContext } from '@graphiql/react';
function MyComponent() {
const { shouldPersistHeaders } = useEditorContext();
// Do things...
}
#2523 41236709
Thanks @thomasheyenbrock! - Add a clear
method to Storage
classes
Published by acao about 2 years ago
#2523 e1c6e3bf
Thanks @thomasheyenbrock! - BREAKING: The onHasCompletion
export has been removed as it is only meant to be used internally.
#2523 d1805200
Thanks @thomasheyenbrock! - Add new components:
Button
, ButtonGroup
, Dialog
, Menu
, Spinner
, Tab
, Tabs
, Tooltip
, UnStyledButton
and lots of icon components)QueryEditor
, VariableEditor
, HeaderEditor
and ResponseEditor
)ExecuteButton
, ToolbarButton
, ToolbarMenu
and ToolbarSelect
)Argument
, DefaultValue
, DeprecationReason
, Directive
, DocExplorer
, ExplorerSection
, FieldDocumentation
, FieldLink
, SchemaDocumentation
, Search
, TypeDocumentation
and TypeLink
)History
componentGraphiQLProvider
component that renders all other existing provider components from @graphiql/react
for ease of use#2523 b5a7bee1
Thanks @thomasheyenbrock! - BREAKING: Add a new context provider for plugins. This induces changes to the following other contexts and their provider components:
isVisible
and the methods hide
and show
of the ExplorerContext
have been removed. Also, the property isVisible
and the methods hide
, show
and toggle
of the HistoryContext
have been removed. Visibility state of plugins is now part of the PluginContext
using the visiblePlugin
property. The visibility state can be altered using the setVisiblePlugin
method of the PluginContext
.isVisible
prop of the ExplorerContextProvider
has been removed. For controlling the visibility state of plugins you can now use the visiblePlugin
prop of the PluginContextProvider
.onToggle
prop of the HistoryContextProvider
and the onToggleVisibility
prop of the ExplorerContextProvider
have been removed. For listening on visibility changes for any plugin you can now use the onTogglePluginVisibility
prop of the PluginContextProvider
.#2523 11c2778b
Thanks @thomasheyenbrock! - BREAKING: The ResponseTooltip
prop of the ResponseEditor
has been renamed to responseTooltip
d1805200
, 01cd313b
, 41236709
]:
Published by acao about 2 years ago
d1805200
Thanks @thomasheyenbrock! - BREAKING: Change the implementation of the info popup when hovering items in the code editor:
MyType.myField
-> myField
MyType.myField(myArg: MyArgType)
-> myArg: MyArgType
Published by acao about 2 years ago
#2523 fdcd9054
Thanks @thomasheyenbrock! - BREAKING: The GraphiQL
component does no longer set a property g
on the window
object.
#2523 d1805200
Thanks @thomasheyenbrock! - BREAKING: Implement a new design for the GraphiQL UI. This changes both DOM structure and class names. We consider this a breaking change as custom GraphQL IDEs built on top of GraphiQL relied on these internals, e.g. overriding styles using certain class names.
#2523 9fc6b476
Thanks @thomasheyenbrock! - BREAKING: The following static properties of the GraphiQL
component have been removed:
GraphiQL.formatResult
: You can use the function formatResult
from @graphiql/toolkit
instead.GraphiQL.formatError
: You can use the function formatError
from @graphiql/toolkit
instead.GraphiQL.QueryEditor
: You can use the QueryEditor
component from @graphiql/react
instead.GraphiQL.VariableEditor
: You can use the VariableEditor
component from @graphiql/react
instead.GraphiQL.HeaderEditor
: You can use the HeaderEditor
component from @graphiql/react
instead.GraphiQL.ResultViewer
: You can use the ResponseEditor
component from @graphiql/react
instead.GraphiQL.Button
: You can use the ToolbarButton
component from @graphiql/react
instead.GraphiQL.ToolbarButton
: This exposed the same component as GraphiQL.Button
.GraphiQL.Menu
: You can use the ToolbarMenu
component from @graphiql/react
instead.GraphiQL.MenuItem
: You can use the ToolbarMenu.Item
component from @graphiql/react
instead.GraphiQL.Group
: Grouping multiple buttons side-by-side is not provided out-of-the box anymore in the new GraphiQL UI. If you want to implement a similar feature in the new vertical toolbar you can do so by adding your own styles for your custom toolbar elements. Example:
import { GraphiQL } from 'graphiql';
function CustomGraphiQL() {
return (
<GraphiQL>
<GraphiQL.Toolbar>
{/* Add custom styles for your buttons using the given class */}
<div className="button-group">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</GraphiQL.Toolbar>
</GraphiQL>
);
}
#2523 864dfb03
Thanks @thomasheyenbrock! - BREAKING: The following exports of the graphiql
package have been removed:
DocExplorer
: Now exported from @graphiql/react
as DocExplorer
schema
prop has been removed, the component now uses the schema provided by the ExplorerContext
fillLeafs
: Now exported from @graphiql/toolkit
as fillLeafs
getSelectedOperationName
: Now exported from @graphiql/toolkit
as getSelectedOperationName
mergeAst
: Now exported from @graphiql/toolkit
as mergeAst
onHasCompletion
: Now exported from @graphiql/react
as onHasCompletion
QueryEditor
: Now exported from @graphiql/react
as QueryEditor
ToolbarMenu
: Now exported from @graphiql/react
as ToolbarMenu
ToolbarMenuItem
: Now exported from @graphiql/react
as ToolbarMenu.Item
ToolbarSelect
: Now exported from @graphiql/react
as ToolbarListbox
ToolbarSelectOption
: Now exported from @graphiql/react
as ToolbarListbox.Option
VariableEditor
: Now exported from @graphiql/react
as VariableEditor
Fetcher
: Now exported from @graphiql/toolkit
FetcherOpts
: Now exported from @graphiql/toolkit
FetcherParams
: Now exported from @graphiql/toolkit
FetcherResult
: Now exported from @graphiql/toolkit
FetcherReturnType
: Now exported from @graphiql/toolkit
Observable
: Now exported from @graphiql/toolkit
Storage
: Now exported from @graphiql/toolkit
SyncFetcherResult
: Now exported from @graphiql/toolkit
#2523 2c860e10
Thanks @thomasheyenbrock! - BREAKING: The GraphiQL
component has been refactored to be a function component. Attaching a ref to this component will no longer provide access to props, state or class methods. In order to interact with or change GraphiQL
state you need to use the contexts and hooks provided by the @graphiql/react
package. More details and examples can be found in the migration guide.
#2523 11c2778b
Thanks @thomasheyenbrock! - BREAKING: The following props of the GraphiQL
component have been changed:
defaultVariableEditorOpen
and defaultSecondaryEditorOpen
have been merged into one prop defaultEditorToolsVisibility
. The default behavior if this prop is not passed is that the editor tools are shown if at least one of the secondary editors has contents. You can pass the following values to the prop:
false
hides the editor tools.true
shows the editor tools."variables"
explicitly shows the variables editor."headers"
explicitly shows the headers editor.docExplorerOpen
, onToggleDocs
and onToggleHistory
have been removed. They are replaced by the more generic props visiblePlugin
(for controlling which plugin is visible) and onTogglePluginVisibility
(which is called each time the visibility of any plugin changes).headerEditorEnabled
prop has been renamed to isHeadersEditorEnabled
.ResultsTooltip
prop has been renamed to responseTooltip
.tabs
prop has therefore been replaced with a prop onTabChange
. If you used the tabs
prop before to pass this function you can change your implementation like so:
<GraphiQL
- tabs={{ onTabChange: (tabState) => {/* do something */} }}
+ onTabChange={(tabState) => {/* do something */}}
/>
4f714053
Thanks @thomasheyenbrock! - GraphiQL now ships with a dark theme. By default the interface respects the system settings, the theme can also be explicitly chosen via the new settings dialog.e1c6e3bf
, d1805200
, b5a7bee1
, 11c2778b
, 01cd313b
, 41236709
]:
Published by acao about 2 years ago
b3470b99
Thanks @thomasheyenbrock! - Add the attribute type="button"
to all buttonsPublished by acao about 2 years ago
Published by acao about 2 years ago
721425b3
]:
Published by acao about 2 years ago
34d31fbc
Thanks @acao! - bump ts-node
to 10.x, so that TypeScript based configs (i.e. .graphqlrc.ts
) will continue to work. It also bumps to the latest patch releases of graphql-config
fixed several issues with TypeScript loading (v4.3.2, v4.3.3). We tested manually, but please open a bug if you encounter any with schema-as-url configs & schema introspection.Published by acao about 2 years ago
85d5af25
, 6ff0bab9
, 0aff68a6
]:
Published by acao about 2 years ago
#2660 34d31fbc
Thanks @acao! - bump ts-node
to 10.x, so that TypeScript based configs (i.e. .graphqlrc.ts
) will continue to work. It also bumps to the latest patch releases of graphql-config
fixed several issues with TypeScript loading (v4.3.2, v4.3.3). We tested manually, but please open a bug if you encounter any with schema-as-url configs & schema introspection.
Updated dependencies [34d31fbc
]: