在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):graphql-editor/graphql-editor开源软件地址(OpenSource Url):https://github.com/graphql-editor/graphql-editor开源编程语言(OpenSource Language):TypeScript 99.9%开源软件介绍(OpenSource Introduction):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 contents
LicenseMIT Installation
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 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论