Give feedbacks for Inferencer! 🐣

[salihozdemir]

We are happy to announce that we are releasing a new feature for refine: Inferencer! 🎉

Inferencer is a new package that allows you to create sample views for your resources according to your API response. It is a great way to get started with refine. You can use it to create list, show, edit and create views for your resources with a single line of code. 🚀

You can check out the documentation for more details.

We are looking for feedbacks on Inferencer. If you encounter any issues or have any suggestions, please let us know in the comments below. 🙏

[pinale]

thanks guys to have gifted us this awesome component. 🙏
i've tried it with the most complex https://api.fake-rest.refine.dev/inferences entity

• the list component seems already a solid rock 🚀

  • if a related entity that is an array (inferences->category E.G) has not be defined in the <Refine> component the Inference component doesn't show the entity
  • if a related entity that is an object (not an array) (inferences->user E.G) has not be defined in the <Refine> component the Inference component shows only the first property (i suppose)
    Interences->User shows the id, the inferences->additional shows the title
    shouldn't be better to show the entire json in that case? maybe shortened with ellips and a popup that show the entire content when the mouse is over? (my two cents)

• the create component i suppose needs more time, some complex properties are difficult to be mapped with form components

  • e.g. how to render inferences->checks, inferences->additional?
  • what are the criteria that make a field required?

is it possible to hide the showcode and feedback button? even if the component is intended for developement purpose only (for now) can be usefull to hide them
Awesome the showcode functionality 🚀

i'd like to know if is possible to customize this component without rewrite a custom one using the output provided by the showcode button
for example adding a custom column..., o some more complex like customize the layout

i've asked this more in general for all components here: #3071

i think this can be a killer component if it let the possibility to customize itself
good job guys!

[omeraplak]

Hey @pinale ,

if a related entity that is an array (inferences->category E.G) has not be defined in the component the Inference component doesn't show the entity

We've fixed this issue on @pankod/[email protected]. You can update your refine dependencies with npm run refine update or npx @pankod/refine-cli update commands.

[pinale]

hi,
although the ListInference apparently works

i've got these errors in the browser console

MuiListInferencer --> 400 bad request

http://localhost:81/v1/databases/6357a1b12a5c0d9e41b2/collections/$collections/documents/6357a26137534e7f8276
http://localhost:81/v1/databases/6357a1b12a5c0d9e41b2/collections/$databases/documents/6357a1b12a5c0d9e41b2
http://localhost:81/v1/databases/6357a1b12a5c0d9e41b2/collections/$database/documents/6357a1b12a5c0d9e41b2
http://localhost:81/v1/databases/6357a1b12a5c0d9e41b2/collections/$collection/documents/6357a26137534e7f8276

{"message":"Invalid collectionId: UID must contain at most 36 chars. Valid chars are a-z, A-Z, 0-9, and underscore. Can't start with a leading underscore","code":400,"type":"general_argument_invalid","version":"1.1.1"}

MuiEditInferencer --> 404 not found

http://localhost:81/v1/databases/6357a1b12a5c0d9e41b2/collections/6357a1b63ef8d80b30c6/documents/1

{"message":"Document with the requested ID could not be found.","code":404,"type":"document_not_found","version":"1.1.1"}

i've configured a simple appwrite collection with an id (integer) attribute and a name (string) attribute.
i've missing something or there is some other problem with inferencer?

---

PS : other queries like this generated by the inferencer component works

http://localhost:81/v1/databases/6357a1b12a5c0d9e41b2/collections/6357a1b63ef8d80b30c6/documents?queries%5B0%5D=offset%280%29&queries%5B1%5D=limit%2825%29

[salihozdemir]

Hey @pinale,

Is a label defined for your resources? Names such as Appwrite whose resource name is number or containing invalid characters can cause errors when creating variable names. However, if you define label for your resources, the label name will be used instead of the resource name to create variable names.

Could you share the results after adding label to your resources?

[pinale]

updated to @pankod/[email protected] and i'm using the label option to name resources

