Hasura Graphql 未捕获（承诺中）错误：在类型：“付款”中找不到字段“adyenStatus”

Question

我在浏览器控制台中看到的错误是：

Uncaught (in promise) Error: field "adyenStatus" not found in type: 'Payouts'

我的代码如下所示：

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>
  );
}

这是 API 在 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
       }
     }
    }
  }
  }

我不明白为什么这个字段不可见。我测试了其他一些字段，例如

currency

并添加了它，效果很好。任何人都可以建议这里出了什么问题吗？

Answer 1

经过几个小时的调试，我发现所使用的角色无权查看此字段 adyen_status （可能是在初始角色创建后添加的，因此不允许 SELECT 权限）。