fair-rose
fair-roseβ€’17mo 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
xenial-blackβ€’17mo ago
Hey @akeemovic, which dataprovider and ui package you are using?
fair-rose
fair-roseβ€’17mo ago
NestJSxCRUD and MaterialUI
xenial-black
xenial-blackβ€’17mo 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
xenial-blackβ€’17mo ago
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
xenial-blackβ€’17mo ago
Here’s the docs for Material UI. it also supports multi select inputs
fair-rose
fair-roseβ€’17mo 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
xenial-blackβ€’17mo ago
Hey @akeemovic, sorry for the late response. checking now πŸ™ What kind of query params you want to append to the url?
fair-rose
fair-roseβ€’17mo 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
xenial-blackβ€’17mo 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?
fair-rose
fair-roseβ€’17mo ago
@aliemirs Yes, this would help a lot. Thank you very much.
xenial-black
xenial-blackβ€’17mo 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
fair-rose
fair-roseβ€’17mo 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.#