开源软件名称:graphql-editor开源软件地址:https://gitee.com/mirrors/graphql-editor开源软件介绍:GraphQLEditor makes it easier to understand GraphQL schemas. Create a schema by using visual blocks system. GraphQL Editor will transform them into code. With GraphQL Editor you can create visual diagrams without writing any code or present your schema in a nice way! Cloud versionHere is a cloud version of GraphQL Editor. DocsHere is a guide for GraphQL Editor. How it worksCreate GraphQL nodes and connect them to generate a database schema. You can also use builtin text IDE with GraphQL syntax validation Creator/EditorRelationsTable of contentsLicenseMIT Installationnpm i -D worker-loader css-loader file-loader webpack npm i graphql-editor react react-dom monaco-editor @monaco-editor/react Usageimport React, { useState } from 'react';import { render } from 'react-dom';import { GraphQLEditor, PassedSchema } from 'graphql-editor';const schemas = { pizza: `type Query{ pizzas: [Pizza!]}`, pizzaLibrary: `type Pizza{ name:String;}`,};export const App = () => { const [mySchema, setMySchema] = useState<PassedSchema>({ code: schemas.pizza, libraries: schemas.pizzaLibrary, }); return ( <div style={{ flex: 1, width: '100%', height: '100%', alignSelf: 'stretch', display: 'flex', position: 'relative', }} > <GraphQLEditor onSchemaChange={(props) => { setMySchema(props); }} schema={mySchema} /> </div> );};render(<App />, document.getElementById('root')); GraphQLEditor component propsGraphQLEditor
PassedSchema
ActivePane
SupportTeamUnderlying Parsing technologyWhole graphql-editor parsing stuff is based on underlying zeus technology. GraphQL TutorialsInteractive GraphQL Tutorial here GraphQL Editor Guide here GraphQL Blog here |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论