rare-sapphire•2y ago

I need to create a Create and an Edit page for a resource with a Many to Many relationships

Hello everyone, I am looking to create a Create and an Edit page for a resource with a many-to-many relationship. The relationship is between Categories and Posts. I would like to have a multiselect form field for the relationship Could you please point me to a tutorial and some parts of the documentation that explains this. Thanks.

12 Replies

xenial-black•2y ago

Hey @akeemovic, which dataprovider and ui package you are using?

rare-sapphire•2y ago

NestJSxCRUD and MaterialUI

xenial-black•2y ago

Would you like to try the inferencer package? It will create views based on your data and give you the preview and the code so you can change and customize it

xenial-black•2y ago

https://refine.dev/docs/api-reference/mui/components/inferencer/

Inferencer | refine

You can automatically generate views for your resources using @pankod/refine-inferencer. Inferencer exports MuiListInferencer, MuiShowInferencer, MuiEditInferencer, MuiCreateInferencer and MuiInferencer (which combines all in one place) components.

xenial-black•2y ago

Here’s the docs for Material UI. it also supports multi select inputs

rare-sapphire•2y ago

@aliemirs I'll try it out and let you know how it goes. Thanks Didn't work, the Inference always fails I was later able to figure out something, I got the UI right, but updating the data in the database doesn't work Another question, how do I add query strings to useDataGrid resource @aliemirs Could you please help with the above

xenial-black•2y ago

Hey @akeemovic, sorry for the late response. checking now 🙏 What kind of query params you want to append to the url?

rare-sapphire•2y ago

@aliemirs ?join=categories||id - so that I can get the categories to be used in the listing page for some reason whenever I turn on eager loading via the NestJSsCrud annotation, the server crashes when I load my refine app, but when I use Insomnia or other HTTP clients, it works fine. So I removed eager loading and now I want refine to make the call using the request query string options This query is for the "list" page.

xenial-black•2y ago

Just checked, currently we don't have join support in nestjsx-crud. But looks like an easy task. We use @nestjsx/crud-request under the hood while building the query. And join url param can be built with setJoin function of the query builder. So as I understand from your query, you have the relation with categories resource and you want to select the id field, right? I can do a quick update and release a new version to allow you to pass join by using metaData property which is in type JoinType:

export declare type QueryFields = string[];

export declare type QueryJoin = {
    field: string;
    select?: QueryFields;
};

export declare type QueryJoinArr = [string, QueryFields?]; 

type JoinType = QueryJoin | QueryJoinArr | Array<QueryJoin | QueryJoinArr>;

export declare type QueryFields = string[];

export declare type QueryJoin = {
    field: string;
    select?: QueryFields;
};

export declare type QueryJoinArr = [string, QueryFields?]; 

type JoinType = QueryJoin | QueryJoinArr | Array<QueryJoin | QueryJoinArr>;

So when using, you can do:

useDataGrid({
 metaData: {
  join: ["categories", ["id"]], // or { field: "categories", select: ["id"] }
 }
});

useDataGrid({
 metaData: {
  join: ["categories", ["id"]], // or { field: "categories", select: ["id"] }
 }
});

Does this look good and do you think this will resolve your issue?

rare-sapphire•2y ago

@aliemirs Yes, this would help a lot. Thank you very much.

xenial-black•2y ago

I will try to do the release in around an hour 🎯 https://github.com/refinedev/refine/pull/3429 Here's the PR. It will be released after passes the checks and merged 🚀 @pankod/refine-nestjsx-crud@3.36.0 is released from the next channel, you can upgrade your package with command:

npm i @pankod/refine-nestjsx-crud@next

npm i @pankod/refine-nestjsx-crud@next

to try out the metaData.join 🚀 Did you had any chance to try it out? @akeemovic

rare-sapphire•2y ago

Yes, I did. Thanks. I think the error is from the official NestJsxCrud library, it's been abandoned with many issues and bugs. I'm currently looking into its forks and would let you know if I need anything refine-specific Thanks for the update. It was nice.#