# @sparklink-pro/apant > Apollo & Antd tools Latest version **2.0.3** (published 2026-07-02) · MIT license · 0 weekly downloads ## Install ```sh npm install @sparklink-pro/apant pnpm add @sparklink-pro/apant yarn add @sparklink-pro/apant bun add @sparklink-pro/apant ``` ## Health **Score 55/100 (C)** — status: active. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. ## Facts | | | |---|---| | Version | 2.0.3 | | Published | 2026-07-02 | | First published | 2022-02-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 9 | | Unpacked size | 236.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Sparklink | | Maintainers | sparklink, dams_iuwt | | Keywords | react, graphql, gql, apollo, antd, ant, design, form | ## Links - npm: https://www.npmjs.com/package/@sparklink-pro/apant - npm.io page: https://npm.io/package/@sparklink-pro/apant ## Dependencies (9) - [rxjs](https://npm.io/package/rxjs.md) ^7 - [vite](https://npm.io/package/vite.md) ^7.2.4 - [imask](https://npm.io/package/imask.md) ^7.6.1 - [pluriel](https://npm.io/package/pluriel.md) ^0.0.0 - [pluralize](https://npm.io/package/pluralize.md) ^8.0.0 - [rc-picker](https://npm.io/package/rc-picker.md) ^4.11.3 - [react-imask](https://npm.io/package/react-imask.md) ^7.6.1 - [@apollo/client](https://npm.io/package/@apollo/client.md) ^4 - [virtualizedtableforantd4](https://npm.io/package/virtualizedtableforantd4.md) ^1.3.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.3 (latest) — 2026-07-02 - 2.0.1 — 2025-11-24 - 2.0.0 — 2025-11-24 - 1.6.26 — 2024-03-26 - 1.6.25 — 2024-03-26 - 1.6.24 — 2024-02-15 - 1.6.23 — 2024-02-15 - 1.6.22 — 2024-02-05 - 1.6.21 — 2023-12-15 - 1.6.20 — 2023-12-13 - 1.6.18 — 2023-12-13 - 1.6.17 — 2023-12-13 - 1.6.16 — 2023-11-30 - 1.6.15 — 2023-11-30 - 1.6.14 — 2023-11-30 - … 65 more at https://npm.io/package/@sparklink-pro/apant/versions ## README # apant Apollo & Antd tools ## Table of Contents * [Installation](#installation) * [Live demo](#live-demo) * [Usage](#usage) * [Working locally with apant](#working-locally-with-apant) * [Tests](#tests) ## Usage ```ts import { TypesContext, TypesRegistry, useTypeList } from "apant"; import client from "./apollo"; import operations from "./gql"; import types from "./types"; const typesRegistry = new TypesRegistry({ types, operations, apollo: client }); const Root = () => ( ); ``` ### [TypesRegistryConfiguration](./src/definitions.ts#TypesRegistryConfiguration) | Property | Description | Type | Default | | :-----------: | :-----------------------------: | :----------------------------------------------------------------: | :-----: | | apollo | Apollo client instance | ApolloClient\ | - | | configuration | GraphQL Operation configuration | Partial<[TypeOperationConfiguration](#TypeOperationConfiguration)> | - | | operations | GraphQL Operation file | { [name: string]: any }; | - | | types | List of types configuration | { [type: string]: TypeConfiguration } | - | #### example type ```ts //types/index.ts import { Foo } from "./Foo"; export default { foo }; // example/src/types/Book.ts import { TypeConfiguration } from 'apant'; const Book: TypeConfiguration = { label: 'title', search: 'title', admin: { route: 'admin/Book', searchable: true, selectable: true, filter(pattern: any) { return pattern.rank >= 9; }, columns: () => [ { title: 'Title', dataIndex: 'title', link: true, }, { title: 'Description', dataIndex: 'description', }, { title: 'Price', dataIndex: 'price', sorter: { compare: (a: any, b: any) => a.price - b.price, }, }, ], }, forms: { default: { props: { layout: 'vertical', }, fields: [ { name: 'title', label: 'Title' }, { name: 'description', label: 'Description' }, { name: 'price', label: 'Price', widget:'number' }, { name: 'rank', label: 'Rank' }, { name: 'author', label: 'Author',widget: {widget:'select_type', expand:true , type: 'Author'}}, { name: 'genres', label: 'Genre', widget: {widget:'select_types', expand:true, type: 'Genre'}}, ], }, }, }; export default Book; ``` ### [TypeOperationConfiguration](./src/definitions.ts#TypeOperationConfiguration) | Property | Description | Type | Default | | :--------: | :---------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------: | | admin | admin configuration | [TypeConfigurationAdmin](#TypeConfigurationAdmin) | - | | forms | A list of configured forms for this types | { [formName: string]: <[FormConfigurationType](#FormConfigurationType) } | - | | id | What is the id property for this type? | string | id | | label | For selectType | string\|() =>string\|React.ReactNode) | '\_name' property | | metadata | Additional configuration for this type | { [key: string]: any } | - | | operations | Operation configuration for given type | Partial\<[TypeOperationConfiguration](./src/definitions.ts#TypeOperationConfiguration)> | - | | order | For SelectType | order:string\| {[field:string]:'asc'\|'desc'} | 'asc' | | search | search in type | string\|string[] \| ((object:[GraphQLObject](./src/definitions.ts#GraphQLObject),context?:any)=>string)\|{custom:(object:[GraphQLObject](./src/definitions.ts#GraphQLObject),search:string,context?:any)=>boolean} | - | | select | Select type widget configuration | { label: any; fragment: any }; | - | ### [TypeConfigurationAdmin](./src/definitions.ts#TypeConfigurationAdmin) | Property | Description | Type | Default | | :-------------: | :--------------------------: | :--------------------------------------------------------------------------: | :-----: | | columns | the configColumns | ()=>Promise\|
ColumnsType(see AntDesign) | - | | creatable | allows to create new items | bool | true | | filter | Filter items | (item:object)=>boolean | - | | footerComponent | Custom footer | React.ComponentType<[AdminHeaderType](./src/definitions.ts#AdminFooterType)> | - | | headerComponent | Custom header | React.ComponentType<[AdminHeaderType](./src/definitions.ts#AdminHeaderType)> | - | | route | | string | - | | searchable | Allow to search in this type | bool | true | | selectable | Allow to select | bool | true | | props | | TableProps<[GraphQLObject](./src/definitions.ts#GraphQLObject)> | - | ### [FormConfigurationType](./src/definitions.ts#FormConfigurationType) | Property | Description | Type | Default | | :------: | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | | fields | the fields | [FormEntryType](./src/definitions.ts#FormEntryType)[] \| ((context: [FormContextType](./src/definitions.ts#FormContextType)) => FormEntryType[]); | - | | props | | props?: Omit\ \| ((context: [FormContextType](./src/definitions.ts#FormContextType)) => Omit\); | - | | mappers | | [FormFieldMapperType](./src/definitions.ts#FormFieldMapperType)[] \| ((context: [FormContextType](./src/definitions.ts#FormContextType)) => [FormFieldMapperType](./src/definitions.ts#FormFieldMapperType)[]) | - | ### [FormFieldExtraType](./src/definitions.ts#FormFieldExtraType) | Property | Description | Type | Default | | :----------: | :---------------------------------------------------------------------------: | :-------------------------------------------------------------------------------: | :-----: | | auto | Should this field be display when the related form is diplayed automatically? | bool | false | | group | Is the field parts of a group ? | bool | false | | initialValue | What is the initial/default value of the field? | ((context:[FormContextType](./src/definitions.ts#FormContextType)) => any) \|any; | - | | list | Is this field a list (ie. Form.List from antd) | bool | false | | mapped | Should this field be removed before submitting? | boolean \| ((context: FormContextType) => boolean \| Promise); | true | | auto | Should this field be display when the related form is diplayed automatically? | boolean \| ((context: FormContextType) => boolean \| ); | true | ### Use [AdminType](./src/components/AdminType.tsx#AdminType) ```tsx ``` ### Use [Form](./src/components/Form.tsx#Form) Basic use, if you want further customization, see our [demo](#live-demo). ```tsx const formConfig = { props: { layout: "vertical" }, fields: [ { name: "name", label: "Nom", required: true, rules: [{ required: true }], initialValue: "Ode" }, { name: "firstname", label: "Prénom", initialValue: "Jack" }, { name: ['position','name'], label: 'Position'}, ] }; const object = { name: 'Doe', city: 'Paris', position:{ name: 'Software Engineer', company: 'Google' }, }; //...
console.log(values)} context={{ object }} footer={
} /> ); ``` | Property | Description | Type | Default | | :--------------------------------------: | :-----------------------------------: | :-----------------------------------------------------------------------------------------------------: | :-----: | | children | | React.ReactNode \|((fields: FormEntryResolvedType[], form: FormInstance) => React ReactNode) | - | | config | Configuration of the form | FormConfigurationType | - | | context | Context of the form | Omit<[FormContextType](./src/definitions.ts#FormContextType), 'form'> | - | | formProps | Additional form Props | Partial\ | - | | footer | the footer | React.ReactNode | - | | header | the header | React.ReactNode | - | | onValue | Process form values before submitting | (values: object, context: [FormContextType](./src/definitions.ts#FormContextType)) => Promise\; | | | & Omit\ | | | | ## Working locally with apant Working locally with apant relies on `yalc` and `yarn`. First, you neeed to compile the project. ```bash $ cd apant $ yarn $ yarn build ``` Then, you'll need to publish the project with `yalc`. ```bash $ yalc publish apant@xxx published in store. ``` The project is now in the yalc store and is available to use for other project. ### Use the `apant` in your project To use the library in your local project, you need to link it with `yalc`. ```bash $ cd myproject/ $ yalc link apant ``` `apant` is now linked to the project. ### Work in realtime To work and use apant in realtime, we must watch `apant` for change, compile it and publish it the `yalc` store. To do so, we use the npm command defined in the `package.json` by ```json "watch-publish": "tsc-watch --onSuccess \"yalc push\"" ``` ```bash $ cd apant/ $ yarn watch-publish ``` ## Test --- _Source: https://npm.io/package/@sparklink-pro/apant · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._