Как работать с реквизитами, созданными из Apollo Client возвращенного результата запроса в TypeScript? - PullRequest
Новая
       11

Как работать с реквизитами, созданными из Apollo Client возвращенного результата запроса в TypeScript?

0 голосов
/ 14 января 2019

Я проследил некоторые уроки блога по GraphQL и смог связать свой запрос GraphQL с компонентом React, который должен отображать возвращаемый результат. Это работает, когда я делаю console.log this.props.

В качестве следующего шага я хотел бы сослаться на отдельные элементы данных внутри реквизита (которые были размещены там GraphQL) - что-то вроде props.Security.loading - и здесь все это разваливается.

В идеале, я просто хотел бы использовать «любое» где-нибудь в наборе текста и избежать этой проблемы, но я также могу явно указать в интерфейсе (-ах) все данные, которые могут вернуться (что, я думаю, побеждает цель GraphQL). Так как мне это сделать? Кажется, что когда я закомментирую строку «data: Security» из интерфейса Props, код компилируется. Тщательно запутался здесь. Спасибо 

import * as React from "react";
import { gql } from "apollo-boost";
import { graphql } from "react-apollo";

const getSymbolInfoQuery = gql` {
                Security(id: "MSFT") {
                  id
                }   
             } `;

interface Security {
  loading: Boolean;
}

interface Props {
  data: Security
}

class ProductChecker extends React.Component<Props, {}> {
  constructor(props: Props) {
    super(props);
    console.log(props);
  }

  render() {
    return <div>{this.displaySearchFilters()}</div>;   
  }

  displaySearchFilters() {
    console.log(this.props);

    return (
      <div>Hello there</div>
    );
  }
}

export default graphql(getSymbolInfoQuery)(ProductChecker);

Ошибка в самой последней строке экспорта: 

   Error: [ts]
    Argument of type 'typeof ProductChecker' is not assignable to parameter of type 'ComponentType<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>>'.
      Type 'typeof ProductChecker' is not assignable to type 'ComponentClass<Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>, any>'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'Partial<DataProps<{}, {}>> & Partial<MutateProps<{}, {}>>' is not assignable to type 'Props'.
            Types of property 'data' are incompatible.
              Type 'DataValue<{}, {}> | undefined' is not assignable to type 'Security'.
                Type 'undefined' is not assignable to type 'Security'. [2345]
    class ProductChecker

Ответы [ 2 ]

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

Попробуйте следующее: 

import { graphql, ChildDataProps } from 'react-apollo'

type TSecurity = {
  loading: Boolean;
}
type TProps = {
  data: TSecurity
}
// ChildDataProps<InputProps, Response, Variables>
type TChildProps = ChildDataProps<{}, TProps , {}>

// graphql<InputProps, Response, Variables, ChildProps>()
graphql<{}, TProps, {}, TChildProps>(getSymbolInfoQuery)(ProductChecker)

больше информации об использовании Apollo с TypeScript: здесь

0 голосов
/ 14 января 2019 
displaySearchFilters() { console.log(this.props); }

это должно быть выше рендера

...