Использование обобщений Typescript с компонентом Query-Apollo Query - PullRequest
Новая
       9

Использование обобщений Typescript с компонентом Query-Apollo Query

0 голосов
/ 23 июня 2019

Я пытаюсь обернуть свой компонент Query, чтобы при возвращении ошибки отображалось сообщение об ошибке.Для этого правильно с Typescript, мой новый компонент должен использовать дженерики, аналогичные компоненту Query в Reaction-Apollo.Когда я пытаюсь передать дженерики, которые я принимаю для своей оболочки, я получаю следующую ошибку: 

Type '{ 
    children: (props: QueryResult<TData, TVariables>) => Element; query: any; 
    displayName?: string | undefined; skip?: boolean | undefined; 
    onCompleted?: ((data: TData) => void) | undefined; ... 9 more ...; 
    partialRefetch?: boolean | undefined; 
}' 
is not assignable to type 
'Pick<InferProps<{ 
    client: Requireable<object>; 
    children: Validator<(...args: any[]) => any>; 
    fetchPolicy: Requireable<string>; 
    notifyOnNetworkStatusChange: Requireable<boolean>; 
    onCompleted: Requireable<...>; ... 5 more ...; 
    partialRefetch: Requireable<...>; 
}>, Exclude<...> | ... 9 more ... | Exclude<...>>'.

Ниже приведен код для оболочки.Может кто-нибудь помочь мне понять, как правильно использовать дженерики и избавиться от этой ошибки. 

import React from "react";
import ErrorMessage from "../components/ErrorMessage";
import { Query, QueryProps, QueryResult } from "react-apollo";

/**
 * This component can be used to to display error messages when a query
 * or mutation returns an error.  To do so, simply wrap a component
 * using the function dipslayError(Component) and use that instead of the
 * Query or Mutation component.
 *
 * Additionally, a function errorToMessage can be passed as a prop to the wrapped component.
 * This function will be ran on the returned error to convert the error into a message.  If
 * the function is not provided, the message displayed will be error.message.
 *
 */

export interface QueryWithErrorProps<TData, TVariables> extends QueryProps<TData, TVariables> {
    errorToMessage?: (error: Error) => string;
}

const QueryWithError = <TData, TVariables>(props: QueryWithErrorProps<TData, TVariables>) => {
    const { children, errorToMessage, ...rest } = props;
    let getMessage: (error: Error) => string;
    if (errorToMessage) getMessage = errorToMessage;
    else {
        getMessage = error => {
            return error.message;
        };
    }
    return (
        <Query<TData, TVariables> {...rest}>
            {(props: QueryResult<TData, TVariables>) => {
                const { error } = props;
                return (
                    <React.Fragment>
                        {children(props)}
                        {error && <ErrorMessage message={getMessage(error)} />}
                    </React.Fragment>
                );
            }}
        </Query>
    );
};
QueryWithError.displayName = "QueryWithError";
export default QueryWithError;

Изображение ошибки

...