Check out the demo at: https://magiql-browser.vercel.app
Important: Very early project and under active development, would love any feedback or help
Goal:
Inspirations:
monaco-editor
npm install @magiql/browser
// or
yarn add @magiql/browser
graphql-language-service
monaco-graphql
OneGraph/graphiql-explorer
recoil
based AST data structure using the types in the graphql
package, the Explorer is also just a renderer of the AST, that can update any part of the AST by updating its atom, and a new AST will be buildmonaco-editor
and web workers from CDNs to avoid any extra bundling step to include thembeamwind
so that its not necessary to bundle cssuse-monaco
gives a really easy API to register and use workers that use text files from monaco-editor
@magiql/browser/render
can be used by GraphQL servers as an alternative to GraphQL playground (usage shown below)
react
recoil
: state management toolbeamwind
: a collection of packages to compile Tailwind CSS like shorthand syntax into CSS at runtimeuse-monaco
: wrapper around monaco-editor
, handles loading from CDN and managing workers, exposes easier APIs to extend the editorimport {
getGraphQLParameters,
processRequest,
shouldRenderGraphiQL,
} from "graphql-helix";
import { renderBrowser } from "@magiql/browser/render";
const allowCors = (fn) => async (req, res) => {
// ... middleware to allow cors for development
return await fn(req, res);
};
export default allowCors(async (req, res) => {
const request = {
body: req.body,
headers: req.headers,
method: req.method,
query: req.query,
};
if (shouldRenderGraphiQL(request)) {
res.send(
/*
* returns HTML that you send from a server
*/
renderBrowser({
uri: "/api/graphql",
})
);
} else {
const { operationName, query, variables } = getGraphQLParameters(request);
const result = await processRequest({
operationName,
query,
variables,
request,
schema,
});
if (result.type === "RESPONSE") {
result.headers.forEach(({ name, value }) => res.setHeader(name, value));
res.status(result.status);
res.json(result.payload);
}
}
});
import GraphQLBrowser from "@magiql/browser";
export default function App() {
return (
<GraphQLBrowser
initialSchemaConfig={{
// whichever GraphQL endpoint you want to connect to,
// to access Next JS API Routes, we need the full url
uri: window.location.origin + "/api/graphql",
}}
/>
);
}
As the tool is web-based, in case your app is server-rendered, use the following to skip rendering the IDE on the server
import GraphQLBrowser from "@magiql/browser";
export default function App() {
return typeof window !== "undefined" ? (
<GraphQLBrowser
initialSchemaConfig={{
uri: window.location.origin + "/api/graphql",
}}
/>
) : (
<></>
);
}