Невозможно найти правильный интерфейс машинописи для запроса GraphQL в React с Apollo - PullRequest
Новая
       11

Невозможно найти правильный интерфейс машинописи для запроса GraphQL в React с Apollo

1 голос
/ 19 апреля 2019

этот код ниже является компонентом реагирования, который возвращает таблицу, в которой каждая строка данных извлекается из бэкэнд-API через GraphQL.Данные извлекаются правильно, но я не могу найти правильный интерфейс для данных, извлекаемых компонентом Query.

Я получаю следующие ошибки: 

TypeScript error: Type '({ data: { allTeams }, error, loading }: SectionTableQueryProps) => Element' is not assignable to type '((result: QueryResult<any, OperationVariables>) => ReactNode) | (((result: QueryResult<any, OperationVariables>) => ReactNode) & string) | (((result: QueryResult<any, OperationVariables>) => ReactNode) & number) | ... 4 more ... | (((result: QueryResult<...>) => ReactNode) & ReactPortal)'.
  Type '({ data: { allTeams }, error, loading }: SectionTableQueryProps) => Element' is not assignable to type '(result: QueryResult<any, OperationVariables>) => ReactNode'.
    Types of parameters '__0' and 'result' are incompatible.
      Property 'allTeams' is missing in type 'QueryResult<any, OperationVariables>' but required in type 'SectionTableQueryProps'.  TS2322

    50 |     <tbody>
    51 |       <Query query={GET_ALL_TEAMS}>
  > 52 |       {({ data: { allTeams = [] } = {}, error, loading }: SectionTableQueryProps) => {
       |       ^
    53 |         if (loading) {
    54 |           return <div>LOADING</div>
    55 |         };   




TypeScript error: Property 'data' does not exist on type 'SectionTableQueryProps'.  TS2339

    50 |     <tbody>
    51 |       <Query query={GET_ALL_TEAMS}>
  > 52 |       {({ data: { allTeams = [] } = {}, error, loading }: SectionTableQueryProps) => {
       |           ^
    53 |         if (loading) {
    54 |           return <div>LOADING</div>
    55 |         };

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { ApolloError } from 'apollo-client';


interface Team {
  id: string;
  name: string;
}

interface Data {
  allTeams?: Team[];
}

interface SectionTableQueryProps {
    allTeams: Team[];
    error?: ApolloError;
    loading: boolean;
}

const GET_ALL_TEAMS = gql`
  query {
    allTeams {
      id
      name
    }
  }
`;

const SectionTable = (props) => (
  <table className="table table-hover table-responsive">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Name</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      <Query query={GET_ALL_TEAMS}>
      {({ data: { allTeams = [] } = {}, error, loading }: SectionTableQueryProps) => {
        if (loading) {
          return <div>LOADING</div>
        };
        if (error !== undefined) {
          return <div>ERROR</div>
        };
        return (
          // jsx code of the component
        );
      }}
    </Query>
    </tbody>
  </table>
)

export default SectionTable;

Как правильно написать свои интерфейсы Typescript?

1 Ответ

0 голосов
/ 08 мая 2019

Во-первых, в вашем интерфейсе SectionTableQueryProps вы должны иметь data вместо allTeams, потому что компонент <Query> ожидает, что это значение будет там.

Ошибка TypeScript: свойство«data» не существует для типа «SectionTableQueryProps».TS2339

Но все же я считаю, что это не решит полностью вашу проблему.Чтобы достичь этого, вам нужно создать пользовательский компонент Query, который расширяет компонент apollo query и дает им типы.

Что-то вроде: 

interface Team {
  id: string;
  name: string;
}

interface AllTeams {
    allTeams: Team[];
}

const GET_ALL_TEAMS = gql`
  query {
    allTeams {
      id
      name
    }
  }
`;

class MyQuery extends Query<AllTeams> {}

const SectionTable = (props) => (
  <table className="table table-hover table-responsive">
    <tbody>
      {* HERE: we use the custom query component *}
      <MyQuery query={GET_ALL_TEAMS}>
      {({ data, error, loading }) => {
        if (loading) {
          return <div>LOADING</div>
        };
        if (error !== undefined) {
          return <div>ERROR</div>
        };

        // HERE: You have access to the typed interface
        console.log(data.allTeams);

        return (
          // jsx code of the component
        );
      }}
      </MyQuery>
    </tbody>
  </table>
)

В противном случае вы можете заглянуть в клиент apollo: codegen , это инструмент, который может создавать все интерфейсы, необходимые для ваших запросов.

...