Я следил за учебником в блоге по 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
У меня нет предпочтительного метода - я учусь и пытаюсь заставить его работать. Что вы предлагаете? Спасибо
Он немного более запутан, поскольку он также содержит другую логику, но взгляните на этот код: github.com/comsysto/pokemon-trivia-challenge/blob/… Если вы хотите попробовать, используя WithApolloClient, withApollo и введенный client в реквизитах, и он, как оказалось, работает правильно, я может написать правильный ответ.
ой, я смотрел, но это на несколько порядков выше моей головы. Есть ли возможность немного его разбавить? Я здесь неблагодарный нищий, извини, буду пытаться разобраться





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 - здесь
Вы строго хотите придерживаться
graphqlили используетеWithApolloClientкак вариант для вас, извлекая данные с помощью внедренного клиента в методеcomponentDidMount?