afraid-scarlet•4w ago

Show retrieves only ID

export const ShowBusiness = () => {
  const { queryResult } = useShow({
    resource: 'businesses',
  });
  const { data, isFetching, isError, refetch } = queryResult;
  const business = data?.data;

  const go = useGo();
  const goToListPage = () => {
    go({
      to: { resource: 'businesses', action: 'list' },
      options: { keepQuery: true },
      type: 'replace',
    });
  };
  return (
    <Row justify="center" gutter={[32, 32]}>
      <Col xs={24} xl={8}>
        <Show
          canDelete
          canEdit
          goBack={<Button>←</Button>}
          breadcrumb={false}
          headerProps={{ onBack: goToListPage }}
        >
          <Text>{business?.id}</Text>
        </Show>
      </Col>
    </Row>
  );
};

export const ShowBusiness = () => {
  const { queryResult } = useShow({
    resource: 'businesses',
  });
  const { data, isFetching, isError, refetch } = queryResult;
  const business = data?.data;

  const go = useGo();
  const goToListPage = () => {
    go({
      to: { resource: 'businesses', action: 'list' },
      options: { keepQuery: true },
      type: 'replace',
    });
  };
  return (
    <Row justify="center" gutter={[32, 32]}>
      <Col xs={24} xl={8}>
        <Show
          canDelete
          canEdit
          goBack={<Button>←</Button>}
          breadcrumb={false}
          headerProps={{ onBack: goToListPage }}
        >
          <Text>{business?.id}</Text>
        </Show>
      </Col>
    </Row>
  );
};

Why do I get back only id of business?

2 Replies

kapa.ai•4w ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're encountering where only the id of the business is being retrieved is likely due to the default behavior of the useShow hook and the fields specified in the query. By default, the useShow hook will try to read the resource and id values from the current URL and fetch the record using the getOne method from the dataProvider. However, if the fields to be fetched are not explicitly defined, it might only return the id. To ensure that you retrieve all necessary fields of the business, you need to specify the fields in the metaData parameter of the useShow hook. Here is an example of how you can modify your code to include the necessary fields:

import { useShow } from "@refinedev/core";
import { Row, Col, Button, Typography } from "antd";
const { Text } = Typography;

export const ShowBusiness = () => {
  const { query } = useShow({
    resource: 'businesses',
    metaData: {
      fields: ["id", "name", "address", "contactNumber"] // Add the fields you need here
    }
  });
  const { data, isFetching, isError, refetch } = query;
  const business = data?.data;

  const go = useGo();
  const goToListPage = () => {
    go({
      to: { resource: 'businesses', action: 'list' },
      options: { keepQuery: true },
      type: 'replace',
    });
  };

  if (isFetching) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Something went wrong!</div>;
  }
return (
    <Row justify="center" gutter={[32, 32]}>
      <Col xs={24} xl={8}>
        <Show
          canDelete
          canEdit
          goBack={<Button>←</Button>}
          breadcrumb={false}
          headerProps={{ onBack: goToListPage }}
        >
          <Text>id: {business?.id}</Text>
          <Text>name: {business?.name}</Text>
          <Text>address: {business?.address}</Text>
          <Text>contactNumber: {business?.contactNumber}</Text>
        </Show>
      </Col>
    </Row>
  );
};

import { useShow } from "@refinedev/core";
import { Row, Col, Button, Typography } from "antd";
const { Text } = Typography;

export const ShowBusiness = () => {
  const { query } = useShow({
    resource: 'businesses',
    metaData: {
      fields: ["id", "name", "address", "contactNumber"] // Add the fields you need here
    }
  });
  const { data, isFetching, isError, refetch } = query;
  const business = data?.data;

  const go = useGo();
  const goToListPage = () => {
    go({
      to: { resource: 'businesses', action: 'list' },
      options: { keepQuery: true },
      type: 'replace',
    });
  };

  if (isFetching) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Something went wrong!</div>;
  }
return (
    <Row justify="center" gutter={[32, 32]}>
      <Col xs={24} xl={8}>
        <Show
          canDelete
          canEdit
          goBack={<Button>←</Button>}
          breadcrumb={false}
          headerProps={{ onBack: goToListPage }}
        >
          <Text>id: {business?.id}</Text>
          <Text>name: {business?.name}</Text>
          <Text>address: {business?.address}</Text>
          <Text>contactNumber: {business?.contactNumber}</Text>
        </Show>
      </Col>
    </Row>
  );
};

In this example, the metaData parameter is used to specify the fields you want to retrieve from the dataProvider. Adjust the fields according to the actual structure of your business data. For more details, you can refer to the useShow documentation (https://refine.dev/docs/data/hooks/use-show/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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