<Refine
          dataProvider={dataProvider(appwriteClient, {
            databaseId: "6357a1b12a5c0d9e41b2", 
          })}
          liveProvider={liveProvider(appwriteClient, {
            databaseId: "6357a1b12a5c0d9e41b2",
          })}
          liveMode="auto"
          authProvider={authProvider}
          LoginPage={AuthPage}
          notificationProvider={notificationProvider}
          Layout={Layout}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          routerProvider={routerProvider}
          resources={[
            {
              name: "6357a1b63ef8d80b30c6",
              list: MuiListInferencer,
              edit: MuiEditInferencer, 
              options: {
                label: 'Movies'
              }
            }
            ,
            {
              name: "6357a26137534e7f8276",
              list: MuiListInferencer, 
              edit: MuiEditInferencer, 
              options: {
                label: 'Actors'
              }
            }

          ]}
        />

Unfortunately i can't provider you an Appwrite live instance to test, because with https://gitpod.io/#https://github.com/appwrite/integration-for-gitpod (one click setup, like your documentation claims) i can't connect 'cause CORS problems.
So i run appwrite on my machine with docker

Any idea how to solve CORS problem with https://gitpod.io/#https://github.com/appwrite/integration-for-gitpod just to use for future tests?

[aliemir]

Hey @pinale,

about the CORS issue; appwrite/appwrite#2687 (comment) please check this one, I think this is the problem 😅

There's a documentation in progress about how the inferencer works and how it infers the fields and values to be rendered. The errors are coming from that process actually.

Let's say we have a field category_id in our record. We're stripping the _id part and send a request for categories resource to the API, if that fails we send another one as category.

Browsers log the failed network requests into the console; I've made some changes in attempt to hide our failed requests under a group to be easily distinguished from other errors. (See #3173, it will be merged and released soon)

Also, if you want, you can check the Hide network in console settings to hide Network errors.

Also added fieldTransformer prop to the inferencer components so you can hide the fields you don't want to see in the preview and also the code for those fields will not be provided in the "Show Code" button.

fieldTransformer can also be used to manually pass relation resources to the fields. This can especially be helpful for Appwrite data providers because Appwrite generates a random IDs for the collections/databases/documents which we have no way to determine in the inferencer. 🚀 🚀

Looking forward for your feedback after we release these changes 🙏

[dipbazz]

First of all, I would like to appreciate your awesome work guys. After trying out this package what I figured out is when we have a resource name that is complicated then it fails to build the list page. For example, if I have a resource name as users/account then the package will try to create a component with Users/accountList which will throw an error as SyntaxError: Unexpected token, expected ";" . What I would like to suggest is that instead of creating the component name from the resource name, if the package tries to build the name from the label if present then that would help to create a component without any error. Because sometimes we can have a complex resource name and we can override the resource label using the options but that is not reflected in the package Inferencer.

[omeraplak]

Hey @dipbazz ,
Thank you for your feedback. We created #3123 and will release it Monday ⚡️

[omeraplak]

Hey @dipbazz ,
We've released @pankod/[email protected]. You can update your refine dependencies with npm run refine update or npx @pankod/refine-cli update commands.

[aliemir]

Just created a PR for another update on this and changed the component name generator function a little bit to output better names;

Now, if you have a resource named 1234abcd without a label, the component will be named with action at the first, like for the list action it will be List1234abcd. Kept the other conditions as is.

No breaking or no big changes but just wanted to mention 😅

[dj-fiorex]

Hello everybody! finally the inferencer for Refine!!! I would like to make a question: i'm using supabase as data provider, how can i structure my db so inferencer knows about the relationship? right now i have two tables: items and categories, and items have a column category_id
Thanks!

EDIT:
looking at the code of useRelationFetch it seems that the field must have a property relation? Where can i set this?

[aliemir]

You don't need to add Inferencer component to the categories resource, only the ones you want to use the Inferencer should be enough to work (Does not change a thing if you add it or not)

Seeing the category resource based on category_id of item, in list and also being able to edit the category_id by seeing the label of the category is also the expected behavior 🤔 I wonder what's causing the issue in your case. I'll try to reproduce the issue and fix it as soon as possible (hopefully today). I'll update you when I have any news. 🙏

[dj-fiorex]

