Типы GraphQL определяются как неизвестные в Typescript при компиляции с помощью Relay

Я новичок в использовании Typescript и обнаружил несоответствие в том, как типы обрабатываются из схемы GraphQL и типов, сгенерированных через Relay.

Вот пример:

# in schema.graphql
"""
columns and relationships of "businesses"
"""
type businesses implements Node {
  businessId: bigint!
  name: String!
}
// in __generated__/Business_business.graphql
export type Business_business = {
    readonly name: string;
    readonly businessId: unknown;
    readonly " $refType": "Business_business";
};
export type Business_business$data = Business_business;
export type Business_business$key = {
    readonly " $data"?: Business_business$data;
    readonly " $fragmentRefs": FragmentRefs<"Business_business">;
};
const BusinessFragment = graphql`
  fragment Business_business on businesses {
    name
    businessId
  }
`

type Props = {
  fragmentRef: Business_business$key
}

const Business = ({ fragmentRef }: Props) => {
  const business = useFragment(BusinessFragment, fragmentRef)
  return (
    <div>
      <p>my html!</>
      {/* I get the error: Type 'unknown' is not assignable to type 'number' for businessId */}
      <ChildComponent businessId = {business.businessId} />
    </div>
  )
}

interface Props {
  businessId: number
}

const ChildComponent = ({ businessId }: Props) => {

  return (
    <p>my business id: {businessId}</p>
  )
}

Есть ли дополнительная конфигурация, которую мне нужно сделать, чтобы Relay понимал типы Hasura? Я последовал примеру через ретранслировать документы.

У меня есть предположение, что Relay не компилирует bigint в number.


Обновлять

Я изменил тип столбца в Hasura с bigint на Int, и это решило проблему. Есть ли способ указать Relay, как сопоставлять типы, с которыми он не знаком? В этом случае преобразование bigint в number вполне нормально.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
22
1

Ответы 1

  1. Вы импортировали тип с // in __generated__/Business_business.graphql?

  2. Есть опечатка ?? какой $ key добавлен к имени типа?

    type Props = {
      fragmentRef: Business_business$key
    }
    

Я обновил вопрос, чтобы сделать этот импорт более понятным.

Charklewis 09.04.2021 15:00

Другие вопросы по теме