GraphiQL & the GraphQL LSP Reference Ecosystem for building browser & IDE tools.
MIT License
Bot releases are visible (Hide)
Published by acao over 1 year ago
Published by acao over 1 year ago
#3130 9a38de29
Thanks @lesleydreyer! - - Add a "clear history" button to clear all history as well as trash icons to clear individual history items
Published by acao over 1 year ago
9a38de29
]:
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
#3330 bed5fc86
Thanks @acao! - BREAKING CHANGE: fix lifecycle issue in plugin-explorer, change implementation pattern
value
and setValue
is no longer an implementation detail, and are handled internally by plugins. the plugin signature has changed slightly as well.
now, instead of something like this:
import { useExplorerPlugin } from '@graphiql/plugin-explorer';
import { snippets } from './snippets';
import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
const App = () => {
const [query, setQuery] = React.useState('');
const explorerPlugin = useExplorerPlugin({
query,
onEdit: setQuery,
});
const codeExporterPlugin = useExporterPlugin({
query,
snippets,
});
const plugins = React.useMemo(
() => [explorerPlugin, codeExporterPlugin],
[explorerPlugin, codeExporterPlugin],
);
return (
<GraphiQL
query={query}
onEditQuery={setQuery}
plugins={plugins}
fetcher={fetcher}
/>
);
};
you can just do this:
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { snippets } from './snippets';
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
// only invoke these inside the component lifecycle
// if there are dynamic values, and then use useMemo() (see below)
const explorer = explorerPlugin();
const exporter = codeExporterPlugin({ snippets });
const fetcher = createGraphiQLFetcher({ url: '/graphql' });
const App = () => {
return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
};
or this, for more complex state-driven needs:
import { useMemo } from 'react';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { snippets } from './snippets';
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
const explorer = explorerPlugin();
const fetcher = createGraphiQLFetcher({ url: '/graphql' });
const App = () => {
const { snippets } = useMyUserSuppliedState();
const exporter = useMemo(
() => codeExporterPlugin({ snippets }),
[snippets],
);
return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
};
Published by acao over 1 year ago
#3330 bed5fc86
Thanks @acao! - BREAKING CHANGE: fix lifecycle issue in plugin-explorer, change implementation pattern
value
and setValue
is no longer an implementation detail, and are handled internally by plugins. the plugin signature has changed slightly as well.
now, instead of something like this:
import { useExplorerPlugin } from '@graphiql/plugin-explorer';
import { snippets } from './snippets';
import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
const App = () => {
const [query, setQuery] = React.useState('');
const explorerPlugin = useExplorerPlugin({
query,
onEdit: setQuery,
});
const codeExporterPlugin = useExporterPlugin({
query,
snippets,
});
const plugins = React.useMemo(
() => [explorerPlugin, codeExporterPlugin],
[explorerPlugin, codeExporterPlugin],
);
return (
<GraphiQL
query={query}
onEditQuery={setQuery}
plugins={plugins}
fetcher={fetcher}
/>
);
};
you can just do this:
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { snippets } from './snippets';
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
// only invoke these inside the component lifecycle
// if there are dynamic values, and then use useMemo() (see below)
const explorer = explorerPlugin();
const exporter = codeExporterPlugin({ snippets });
const fetcher = createGraphiQLFetcher({ url: '/graphql' });
const App = () => {
return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
};
or this, for more complex state-driven needs:
import { useMemo } from 'react';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import { snippets } from './snippets';
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
const explorer = explorerPlugin();
const fetcher = createGraphiQLFetcher({ url: '/graphql' });
const App = () => {
const { snippets } = useMyUserSuppliedState();
const exporter = useMemo(
() => codeExporterPlugin({ snippets }),
[snippets],
);
return <GraphiQL plugins={[explorer, exporter]} fetcher={fetcher} />;
};
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
Published by acao over 1 year ago
#3181 9ac84bfc
Thanks @B2o5T! - remove initialTabs
, use defaultTabs
instead
#3181 9ac84bfc
Thanks @B2o5T! - replace @reach/dialog
by @radix-ui/react-dialog
replace @reach/visually-hidden
by @radix-ui/react-visually-hidden
#3181 9ac84bfc
Thanks @B2o5T! - replace @reach/menu-button
by @radix-ui/react-dropdown-menu
remove @reach/listbox
remove <ToolbarListbox />
and <Listbox />
components (use <Menu />
instead)
#3181 9ac84bfc
Thanks @B2o5T! - fixed long list items in dropdown were hidden
rename <Menu />
to <DropdownMenu />
rename <Menu.List />
to <DropdownMenu.Content />
rename <Menu.Item />
to <DropdownMenu.Item />
rename <Menu.Button />
to <DropdownMenu.Button />
#3181 9ac84bfc
Thanks @B2o5T! - replace @reach/tooltip
by @radix-ui/react-tooltip
#3181 9ac84bfc
Thanks @B2o5T! - replace @reach/combobox
with Combobox
from @headlessui/react
Published by acao over 1 year ago
#3229 0a65e720
Thanks @B2o5T! - exclude peer dependencies and dependencies from bundle
#3251 f8d8509b
Thanks @B2o5T! - always bundle package.json#dependencies
for UMD build for @graphiql/plugin-code-exporter
and @graphiql/plugin-explorer
#3252 c915a4ee
Thanks @B2o5T! - @graphiql/react
should be in peerDependencies
not in dependencies
Updated dependencies [9ac84bfc
, 9ac84bfc
, 9ac84bfc
, 9ac84bfc
, bc9d243d
, 9ac84bfc
, 9ac84bfc
, 9ac84bfc
, 67bf93a3
]:
Published by acao over 1 year ago
Published by acao over 1 year ago