feat: query composer as extension

package.json

@@ -36,6 +36,9 @@
 		"sort-package-json": "^2.7.0"
 	},
 	"dependencies": {
+		"@graphiql/plugin-explorer": "^1.0.3",
+		"@graphiql/react": "^0.20.3",
+		"@graphiql/toolkit": "^0.9.1",
 		"@wordpress/components": "^27.0.0",
 		"@wordpress/data": "^9.22.0",
 		"@wordpress/element": "^5.23.0",

plugins/query-composer/README.md

@@ -0,0 +1,7 @@
+# Query Composer
+
+The Query Composer is a tool that allows users to view fields in the GraphQL Schema
+and compose queries by clicking on the fields they want to query for.
+
+Additionally, fields that accept input (i.e. connections, mutations, etc) provide UIs to enter the input.
+

plugins/query-composer/components/QueryComposer.js

@@ -0,0 +1,7 @@
+export const QueryComposer = () => {
+	return (
+		<>
+			<h2>Query Composer...</h2>
+		</>
+	)
+}

plugins/query-composer/index.js

@@ -0,0 +1,47 @@
+import { registerPlugin } from 'wpgraphql-ide';
+import {addAction, addFilter} from '@wordpress/hooks';
+import { explorerPlugin } from "@graphiql/plugin-explorer";
+
+import { Icon, pencil } from '@wordpress/icons';
+import { QueryComposer } from './components/QueryComposer'
+
+// const queryComposerFake = () => {
+// 	return {
+// 		title: 'Query Composer Fake',
+// 		icon: () => (
+// 			<Icon
+// 				icon={ pencil }
+// 				style={ {
+// 					fill: 'hsla(var(--color-neutral), var(--alpha-tertiary))',
+// 				} }
+// 			/>
+// 		),
+// 		content: () => <QueryComposer />
+// 	};
+// }
+//
+// registerPlugin( 'queryComposerFake', queryComposerFake );
+
+// addAction( 'wpgraphqlide_rendered', 'wpgraphql-ide-query-composer',() => {
+// 	console.log({
+// 		wpgraphqlide_rendered: true
+// 	})
+// 	registerPlugin( 'queryComposer', explorerPlugin() );
+// });
+
+const explorer = explorerPlugin();
+registerPlugin( 'queryComposer', explorer );
+
+
+
+// addFilter( 'wpgraphqlide_plugins', 'wpgraphql-ide-query-composer', (plugins) => {
+// 	const explorer = explorerPlugin();
+// 	console.log( { pluginsBefore: plugins })
+// 	if ( ! plugins.includes( explorer ) ) {
+// 		plugins.push(explorer)
+// 		console.log({pluginsAfter: plugins})
+// 	}
+// 	return plugins;
+// })
+
+

plugins/query-composer/query-composer.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Plugin Name: WPGraphQL IDE Query Composer
+ * Plugin Author: WPGraphQL
+ * Description: An interactive point-and-click interface for composing GraphQL queries
+ */
+
+namespace WPGraphQLIDE\Plugins\QueryComposer;
+
+/**
+ * Hook into the GraphiQL enqueue lifecycle, ensuring scripts are only loaded if the GraphiQL IDE
+ * is also loaded.
+ */
+add_action( 'wpgraphqlide_enqueue_script', __NAMESPACE__ . '\\enqueue_plugin' );
+
+
+/**
+ * Enqueue the plugin scripts and styles.
+ *
+ * @return void
+ */
+function enqueue_plugin() {
+
+	$asset_file = include WPGRAPHQL_IDE_PLUGIN_DIR_PATH . 'build/queryComposer.asset.php';
+
+	wp_enqueue_script(
+		'wpgraphql-ide-query-composer-plugin',
+		WPGRAPHQL_IDE_PLUGIN_URL . 'build/queryComposer.js',
+		array_merge( $asset_file['dependencies'], [ 'wpgraphql-ide' ] ),
+		$asset_file['version'],
+		true
+	);
+}

src/components/Editor.jsx

@@ -3,6 +3,9 @@ import React from 'react';
 import { GraphiQL } from 'graphiql';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { applyFilters } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element'
+
+// import { explorerPlugin } from "@graphiql/plugin-explorer";
 
 import { PrettifyButton } from './toolbarButtons/PrettifyButton';
 import { CopyQueryButton } from './toolbarButtons/CopyQueryButton';
@@ -43,19 +46,22 @@ export function Editor() {
 			return {
 				query: wpgraphqlIde.getQuery(),
 				shouldRenderStandalone: wpgraphqlIde.shouldRenderStandalone(),
-				plugins: wpgraphqlIde.getPluginsArray(),
+				plugins: wpgraphqlIde.getRegisteredPlugins(),
 			};
 		}
 	);
 
 	const { setDrawerOpen, setQuery } = useDispatch( 'wpgraphql-ide' );
 
