afraid-scarlet•17mo ago

inferencer: Custom key for `object` type property

How to set custom key that will represent an object type property? if it is not possible, is it a good idea if i manually swizzle @refinedev/inferencer/antd from the github repository?

12 Replies

kapa.ai•17mo ago

Hey @killerudin! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave: ---------------------- To set a custom key that will represent an object type property, you can use the fieldTransformer prop in the Inferencer components. The fieldTransformer is a function that takes the field as an argument and returns the modified field. You can customize the output of the Inferencer, such as setting a custom accessor property for object type fields or changing the type of a field. Here's an extract from the documentation about modifying inferred fields:

If you want to customize the output of the Inferencer such as setting a custom `accessor` property for `object` type fields or changing the `type` of a field, or changing the `resource` for a `relation` type, you can use`fieldTransformer` prop in Inferencer components. It is a function that takes the field as an argument and returns the modified field. If `undefined | false | null` is returned, the field will be removed from the output, both for the preview and the code.

If you want to customize the output of the Inferencer such as setting a custom `accessor` property for `object` type fields or changing the `type` of a field, or changing the `resource` for a `relation` type, you can use`fieldTransformer` prop in Inferencer components. It is a function that takes the field as an argument and returns the modified field. If `undefined | false | null` is returned, the field will be removed from the output, both for the preview and the code.

(Source: refine.dev/docs/packages/documentation/inferencer (https://refine.dev/docs/packages/documentation/inferencer)) As for manually swizzling @refinedev/inferencer/antd from the GitHub repository, it's important to note that @refinedev/inferencer is an experimental package and is in the early stages of development. It's not recommended to use it in production environments. If you have any suggestions or feedback, you can share them in the GitHub Discussions (https://github.com/refinedev/refine/discussions/3046). ----------------------

kapa.ai•17mo ago

<@478256651347165195> kapa.ai is still learning and improving, please let us how it did by reacting below

afraid-scarlet•17mo ago

is there any example for using fieldTransformer to set a custom key that will represent an object type property?

stormy-gold•17mo ago

here is the example

 <AntdInferencer
                                        fieldTransformer={(field) => {
                                            if (field.key === "title") {
                                                return {
                                                    ...field,
                                                    key: "custom-field",
                                                };
                                            }

                                            return field;
                                        }}
                                    />

 <AntdInferencer
                                        fieldTransformer={(field) => {
                                            if (field.key === "title") {
                                                return {
                                                    ...field,
                                                    key: "custom-field",
                                                };
                                            }

                                            return field;
                                        }}
                                    />

Actually, inferencer designed to speed up development process. you can copy generated code and customize according to your needs. Also, ofc you can use fieldTransformer to customize inferencer logic

afraid-scarlet•17mo ago

thank you very much for the reply, but i realized that my previous question is a bit misleading

afraid-scarlet•17mo ago

the actual problem that i'm facing is that the object needs to have one of the following properties: https://refine.dev/docs/packages/documentation/inferencer/#:~:text=LIST%20OF%20KEYS%20THAT%20CAN%20BE%20USED%20TO%20REPRESENT%20AN%20object%20TYPE%20PROPERTY

Inferencer | refine

@refinedev/inferencer is a package that provides a way to automatically generate views for resources based on the data structure. The aim is to reduce the amount of time spent on creating views for resources by generating the code automatically that can be customized easily.

afraid-scarlet•17mo ago

but my data looks like this

afraid-scarlet•17mo ago

the closest thing is "provinceName", which is not listed as one of the keys that can be used is there any way to add a custom key to this list?

stormy-gold•17mo ago

when you use like this, u can get provinceName for antd table

<AntdInferencer
    fieldTransformer={(field) => {
        if (field.key === "province") {
            return {
                ...field,
                accessor: "provinceName",
                type: "text",
            };
        }

        return field;
    }}
/>

<AntdInferencer
    fieldTransformer={(field) => {
        if (field.key === "province") {
            return {
                ...field,
                accessor: "provinceName",
                type: "text",
            };
        }

        return field;
    }}
/>

stormy-gold•17mo ago

i used this example data

            data: [
                {
                    id: 1,
                    cityName: "New York City",
                    province: {
                        id: "1",
                        provinceName: "New York Province",
                    },
                },
                {
                    id: 2,
                    cityName: "Izmir City",
                    province: {
                        id: "2",
                        provinceName: "Izmir Province",
                    },
                },
            ],

            data: [
                {
                    id: 1,
                    cityName: "New York City",
                    province: {
                        id: "1",
                        provinceName: "New York Province",
                    },
                },
                {
                    id: 2,
                    cityName: "Izmir City",
                    province: {
                        id: "2",
                        provinceName: "Izmir Province",
                    },
                },
            ],

afraid-scarlet•17mo ago

it works! thank you very much 🙏

stormy-gold•17mo ago

I'm glad to here that 🚀