Help with useList and Hasura

[henraso]

I am not able to retrieve data response using Hasura as the data provider, and the hook useList.

This is my query:

export const DASHBOARD_TASKS_CHART_QUERY = gql`
    query DashboardTasksChart(
        $where: TaskStagesBoolExp!
        $orderBy: [TaskStagesOrderBy!]
        $limit: Int!
        $offset: Int!
    ) {
        taskStages(where: $where, orderBy: $orderBy, limit: $limit, offset: $offset) {
            title
            tasksAggregate {
                aggregate {
                    count(columns: id)
                }
            }
        }
    }
`;

This is the code using useList and the query:

export const DashboardTasksChart: React.FC = () => {
  const { list } = useNavigation();
  const { data, isError, error } = useList<
    GetFieldsFromList<DashboardTasksChartQuery>
  >({
    resource: "taskStages",
    pagination: {
      pageSize: 4,
    },
    filters: [
      {
        field: "title",
        operator: "contains",
        value: "active",
      },
    ],
    sorters: [
      {
        field: "title",
        order: "asc",
      },
    ],
    meta: { 
      gqlQuery: DASHBOARD_TASKS_CHART_QUERY,
      variables: { offset: 0, limit: 10
      },
    },
  });
  if (isError) {
    console.error("Error fetching task chart data", error);
    return null;
    }
  console.log("Raw data:", data);
  const tasksData = useMemo(() => {
    if (!data?.data?.length) {
      return [];
    }
    return data?.data
      .map((stage) => ({
        title: stage.title,
        // value: stage.tasksAggregate?.aggregate?.count || 0,
        // value: stage.tasksAggregate?.[0]?.count?.id ?? 0,
      }))
      .filter(
        (stage) =>
          stage.value !== null && stage.value !== undefined && stage.value > 0,
      )
      .sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
  }, [data?.data]);

...

This is the data response:

{
    "data": {
        "taskStages": [
            {
                "title": "active",
                "tasksAggregate": {
                    "aggregate": {
                        "count": 1
                    }
                }
            },
            {
                "title": "inactive",
                "tasksAggregate": {
                    "aggregate": {
                        "count": 1
                    }
                }
            }
        ]
    }
}

All I get in the console error is the following:

TypeError: Cannot read properties of undefined (reading 'aggregate')
    at getList (@refinedev_hasura.js?v=0869cb55:12770:38)

Can anybody help?

I suspect it is necessary to edit getList to accept nested queries, but I do not have the necessary competence to look further into that.

Thanks in advance.

[BatuhanW]

Hey @henraso it's hard to understand the issue from the given details. Could you provide a minimal reproducible example?