@autoinvent/conveyor
v1.0.0-beta.4
Published
GraphiQL for magql
Downloads
204
Keywords
Readme
Conveyor
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.
Features
- 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.
Prerequisites
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.
Usage
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.
Usage from CDN
<!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>Scripts
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.