foreign-sapphire•5mo ago

Reference/Relations between resources

hi I'd love to add relations between resources in my table Is it possible with refine? Im looking for something like <ReferenceField/> in react admin im using nestjsx/crud as a backend if that helps

3 Replies

kapa.ai•5mo ago

Hi @danyalutsevich. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible to add relations between resources in your table using Refine. Refine provides hooks like useOne and useMany to handle data relations, which allow you to easily display related data in your components. For forms, you can use the useSelect hook to manage select inputs that fetch data from related resources. Here's an example of how you can add a category field to the products resource using the useSelect hook:

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { useSelect } from "@refinedev/core";

export const EditPage: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading, queryResult: productQueryResult },
        register,
        handleSubmit,
    } = useForm<IProduct>({
        refineCoreProps: {
            resource: "products",
            id: 1,
            action: "edit",
        },
    });
    const product = productQueryResult?.data?.data;

    const { options: categoryOptions } = useSelect({
        resource: "categories",
    });

    return (
        <form onSubmit={handleSubmit(onFinish)}>
            <select {...register("category_id")}>
                {categoryOptions?.map((category) => (
                    <option key={category.id} value={category.id}>
                        {category.name}
                    </option>
                ))}
            </select>
            {/* Other form fields */}
            <button type="submit" disabled={formLoading}>
                Save
            </button>
        </form>
    );
};

import React from "react";
import { useForm } from "@refinedev/react-hook-form";
import { useSelect } from "@refinedev/core";

export const EditPage: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading, queryResult: productQueryResult },
        register,
        handleSubmit,
    } = useForm<IProduct>({
        refineCoreProps: {
            resource: "products",
            id: 1,
            action: "edit",
        },
    });
    const product = productQueryResult?.data?.data;

    const { options: categoryOptions } = useSelect({
        resource: "categories",
    });

    return (
        <form onSubmit={handleSubmit(onFinish)}>
            <select {...register("category_id")}>
                {categoryOptions?.map((category) => (
                    <option key={category.id} value={category.id}>
                        {category.name}
                    </option>
                ))}
            </select>
            {/* Other form fields */}
            <button type="submit" disabled={formLoading}>
                Save
            </button>
        </form>
    );
};

In this example, the useSelect hook fetches categories from the categories resource and populates a select input with these categories. For more information, you can refer to the useSelect documentation (https://refine.dev/docs/core/hooks/use-select/). Additionally, since you are using nestjsx/crud as a backend, you can connect it to Refine using the provided data provider example: NestJs CRUD Data Provider (https://github.com/refinedev/refine/tree/master/examples/data-provider-nestjsx-crud). For more details on handling relationships in forms, you can check the Refine documentation on forms and relationships (https://refine.dev/docs/guides-concepts/forms/#relationships-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

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

foreign-sapphireOP•5mo ago

i'd love to implement it in list page