deep-jade•7mo ago

Indirect relational data on Appwrite adapter in Refine

I currently want to add an indirect relation to a resource in Refine. I have two database and they have their own collections. But in each database there are some collections that they have indirect relationship. For example in Catalog database I have Product collection. And on the Commerce database I have OrderItems collection. OrderItems collection should have the ProductId but since Appwrite doesn't let us have a relationship or does not return related data on the query result, we need to find a way to get those indirect related data to the Refine table. Does anyone know how t accomplish this?

8 Replies

kapa.ai•7mo ago

Hi @Onder. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To handle indirect relational data in Refine using the Appwrite adapter, you can leverage Refine's data hooks such as useOne and useMany to manage data relationships. Since Appwrite does not support direct relationships in queries, you will need to manually fetch the related data and combine it within your component. Here's a step-by-step guide to achieve this: 1. Fetch the OrderItems Data: Use the useMany hook to fetch the OrderItems from the Commerce database. 2. Fetch the Product Data: Use the useOne hook to fetch the Product data for each OrderItem based on the ProductId. 3. Combine the Data: Combine the fetched Product data with the OrderItems data to display in your Refine table. Here is an example of how you can implement this:

import React from "react";
import { useMany, useOne } from "@refinedev/core";
import { Table, Space } from "antd";
import { dataProvider } from "@refinedev/appwrite";
import { appwriteClient } from "src/appwrite";

const OrderItemsList: React.FC = () => {
    const { data: orderItemsData, isLoading: orderItemsLoading } = useMany({
        resource: "orderItems",
        ids: [], // Add logic to fetch the relevant order item IDs
    });

    const productIds = orderItemsData?.data.map(item => item.ProductId) || [];
    const { data: productsData, isLoading: productsLoading } = useMany({
        resource: "products",
        ids: productIds,
    });

    const combinedData = orderItemsData?.data.map(orderItem => {
        const product = productsData?.data.find(p => p.id === orderItem.ProductId);
        return {
            ...orderItem,
            productName: product?.name,
        };
    });

    if (orderItemsLoading || productsLoading) {
        return <div>Loading...</div>;
    }
return (
        <Table dataSource={combinedData} rowKey="id">
            <Table.Column title="Order Item ID" dataIndex="id" key="id" />
            <Table.Column title="Product ID" dataIndex="ProductId" key="ProductId" />
            <Table.Column title="Product Name" dataIndex="productName" key="productName" />
            {/* Add more columns as needed */}
        </Table>
    );
};

export default OrderItemsList;

import React from "react";
import { useMany, useOne } from "@refinedev/core";
import { Table, Space } from "antd";
import { dataProvider } from "@refinedev/appwrite";
import { appwriteClient } from "src/appwrite";

const OrderItemsList: React.FC = () => {
    const { data: orderItemsData, isLoading: orderItemsLoading } = useMany({
        resource: "orderItems",
        ids: [], // Add logic to fetch the relevant order item IDs
    });

    const productIds = orderItemsData?.data.map(item => item.ProductId) || [];
    const { data: productsData, isLoading: productsLoading } = useMany({
        resource: "products",
        ids: productIds,
    });

    const combinedData = orderItemsData?.data.map(orderItem => {
        const product = productsData?.data.find(p => p.id === orderItem.ProductId);
        return {
            ...orderItem,
            productName: product?.name,
        };
    });

    if (orderItemsLoading || productsLoading) {
        return <div>Loading...</div>;
    }
return (
        <Table dataSource={combinedData} rowKey="id">
            <Table.Column title="Order Item ID" dataIndex="id" key="id" />
            <Table.Column title="Product ID" dataIndex="ProductId" key="ProductId" />
            <Table.Column title="Product Name" dataIndex="productName" key="productName" />
            {/* Add more columns as needed */}
        </Table>
    );
};

export default OrderItemsList;

In this example: - useMany is used to fetch the OrderItems and Products data. - The ProductId from each OrderItem is used to fetch the corresponding Product. - The data is then combined to include the Product details in the OrderItems list. This approach ensures that you can display related data from different collections in your Refine table, even though Appwrite does not support direct relationships in queries. For more information on handling data relationships in Refine, you can refer to the Data Fetching (https://refine.dev/docs/guides-concepts/data-fetching/#relationships) guide. If you need further customization or have specific requirements, you can also explore the useSelect (https://refine.dev/docs/core/hooks/use-select/) hook for managing select components in forms, as detailed in the Forms Relationships (https://refine.dev/docs/guides-concepts/forms/#relationships-) guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

deep-jadeOP•7mo ago

Any real person help?

rare-sapphire•7mo ago

Hey @Onder you can leverage multiple data providers I guess. https://refine.dev/docs/guides-concepts/data-fetching/#multiple-data-providers For default data provider, you can use hooks as it is, for additional ones, you need to pass dataProvider name to the hooks.\

Data Fetching | Refine

Data is essential for any UI Application and these applications are a bridge between users and the underlying data source(s), making it possible for users to interact with data in a meaningful way.

deep-jadeOP•7mo ago

thanks for the info i'll check hey batu, i can generate another data provider but two database exists on the same project so i think i don't need to define multiple appwriteClient. what i want to do is i want to have the related data of Auth user inside my collection even though collection cannot have direct relationship with Auth user

rare-sapphire•7mo ago

Joining tables from different dbs is a different problem. Not really related to Refine. You can use useList query to fetch initial records and then extract relation ids and use useMany hooks with other data provider.

deep-jadeOP•7mo ago

teşekkürler. yes i will try that thanks. if can't feasible i'll move to supabase (it's very early stages of dev :))

rare-sapphire•7mo ago

Good luck 🍀

Indirect relational data on Appwrite adapter in Refine

Did you find this page helpful?