I am using refine to show a page of data. This idea is to have a view with more detail, than the raw entity, on my ‘show’ page. The Address and the voters that live at that address, in a DataGrid.

It’s something to do with loading the page because if I update the code, the page works until a refresh.

The data api returns

{
  "id": 1,
  "houseNameNo": "9",
  "street": "Main Street",
  "postCode": "PE8 6PR",
  "voters": [
    {
      "id": 1,
      "firstName": "Fred",
      "lastName": "Flinstone",
      "supporter": false
    },
    {
      "id": 2,
      "firstName": "Wilma",
      "lastName": "Flinstone",
      "supporter": false
    }
  ]
}

The refine .tsx page looks like this.

"use client";

import { Stack, Typography } from "@mui/material";
import { useShow, useParsed } from "@refinedev/core";
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
import { DataGrid, type GridColDef } from "@mui/x-data-grid";

export default function CategoryShow() {
  const { id } = useParsed();
  const { queryResult } = useShow({
    resource: "addresses/show", id
  });
  const { data, isLoading } = queryResult;
  const record = data?.data;

  // static data works
  const rows = [
  {id: 3, firstName: 'Barny', lastName: 'Rubble', supporter: false},
  {id: 4, firstName: 'Betty', lastName: 'Rubble', supporter: false},
  ];

  const columns: GridColDef[] = [
  { field: 'firstName', headerName: 'First Name', width: 150 },
  { field: 'lastName', headerName: 'Last Name', width: 150 },
  ];

  console.log(rows);
  console.log(record?.voters);

  return (
    <Show isLoading={isLoading}>
      <Stack gap={1}>
        <Typography variant="body1" fontWeight="bold">
          {"ID"}
        </Typography>
        <TextField value={record?.id} />
        <Typography variant="body1" fontWeight="bold">
          {"House Name/No"}
        </Typography>
        <TextField value={record?.houseNameNo} />
        <Typography variant="body1" fontWeight="bold">
          {"Street"}
        </Typography>
        <TextField value={record?.street} />
        <Typography variant="body1" fontWeight="bold">
        {"Post Code"}
        </Typography>
        <TextField value={record?.postCode} />
      </Stack>
      <br/>
      <Typography variant="body1" fontWeight="bold">
      {"Voters"}
      </Typography>
      <DataGrid rows={record?.voters} columns={columns} />
    </Show>
  );
}