1
votes

React Apollo hook useQuery avec TypeScript

J'essaie de faire fonctionner le hook useQuery avec TypeScript.

Voici ma requête

{
feed: {
  __typename
  links
  count
  }
}

J'ai généré les types à partir de Schéma GraphQL avec graphql-codegen

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

Dans mon composant, j'applique le type au hook useQuery

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

Le problème est que dans la variable data je reçois un objet de la forme suivante:

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

Donc, pour parcourir le tableau de liens et les rendre sur la page, je dois faire data.feed.links.map () mais le type Feed le fait Je n'ai pas de propriété feed dessus et par conséquent, j'obtiens un message d'erreur La propriété 'feed' n'existe pas sur le type 'Feed' Comment corriger cette incohérence

reactjs typescript graphql react-apollo apollo-client

2 commentaires

La solution évidente est de modifier le type de flux généré par graphql-codegen mais cela ne semble pas être une bonne façon de procéder

essayez useQuery <{feed: Feed}>

3 Réponses :

2
votes

Vous devez utiliser le plugin typescript-operations en plus de le plugin typescript . De cette façon, vous générerez non seulement des types TS pour les types GraphQL dans votre schéma, mais vous générerez également des types basés sur les requêtes réelles que vous utilisez côté client. Ces types supplémentaires peuvent ensuite être connectés directement aux variables de type utilisées par les hooks.

Vous pouvez également utiliser typescript-react-apollo pour générer vos hooks pour vous.

Si vous ne souhaitez pas utiliser de plugins supplémentaires, devez construire vous-même les types appropriés pour votre requête et vos variables:

interface FetchLinksData {
  feed: Feed
}

0 commentaires

4
votes

Si vous consultez la documentation vous verrez que vous auriez besoin de créer une interface supplémentaire pour représenter les données:

const { data, loading, error } = useQuery<FetchLinksData>(FETCH_LINKS);
const feeds = data.feed;

Dans le composant, vous pouvez l'utiliser comme ceci:

interface FetchLinksData {
  feed: Feed[];
}

0 commentaires

0
votes

Puisque vous utilisez les hooks fournis par react-apollo , vous devriez probablement utiliser l'outil cli officiel apollo pour générer également des types - https://github.com/apollographql/apollo-tooling#apollo-clientcodegen-output . Apollo codegen génère des types corrects prêts à l'emploi sans avoir à vous soucier de l'ajout de plugins supplémentaires.

0 commentaires