React Apollo useQuery hook с TypeScript

Опитвам се да накарам useQuery hook да работи с TypeScript.

Ето моето запитване

export const FETCH_LINKS = gql`
  query FetchLinks {
    feed {
      links {
        id
        createdAt
        url
        description
     }
  }
}
`;

Генерирах типовете от GraphQL схема с graphql-codegen

export type Feed = {
  __typename?: 'Feed';
  links: Array<Link>;
  count: Scalars['Int'];
};

export type Link = {
  __typename?: 'Link';
  id: Scalars['ID'];
  createdAt: Scalars['DateTime'];
  description: Scalars['String'];
  url: Scalars['String'];
  postedBy?: Maybe<User>;
  votes: Array<Vote>;
};

В моя компонент прилагам типа към useQuery кука

const { data, loading, error } = useQuery<Feed>(FETCH_LINKS);

Проблемът е, че в променливата data получавам обект със следната форма:

{
feed: {
  __typename
  links
  count
  }
}

И така, за да премина през масива от връзки и да ги изобразя на страницата, трябва да направя data.feed.links.map(), но типът Feed няма свойство feed върху него и следователно получавам съобщение за грешка Property 'feed' does not exist on type 'Feed' Как да коригирам това несъответствие


reactjs typescript graphql apollo-client react-apollo
person Aleksandr Fomin    schedule 29.06.2020    source източник
comment
Очевидното решение е да редактирате типа Feed, генериран от graphql-codegen, но не изглежда като правилен начин да го направите   -  person Aleksandr Fomin    schedule 29.06.2020
comment
опитай useQuery<{ feed: Feed }>   -  person Nikita Madeev    schedule 29.06.2020

Отговори (3)


arrow_upward
4
arrow_downward

Трябва да използвате приставката typescript-operations в допълнение към приставката typescript . По този начин вие не само ще генерирате TS типове за типовете GraphQL във вашата схема, но също така ще генерирате типове въз основа на действителните заявки, които използвате от страна на клиента. След това тези допълнителни типове могат да бъдат включени директно в променливите на типа, използвани от куките.

Като алтернатива можете също да използвате typescript-react-apollo плъгин за генериране на вашите куки за вас.

Ако не искате да използвате допълнителни плъгини, ще трябва сами да конструирате подходящите типове за вашата заявка и променливи:

interface FetchLinksData {
  feed: Feed
}
person Daniel Rearden    schedule 29.06.2020

arrow_upward
6
arrow_downward

Ако проверите документация, ще видите, че ще трябва да създадете още един интерфейс за представяне на данни:

interface FetchLinksData {
  feed: Feed[];
}

В компонент можете да го използвате по този начин:

const { data, loading, error } = useQuery<FetchLinksData>(FETCH_LINKS);
const feeds = data.feed;
person Ivan Vasiljevic    schedule 29.06.2020

arrow_upward
-1
arrow_downward

Тъй като използвате кукички, предоставени от react-apollo, вероятно трябва да използвате и официалния инструмент apollo cli за генериране на типове - https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output. Apollo codegen генерира правилни типове от кутията, без да се налага да се притеснявате за добавяне на допълнителни добавки.

person manjunatha_d    schedule 02.07.2020