Meanwhile i'm trying to generate a new refine project with superplate but it gives me this error: anyone has some ideas?

$ npm create refine-app my-project
- Checking provided source "undefined"
node:events:368
      throw er; // Unhandled 'error' event
      ^

Error: EPERM: operation not permitted, rename 'C:\Users\user\Desktop\1671094425008-7915057495246989\superplate-core-plugins-master' -> 'C:\Users\user\Desktop\.20221115-9416-l0p3vf.wp48n'
Emitted 'error' event on GithubDownloader instance at:
    at C:\Users\user\AppData\Local\npm-cache\_npx\678fa4c4b5e44e85\node_modules\github-download\lib\github-download.js:131:26
    at C:\Users\user\AppData\Local\npm-cache\_npx\678fa4c4b5e44e85\node_modules\graceful-fs\polyfills.js:111:19
    at callback (C:\Users\user\AppData\Local\npm-cache\_npx\678fa4c4b5e44e85\node_modules\graceful-fs\polyfills.js:306:20)
    at FSReqCallback.oncomplete (node:fs:199:5) {
  errno: -4048,
  code: 'EPERM',
  syscall: 'rename',
  path: 'C:\\Users\\user\\Desktop\\1671094425008-7915057495246989\\superplate-core-plugins-master',
  dest: 'C:\\Users\\user\\Desktop\\.20221115-9416-l0p3vf.wp48n'
}

[omeraplak]

Hey @dj-fiorex ,
Could you try the latest version?
npm create refine-app@latest my-project

[dj-fiorex]

Ok now i can create a new project but when i need to select the options i didn't see che cursor move, i mean i can select the third element but the green highlighted options didn't change

[omeraplak]

Can you create a separate Github issue? 🚀

[barrynerd]

Is there a way to override the column label that Inferencer assigns?

[salihozdemir]

Hey @barrynerd,

Inferencer is not recommended to use production. It developed to provide a quick starting point instead of starting from scratch. So, you can create your pages by using the Inferencer auto-generated page codes just copy the code. Then, you can customize as you want.

[barrynerd]

Thanks! I am definitely using this for a proof of context, not production. But when you say "copy the code", can you be more specific please?

[salihozdemir]

On the Inferencer page, like here, click on the "Show Code" button in the bottom right corner of the page. Then, you can see the page code generated by Inferencer. Click on the "Copy" button to copy the code. Later, you can use this code when you create a new page and you can make any customizations you want.

[barrynerd]

Awesome - that is going to save me so much time! That's what I came here for!

[sirily11]

when there is no data exists in the database, the admin will throw an error saying that: "Error fetching resources". However, the client did return an empty array in the response body.

Client: Supabase client with Next.JS

[khalidkhankakar]

you have written the refine only in react-typescript
Is there version available for the react-js of refine

[t-thompson]

First of all thanks for such a great library. Im having some issues with the inferencer and Appwrite integration. The docs say you can use fieldTransformer prop on Inferencer components to change the resource for a relation. I have tried several times with no success and there isn't much documentation on it yet. could you give an example of how this would be done?

More specifically, I have two attributes on each Appwrite collection parentCollection and parentId. Each record in these collections can be a child of one of multiple collections. parentCollection would contain the Appwrite $collectionId of the parent and parentId would contain the $id of the parent record within that collection.

Also not sure how to handle user or team relations with appwrite since they're not accessed through the same endpoint

[mivvan]

How can i disable "Show code" and "Give feedback" buttons in my project?

[brandoncamerer]

Short Answer, you can't.

[c608345]

https://refine.dev/docs/packages/inferencer/#hiding-the-code-viewer-and-development-warning

[brandoncamerer]

Please make it easy to hide these buttons on local dev environment. Forcing me to use them is really frustrating. .

[brandoncamerer]

When you pop this feature up it is not immediately clear how to hide it from the UX. The UX infers that you should immediatley know you have to click the icon to hide it. See Jakob's Law when it comes to similiar UX

Easy Fix

[anmnev]

Hi, thanks for creating this great tool!
I am just starting using it and not sure whether it is something I did wrong or it is a bug. The inferencer seems to generate an incorrect import statement for the list view:

