Conveyor is a comprehensive UI library for introspecting and interacting with GraphQL APIs generated by the Magql library. It provides an intuitive and user-friendly interface for performing CRUD (Create, Read, Update, Delete) operations on your GraphQL data.
- Automatic UI Generation: Conveyor automatically introspects your GraphQL schema and generates a UI that corresponds to your data structure. This includes forms for data entry, tables for data viewing, and even more complex UI structures for nested or related data.
Before using Conveyor, you need to have a GraphQL API generated by the Magql library. Magql provides a robust, flexible, and easy-to-use way to create a GraphQL API from your existing data.
First, install the library:
pnpm install @autoinvent/conveyorThen you can use it in your project:
- Check out outline for component description and usages.
- Check out request examples for examples on how to use different request APIs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/autoinvent/conveyor/main/src/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Conveyor</title>
<style>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
</style>
<!--
This example depends on Promise and fetch, which are available in modern browsers, but can be "polyfilled" for older browsers.
Conveyor itself depends on React DOM.
If you do not want to rely on a CDN, you can host these files locally or nclude them directly in your favored resource bundler.
-->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<link crossorigin href="https://unpkg.com/@autoinvent/[email protected]/dist/styles/index.css" rel="stylesheet" />
<script crossorigin src="https://unpkg.com/@autoinvent/[email protected]/dist/conveyor.umd.js"></script>
</head>
<body>
<div id="conveyorAdmin">Loading...</div>
<script defer>
const ConveyorAdmin = window.conveyor.ConveyorAdmin;
const gqlUrl = "/graphql";
const responseHandler = async (response) => {
const parsedResponse = await response.json();
if (parsedResponse?.data) {
return parsedResponse.data;
} else if (parsedResponse?.errors) {
throw parsedResponse.errors;
} else {
throw parsedResponse;
}
};
const useGQLQueryResponse = (graphQLParams) => {
return fetch(gqlUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
query: graphQLParams.document,
variables: graphQLParams.variables,
}),
}).then(responseHandler);
};
const useGQLMutationRequest = (graphQLParams) => {
return (options) =>
fetch(gqlUrl, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
query: graphQLParams.document,
variables: options?.variables,
}),
}).then(responseHandler);
};
ReactDOM.render(
React.createElement(ConveyorAdmin, {
useGQLQueryResponse: useGQLQueryResponse,
useGQLMutationRequest: useGQLMutationRequest,
}),
document.getElementById("conveyorAdmin")
);
</script>
</body>
</html>pnpm dev- start a development server for testing the conveyor library with hot reload.pnpm build- build library for production. The generated files will be on thedistfolder.pnpm packwill package these files into a tarball for install.pnpm preview- locally preview the production build.pnpm test- run tests in watch mode.pnpm test:ci- run tests once without watch mode.pnpm test:ui- run tests with ui.pnpm format- format all files with Rome.pnpm lint- runs TypeScript, Rome and Stylelint.pnpm validate- runslint,test:ci.