尝试使用 React Apollo Query 组件进行 GraphQL 查询，打字稿导致错误

Posted 2023-03-08

【中文标题】尝试使用 React Apollo Query 组件进行 GraphQL 查询，打字稿导致错误

【英文标题】：Trying to use React Apollo Query component for GraphQL query with typescript causing error

【发布时间】：2019-09-22 15:43:43

【问题描述】：

我正在尝试使用 Apollo 查询 GraphQl API。我正在使用 typescript 在 React 中执行此操作，但无法让 Query 组件停止抛出错误。 我对这整个组合很陌生，所以我可能会做一些明显错误的事情。有什么想法吗？

这是错误：

Type ' children: (string | (( loading, error, data : QueryResult<any, OperationVariables>) => any))[]; query: any; ' is not assignable to type 'Pick<Readonly<QueryProps<any, OperationVariables>> & Readonly< children?: ReactNode; >, "children" | "displayName" | "skip" | "onCompleted" | "onError" | "s-s-r" | "variables" | ... 6 more ... | "partialRefetch">'.
  Types of property 'children' are incompatible.
    Type '(string | (( loading, error, data : QueryResult<any, OperationVariables>) => any))[]' 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 '(string | (( loading, error, data : QueryResult<any, OperationVariables>) => any))[]' is not assignable to type '((result: QueryResult<any, OperationVariables>) => ReactNode) & ReactNodeArray

这是我的代码：

import React from 'react';
import gql from "graphql-tag";
import  Query  from "react-apollo";


export interface LoginProps  
    data: object; item: string; query: object; loading: string; error: string;
 ;

 const getLogin =
    gql`
        
        viewer 
            login
            
        
    `;

export class Test extends React.Component<LoginProps, >  
    <Query query=getLogin>
            ( loading, error, data ) => 
                if (loading) return <p>Loading...</p>;
                if (error) return <p>Error!</p>;

                return data.viewer.map( item => 
                    <div key=item.login>
                        <p>item.login</p>
                    </div>
                );
            ;
    </Query>
;

export default Test;

【参考方案1】：

首先，由于您没有在组件上使用状态，我建议您使用 React.FunctionComponent 而不是 React.Component。

关于您的问题：您必须在组件的渲染函数中使用jsx 组件，例如：

export class Test extends React.Component<LoginProps, > 
  // HERE: use the render method
  render() 
    return (
      <Query query=getLogin>
        ( loading, error, data ) => 
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error!</p>;

          return data.viewer.map(item => 
            <div key=item.login>
              <p>item.login</p>
            </div>;
          );
        
        ;
      </Query>
    );
  

希望对你有帮助。

【参考方案2】：

显然不相关，但对于那些来这里寻找答案的人来说，Query 内部的描述如下：

    <Query query=getLogin>
        (result: QueryResult) => 
          const  loading, error, data  = result;

            // ...rest here
            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error!</p>;

            return data.viewer.map( item => 
                <div key=item.login>
                    <p>item.login</p>
                </div>
            );
        ;
</Query>