import {
    useDataGrid,
    EditButton,
    ShowButton,
    DeleteButton,
    List,
    Checkbox,
} from "@refinedev/mui";

The error: TS2305: Module '"@refinedev/mui"' has no exported member 'Checkbox'.

Replacing with the following seems to fix it:
import Checkbox from '@mui/material/Checkbox';

[omeraplak]

Hey @anmnev ,
Thank you for contacting us. We've fixed it on @refinedev/[email protected]. Could you approve this fix?

[anmnev]

Hi, thanks, the fix has worked for me.

[ivorpad]

Next.js + Mantine + No Auth.

When clicking Blog Posts / 'Create'

[aliemir]

Hey @ivorpad sorry for the issue 🙏 Looks like a temporary issue due to corrupted backend data. Still, we'll add some more checks and controls over this to avoid happening again. Added to our to do and prioritized. 🚀 🚀

[timdamen]

Is there a way to use tableProps or formProps from strapi 4 to populate relations?

[salihozdemir]

Hey @timdamen,

You can pass meta to Inferencer component to get the data you need. You can find more information about it here: https://refine.dev/docs/packages/documentation/inferencer/#usage-with-graphql-backends-and-meta-values

There is an example of how to use it with GraphQL backend. You can use the same approach with Strapi 4.

Here is the example: https://github.com/refinedev/refine/tree/next/examples/inferencer-graphql-hasura

Please let me know if it works with Strapi 4 or not. So we can update the documentation accordingly. 🚀

[IsTheJack]

Checkboxes should send "false" instead of null to the backend if the checkbox is pristine in "create" pages.

[BatuhanW]

That's a good idea we need to discuss. On one hand, setting checkbox to null in pristine state make sense, because we didn't get any input from the user, especially if checkbox field is nullable, but on the other hand, since checkbox can have 2 states, it would make sense to infer unchecked checkbox as false.

[yildirayunlu]

Is there a standard for this in HTML? On the other hand, we must also consider the default values of the UI libraries.

[bombillazo]

Found a bug (#4390) regarding using string IDs instead of numeric ids with the inferencer Component.

Additional feedback I would give is to have the ability to enhance/add to the different CRUD inferencer components to be able to navigate between a resource's CRUD pages and to handle custom data that, so far, the inferencer does not render/show.

[aliemir]

Hey @bombillazo, sorry for the issue. We've acknowledged the bug and added to our to-do list for a fix. We'll be releasing a fix next week.

About your feedback, I'm having hard time understanding the actual request here, can you please explain a bit more about your feedback and how will it affect your work if implemented? 🙏

[bombillazo]

Hey, I meant like being able to customize more the callbacks and props of the components that make up the inferencer. I know ifs a bit complex but it would allow us to quickly connect our logic to the inference component to trigger things like update a row, delete, add, etc.

[SENSIB0I]

Any thoughts about adding support for custom components for inferencer?
I was trying to contribute and make changes to basic list component using patch-package but I don't know why it doesn't takes my updates :(

[linhdatran3]

Hi team, I have a problem with the title of <Table.Column ${title}.../>. I used the <AntdListInferencer /> to generate a table but the name of columns is not good. Which means that I want to adjust the name of columns. ex: hungs.fields.id => id.

I checked my BE and the demo-strapi-v4 that are the same structure. Can you help find the problem.

p/s: Actually I can cop in full the code in the auto-generate and add my custome. BUT I really want to know why my code is the same as the example (category in the documents ) that was had the bug in thetitle of <Table.Column/>

[linhdatran3]

there are my BE and strap-demo-be

[hambanet]

Look at the auto-generated code:

https://refine.dev/docs/api-reference/core/hooks/translate/useTranslate/

[kpervin]

It's unclear to me how to change the accessor when using Inferencer. You mention using fieldTransformer, but regardless the Inferencer seems to always generate buttons that look for an id field. I have a table that uses name as the primary key, so how does one use the Inferencer to operate on PKs that are not named id? If there isn't a way, can we have a prop to explicitly define the PK?

[s8186255]

always lose some fields when using inference.how can I config all fields from api?