Here is yet another plugin RFC, what do you think?
More details and examples to come
// example-sidebar-plugin.tsx
import {
useSidebarPlugin,
import type { GraphiQLProps } from 'graphiql'; | |
import type { FetcherOpts } from '@graphiql/toolkit'; | |
export type GenerateGraphiQLOptions = { | |
plugins?: ( | |
| '@graphiql/plugin-doc-explorer' | |
| '@graphiql/plugin-explorer' | |
| '@graphiql/plugin-code-exporter' | |
)[]; | |
props?: GraphiQLProps; | |
fetcherOptions?: FetcherOpts; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Parcel Sandbox</title> | |
<style> | |
body { | |
height: 100%; | |
margin: 0; | |
width: 100%; | |
overflow: hidden; |
import { | |
getIntrospectionQuery, | |
IntrospectionOptions, | |
IntrospectionQuery, | |
DocumentNode, | |
BuildSchemaOptions, | |
buildClientSchema, | |
buildASTSchema, | |
buildSchema | |
} from 'graphql'; |
import * as monaco from 'monaco-editor'; | |
import IWorkerContext = monaco.worker.IWorkerContext; | |
import * as graphqlService from 'graphql-language-service'; | |
import { GraphQLLanguageService } from 'graphql-language-service-interface'; | |
import { | |
Position, | |
Diagnostic, |
import { Component } from 'react'; | |
import { GraphQLSchema } from 'graphql'; | |
export interface GraphiQL extends Component<GraphiQLProps, GraphiQLState> {} | |
export interface GraphiQLProps { | |
fetcher?: (props: { query: string; operationName: string }) => Promise<any>; | |
schema?: GraphQLSchema; | |
query?: string; | |
variables?: string; | |
operationName?: string; |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { GraphiQL } from './components/GraphiQL'; | |
const logger = console; | |
const defaultOptions = { | |
containerId: 'root', | |
url: 'http://localhost:8080', | |
}; |
<script> | |
var suite = new Benchmark.Suite(); | |
const obj = { | |
stuff: { | |
things: { | |
stuff: 'things', | |
things: 'stuff', | |
other: { | |
stuff: 'things' | |
} |