Question

下面的代码是一个react组件，它返回一个表，其中的每一行都是通过GraphQL从后端API提取的数据。数据已正确提取，但我找不到由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接口？

Answer 1

首先，在界面SectionTableQueryProps中，您应该使用data而不是allTeams，因为<Query>组件期望该值存在。

TypeScript错误：类型'SectionTableQueryProps'上不存在属性'data'。 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 client:codegen，它是一个可以创建查询所需要的所有接口的工具。

无法在React with Apollo中为GraphQL查询找到正确的Typescript接口

1 个答案: