xenial-black•9mo ago

Show specific field of relation table in Show/:id of a table

Hi! I have a problem like this I have 2 table with relation one to many: products and categories. One product has a list of category. In the categories table, I have a field name: effective_date. Now I want to show the effective_date of the category on the List of product on product/show/:id page I'm using supabase as DB and ant design API. Can someone help me

5 Replies

kapa.ai•9mo ago

Hi @tandeptraiso1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, I can guide you on how to achieve this. You can use the useShow hook provided by refine to fetch the product details, and then use the useOne hook to fetch the category details related to the product. Here's a simplified example of how you can do this:

const { queryResult } = useShow<IProduct>();
const product = queryResult?.data?.data;

const { data: categoryData } = useOne<ICategory>({
  resource: "categories",
  id: product?.category.id,
  queryOptions: {
    enabled: !!product?.category.id,
  },
});

const { queryResult } = useShow<IProduct>();
const product = queryResult?.data?.data;

const { data: categoryData } = useOne<ICategory>({
  resource: "categories",
  id: product?.category.id,
  queryOptions: {
    enabled: !!product?.category.id,
  },
});

In the code above, useShow fetches the product details and useOne fetches the category details related to the product. To display the effective_date of the category in the product details, you can simply access it from the categoryData object like so: categoryData?.data?.effective_date. However, to fetch the category details along with the product details in a single request, you can use the select property in the meta object when calling useShow. The select property is used to perform relational database operations in Supabase. Here's how you can do it:

const { queryResult } = useShow<IProduct>({
  resource: "products",
  id: productId,
  meta: {
    select: "*, categories(effective_date)",
  },
});

const { queryResult } = useShow<IProduct>({
  resource: "products",
  id: productId,
  meta: {
    select: "*, categories(effective_date)",
  },
});

In the code above, useShow fetches the product details along with the effective_date of the related categories. You can then access the effective_date from the queryResult object. Please note that you need to replace productId with the actual id of the product you want to fetch. For more information, you can refer to the refine documentation (https://refine.dev/docs) and the refine blog (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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

xenial-black•9mo ago

@kapa.ai

const { queryResult } = useShow<IProduct>();
const product = queryResult?.data?.data;

const { data: categoryData } = useOne<ICategory>({
  resource: "categories",
  id: product?.category.id,
  queryOptions: {
    enabled: !!product?.category.id,
  },
});

const { queryResult } = useShow<IProduct>();
const product = queryResult?.data?.data;

const { data: categoryData } = useOne<ICategory>({
  resource: "categories",
  id: product?.category.id,
  queryOptions: {
    enabled: !!product?.category.id,
  },
});

a product contain a List of category, so can we use useOne here?

kapa.ai•9mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're correct, if a product contains a list of categories, useOne would not be the appropriate hook to use as it is designed to fetch a single record. Instead, you should use the useList hook, which is designed to fetch a list of records. Here's how you can modify the code to use useList:

const { queryResult } = useShow<IProduct>();
const product = queryResult?.data?.data;

const { data: categoryData } = useList<ICategory>({
  resource: "categories",
  filter: { id: { "$in": product?.category.ids } },
  queryOptions: {
    enabled: !!product?.category.ids,
  },
});

const { queryResult } = useShow<IProduct>();
const product = queryResult?.data?.data;

const { data: categoryData } = useList<ICategory>({
  resource: "categories",
  filter: { id: { "$in": product?.category.ids } },
  queryOptions: {
    enabled: !!product?.category.ids,
  },
});

In the code above, useList fetches the category details related to the product. The filter property is used to specify which categories to fetch based on their ids. You need to replace product?.category.ids with the actual ids of the categories related to the product. You can then access the effective_date of each category from the categoryData object. For more information, you can refer to the refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

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