+	let activePlugins = plugins.length > 0 ? plugins : null;
+	activePlugins = applyFilters( 'wpgraphqlide_plugins', activePlugins );
+
 	return (
 		<GraphiQL
 			query={ query }
 			fetcher={ fetcher }
 			onEditQuery={ ( query ) => setQuery( query ) }
-			plugins={ plugins.length > 0 ? plugins : null }
+			plugins={ activePlugins }
 		>
 			<GraphiQL.Toolbar>
 				{ Object.entries( toolbarButtons ).map( ( [ key, Button ] ) => (

src/index.js

@@ -2,6 +2,85 @@
 import { createHooks } from '@wordpress/hooks';
 import { register, dispatch } from '@wordpress/data';
 import { store } from './store';
+import {
+	Button,
+	ButtonGroup,
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CopyIcon,
+	Dialog,
+	ExecuteButton,
+	GraphiQLProvider,
+	GraphiQLProviderProps,
+	HeaderEditor,
+	KeyboardShortcutIcon,
+	MergeIcon,
+	PlusIcon,
+	PrettifyIcon,
+	QueryEditor,
+	ReloadIcon,
+	ResponseEditor,
+	SettingsIcon,
+	Spinner,
+	Tab,
+	Tabs,
+	ToolbarButton,
+	Tooltip,
+	UnStyledButton,
+	useCopyQuery,
+	useDragResize,
+	useEditorContext,
+	useExecutionContext,
+	UseHeaderEditorArgs,
+	useMergeQuery,
+	usePluginContext,
+	usePrettifyEditors,
+	UseQueryEditorArgs,
+	UseResponseEditorArgs,
+	useSchemaContext,
+	useStorageContext,
+	useTheme,
+	UseVariableEditorArgs,
+	VariableEditor,
+	WriteableEditorProps,
+} from '@graphiql/react';
+
+const GraphiQL = {
+	Button,
+	ButtonGroup,
+	ChevronDownIcon,
+	ChevronUpIcon,
+	CopyIcon,
+	Dialog,
+	ExecuteButton,
+	GraphiQLProvider,
+	HeaderEditor,
+	KeyboardShortcutIcon,
+	MergeIcon,
+	PlusIcon,
+	PrettifyIcon,
+	QueryEditor,
+	ReloadIcon,
+	ResponseEditor,
+	SettingsIcon,
+	Spinner,
+	Tab,
+	Tabs,
+	ToolbarButton,
+	Tooltip,
+	UnStyledButton,
+	useCopyQuery,
+	useDragResize,
+	useEditorContext,
+	useExecutionContext,
+	useMergeQuery,
+	usePluginContext,
+	usePrettifyEditors,
+	useSchemaContext,
+	useStorageContext,
+	useTheme,
+	VariableEditor,
+};
 
 /**
  * Register the store to wp.data for use throughout the plugin and extending plugins
@@ -30,3 +109,5 @@ window.WPGraphQLIDE = {
 	hooks,
 	store,
 };
+
+window.GraphiQL = GraphiQL;

src/store/index.js

@@ -4,7 +4,7 @@ const initialState = {
 	isDrawerOpen: false,
 	shouldRenderStandalone: false,
 	isInitialStateLoaded: false,
-	registeredPlugins: {},
+	registeredPlugins: [],
 	query: null,
 };
 
@@ -31,13 +31,22 @@ const reducer = ( state = initialState, action ) => {
 				isInitialStateLoaded: true,
 			};
 		case 'REGISTER_PLUGIN':
+			// push the plugin into the registeredPlugins array
 			return {
 				...state,
-				registeredPlugins: {
+				registeredPlugins: [
 					...state.registeredPlugins,
-					[ action.name ]: action.config,
-				},
-			};
+					...[ action.config ],
+				],
+			}
+
+			// return {
+			// 	...state,
+			// 	registeredPlugins: {
+			// 		...state.registeredPlugins,
+			// 		[ action.name ]: action.config,
+			// 	},
+			// };
 	}
 	return state;
 };
@@ -87,6 +96,9 @@ const selectors = {
 	isInitialStateLoaded: ( state ) => {
 		return state.isInitialStateLoaded;
 	},
+	getRegisteredPlugins: ( state ) => {
+		return state.registeredPlugins;
+	},
 	getPluginsArray: ( state ) => {
 		const registeredPlugins = state.registeredPlugins;
 		const pluginsArray = [];

webpack.config.js

@@ -1,16 +1,47 @@
 const defaults = require( '@wordpress/scripts/config/webpack.config' );
 const path = require( 'path' );
 
+const defaultExternals = {
+	react: 'React',
+	'react-dom': 'ReactDOM',
+	'wpgraphql-ide': 'WPGraphQLIDE',
+}
+
+// Define a mapping of entries to their respective externals
+const entryExternals = {
+	index: {
+		...defaultExternals
+	},
+	queryComposer: {
+		...defaultExternals,
+		GraphiQL: 'GraphiQL',
+	},
+	// Define externals for other entries as needed
+};
+
 module.exports = {
 	...defaults,
 	entry: {
 		index: path.resolve( process.cwd(), 'src', 'index.js' ),
 		app: path.resolve( process.cwd(), 'src', 'App.jsx' ),
 		help: path.resolve( process.cwd(), 'plugins/help', 'index.js' ),
+		queryComposer: path.resolve( process.cwd(), 'plugins/query-composer', 'index.js' ),
 	},
-	externals: {
-		react: 'React',
-		'react-dom': 'ReactDOM',
-		'wpgraphql-ide': 'WPGraphQLIDE',
+	externals: (context, request, callback) => {
+		// Determine the current entry from context or other means
+		const currentEntry = determineCurrentEntry(context);
+		// Apply the externals based on the current entry
+		if (entryExternals[currentEntry] && entryExternals[currentEntry][request]) {
+			return callback(null, entryExternals[currentEntry][request]);
+		}
+		// Fallback to default behavior if no externals are defined for the current entry
+		callback();
 	},
 };
+
+function determineCurrentEntry(context) {
+	// Implement logic to determine the current entry based on context
+	// This might involve checking the context path to infer which entry is being processed
+	// Placeholder implementation:
+	return 'index'; // Replace with actual logic to determine the entry
+}