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

Я следил за учебником в блоге по GraphQL и смог связать свой запрос GraphQL с компонентом React, который должен отображать возвращаемый результат. Это работает, когда я делаю console.info для 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.info(props);
  }

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

  displaySearchFilters() {
    console.info(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

Вы строго хотите придерживаться graphql или используете WithApolloClient как вариант для вас, извлекая данные с помощью внедренного клиента в методе componentDidMount?

Christian Ivicevic 14.01.2019 22:15

У меня нет предпочтительного метода - я учусь и пытаюсь заставить его работать. Что вы предлагаете? Спасибо

alernerdev 14.01.2019 22:37

Он немного более запутан, поскольку он также содержит другую логику, но взгляните на этот код: github.com/comsysto/pokemon-trivia-challenge/blob/… Если вы хотите попробовать, используя WithApolloClient, withApollo и введенный client в реквизитах, и он, как оказалось, работает правильно, я может написать правильный ответ.

Christian Ivicevic 14.01.2019 22:52

ой, я смотрел, но это на несколько порядков выше моей головы. Есть ли возможность немного его разбавить? Я здесь неблагодарный нищий, извини, буду пытаться разобраться

alernerdev 16.01.2019 16:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
513
2

Ответы 2

displaySearchFilters() { console.info(this.props); }

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

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

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 - здесь

Другие вопросы по теме