Error that I can see in the Console in the browser is:
Uncaught (in promise) Error: field "adyenStatus" not found in type: 'Payouts'

My code looks like this:

src/pages/Payouts/helpers/mapPayouts.ts

import { formatDateTime } from '@utils/helpers/dateTimeFormatter/dateTimeFormatter';
import { formatNOK } from '@utils/helpers/formatNOK';

import { Payout } from '../types/Payouts.type';

export function mapPayouts(payouts?: Payout[]) {
  return (payouts || []).map((pot) => {
    return {
      ...pot,
      date: formatDateTime(pot.date),
      orderValue: formatNOK(Number(pot.orderValue)),
      amount: formatNOK(Number(pot.amount)),
    };
  });
}

src/pages/Payouts/hooks/usePayoutsQuery/usePayoutsQuery.ts

import { OperationVariables, gql, useQuery } from '@apollo/client';

import { Payout } from '../../types/Payouts.type';

export interface PayoutsType {
  payoutsAggregate: {
    aggregate: {
      count: number;
    };
  };
  payouts: Payout[];
}

export const GET_PAYOUTS = gql`
  query Payouts($offset: Int, $limit: Int, $orderBy: [PayoutsOrderBy!], $where: PayoutsBoolExp) {
    payoutsAggregate {
      aggregate {
        count
      }
    }
    payouts(offset: $offset, limit: $limit, orderBy: $orderBy, where: $where) {
      # payouts list data
      id: payoutRef
      date: createdAt
      orderValue: totalOrderValue
      amount: payoutAmount
      status
      payoutAmount
      currency
      adyenStatus
    }
  }
`;

export default function usePayoutsQuery(variables?: OperationVariables) {
  return useQuery<PayoutsType>(GET_PAYOUTS, { variables });
}

src/pages/Payouts/types/Payouts.type.ts

export interface Payout {
  id: string;
  date: string;
  orderValue: string;
  amount: string;
  status: PayoutStatus;
  currency: string;
  adyenStatus: string;
}

export enum PayoutStatus {
  DISBURSED = 'Disbursed',
  HOLD = 'Hold',
  DRAFT = 'Draft',
}

src/pages/Payouts/Payouts.tsx

import { AppTable } from '@/modules/AppTable';
import { Box, Card, Typography } from '@mui/material';
import { createColumnHelper } from '@tanstack/react-table';
import { useTranslation } from 'react-i18next';
import { FinancialClause } from '@components/FinancialClause/FinancialClause';
import Page from '@components/Page/Page';

import { Payout, PayoutStatus } from './types/Payouts.type';
import usePayouts from './usePayouts/usePayouts';

export const getPayoutStatusColor = (payoutStatus: PayoutStatus) => {
  const payoutStatusColor = {
    DISBURSED: '#ffffff',
    HOLD: '#cccccc',
    DRAFT: '#eeeeee',
  };
  /* @ts-expect-error string vs payoutStatus? */
  return payoutStatusColor[payoutStatus.toUpperCase()];
};

export function Payouts() {
  const {
    isLoading,
    page,
    pageSize,
    payouts,
    handleSortChange,
    handlePageChange,
    handlePageSizeChange,
    handleFilterChange,
  } = usePayouts();
  const { t } = useTranslation();

  const columnHelper = createColumnHelper<Payout>();
  const columns = [
    columnHelper.accessor('id', {
      header: t('payouts_page.table.header.ref') as string,
      cell: ({ row: { original } }) => <>#{original.id}</>,
    }),
    columnHelper.accessor('date', {
      header: t('payouts_page.table.header.date') as string,
    }),
    columnHelper.accessor('amount', {
      header: t('payouts_page.table.header.amount') as string,
    }),

  console.log(payouts.payOutsData);

  return (
    <Page title={t('payouts_page.title')}>
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Typography variant="h4" paragraph>
            {t('payouts_page.title')}
          </Typography>
        </Box>
        <FinancialClause />
        <Card>
          <AppTable
            columns={columns}
            data={payouts.payOutsData ?? []}
            filterPlaceholder={t('payouts_page.table.filter_table_placeholders')}
            isFetching={isLoading}
            page={page}
            pageSize={pageSize}
            rowCount={payouts?.payOutsAggregate.aggregate.count ?? 0}
            onFilterChange={handleFilterChange}
            onPageChange={handlePageChange}
            onPageSizeChange={handlePageSizeChange}
            onSortChange={handleSortChange}
          />
        </Card>
      </Box>
    </Page>
  );
}

This is how the API looks in Hasura Console:

query Payouts($offset: Int, $limit: Int, $orderBy: [PayoutsOrderBy!], $where: PayoutsBoolExp) {
    payoutsAggregate {
      aggregate {
        count
      }
    }
    payouts(offset: $offset, limit: $limit, orderBy: $orderBy, where: $where) {
      # payouts list data
      id: payoutRef
      date: createdAt
      orderValue: totalOrderValue
      amount: payoutAmount
      status
      payoutAmount
      currency
      adyenStatus

      # singular payout data
      order {
        id
        orderRef
        orderDate
        singleOrder
        status
        numberOfCarts
        productType {
          groupSize
          name
          groupPrice
          soloPrice
        }
        carts {
          items {
            totalCost
       }
     }
    }
  }
  }

I can’t understand why this field is not visible. I have tested some other fields, like currency and added it and it works fine. Anyone can advice on what is wrong here?